前言:
如何开发我们的UI界面?
这些的框架我们首先学习就是第一个:
一些常用的术语:控件:界面的一切东西我们都称之为控件
例如这张图:
上面的一切东西都是我们的控件
加法计算器01—搭建UI界面@%监听按钮点击
我们就通过代码以及我们的演示效果解释我们关于UI的一些功能
这张图就是要显示到我们手机上的一个小的界面
而我们就是要做出这样的效果
首先我们注意到这上面应该有6个控件:
还有的就是监听我们的计算按钮的点击事件(用户何时点击我们的计算按钮)
创建项目:前几步都一样
注意的是我们以后就不需要点击那个黑色的框框了,我们选择是:
第二个红色框框是作者的名字
注意现在做的是手机界面所以我们第三个红框框的位置我们选的是iPhone
注意的是不要看我们上面的文件夹这么多,平时我们只需要在上面的两个里面操作就行了,其他的不用管
当我们选择这一个文件时,其实这个就是我们手机显示的模板
当需要代码的编写的时候,我们就会在这个文件的这个方法里面编写
创建一个加法计算器的步骤:
1、首先在我们的storyboard里面托一些我们需要的控件
当我们选择我们的storyboard的时候,我们的屏幕的右下角会出现上面的视图:而我们今天所要用的控件就是我们的这三个控件
我们的加法计算器的控件摆放位置就如上图
监听我按钮的点击与输入
我们的上面的控件都要涉及到与用户的交互,例如我们的用户点击第一个框框的时候,这个时候键盘就会出现;用户点击我们的计算按钮的时候,我们的第三个框框就要出现我们计算的答案
这个时候,是谁帮助我们完成这个任务呢?UIViewController
2、监听按钮的点击(利用代码完成)
2.1、首先,我们要将我们的上面的控件变成我们的属性或方法
注意:::我们将我们的控件变成我们的属性,还是方法是有依据的他们的依据就是:
将我们的这个控件变成我们的属性或者是方法的办法就是:(下面我做的是一个示范)而且我只示范最简单的一个办法:
如果我们要将我们的这个控件变成我们的属性的时候就需要这么做
点击我们的控件、按住我们的control键、用鼠标拖向我们的这个红色框框中间
这个时候会弹出一个框框:
然后回车键,就创建了一个属性
将我们的控件变成方法的办法:
同上面的第一小步一样,只是当弹出一个框框的时候,我们需要改一些东西:
注意上面的两个与之前不同的地方(用小框框括起来了)
注意的是
1、我们的上面不难发现我们的控件变成的方法和属性是在我们的UIViewController.m文件里面。这个先不要问为什么,到时候再解释
2、当我们创建好一个属性的时候,也会发现我们的属性都是weak的类型的这个类型不要改以后会解释清楚地(我这个是随便的命名的所以不熬在意,但是我们以后在命名的时候我们一定要注意的是命名的规范性)
我们将这些属性、方法都弄好了之后代码就是这个样子的:
注意的是我们的左边的实心点代表的是我们的控件与这个属性、方法是相连的,而我们的上面的第一个是方法、剩下三个就是属性
我们的这些的方法、属性的实现都在下面的一个方法中,
疑问点:
IBAction:
1、能保证方法连线
2、相当于void
IBOutlet:
1、能保证属性可以连线
3、还有的是我们的Xcode建议我们将我们的一些属性、方法的声明放在我们的.m文件中
我们这样做的好处就是:我们的这些方法、属性是私有的,外界不能访问的
注意我们的这个一些控件:
细节的优化
1、当用户要输入数据的时候,我们要求我们的键盘是数字框
我们需要的是点击我们的这个UITextFile,然后按照上面的红框框选择
2、当我们点击我们的计算的时候,我们要求键盘要退出
这里面牵扯到一个专业词:
响应者:能够做出反应的对象就做响应者
第一响应者:叫出键盘的那个控件 (在我们的加法计算器的代码中右边那个控件就叫做第一响应者)
我们的这一行代码就是完成我们的退出键盘的这个功能
初学者易犯的错误
动画的制作以及我们的图片的移动与缩放
效果演示:
关于我们的按钮还有很多的功能的
我们的按钮是分为多种状态的,而现在我们先掌握这三种状态
1、平常状态:normal
2、点击时的状态:highlight
3、无法使用的状态:disable
这上面的三种状态都是可以有不同的图片、文字等等
这三种状态的调节在:
但是我们知道我们一旦点击我们的按钮的时候我们的按钮的上面就会在上面铺一层灰色的颜色所以我们需要点击这个功能消除这个功能
上面我们解释了我们每一个控件在我们的界面上都有一个坐标位置
我们想让我们的这个图片变动位置,就需要改变我们的这个坐标位置
如果发现我们的图片的位置、大小并没有改变可能是我们的这功能在作怪:
auto layout(自动布局)
我们需要将这个功能关掉(自己找到这个功能关掉吧)
其实我们的每一个控件都有一个属性:tag值
我们通过设定不同控件的不同的tag的值,来方便我们操作我们的控件,而我们下面就是用tag来操作我们的控件
我们的动画的制作也很简单:
通过代码的方式添加控件
这就是我们一些关于我们的UI的常见属性
下一次是我们的图片浏览器,汤姆猫
我们以这个小实例讲解我们的UI的一些知识点
这可能是这学期的最后一篇文章了,由于本人现在要为期末考试复习了
谢谢大家的支持!!!
提前预祝,各位看官新年快乐,虽然有点太早了
网友评论