技术干货 | iosUI基础入门
- 肥春 -
Hello,又见面了!上次跟大家介绍了iOS开发工具的使用,那么这次将带大家一起使用我们上次介绍的开发工具来完成一个属于我们自己的小项目吧!
创建项目
做项目第一件事当然就是要创建项目,这步的操作在上一篇推文已经有详细的说明了,不记得了的同学可以打开上一篇推文重温一下。我们就以上一篇推文所创建的abc工程来进行以下的操作吧!
UI基础控件的使用
进入工程后,打开Main.storyboard界面。右下角会有很多的控件,这次我们来跟大家讲讲一些常用控件的使用。
Label用于显示文字,数字等,Button是按钮,Text Field是输入框。需要使用某个控件的时候只需将此控件拖过去View Controller的框里即可。
控件的约束
按照上一步的步骤,我们把一个控件拖到了UI界面(View Controller的框就相当于用户的手机界面),这里我们把一个Label拖进来,任何一个控件都是需要给它进行约束的,也就是把控件定位下来。
在Xcode中,点击右下方倒数第二个按钮即可进行约束,一般我们都把四个约束(即上下左右)约束好,这样控件就不会因为机型等因素发生偏移。
约束的时候点击红色虚线即可约束,图中已经把该控件的上和左约束给约束好了,需要把控件放到什么位置,只需把框中的坐标系数改成想要的即可。
控件的属性
Label
把控件的位置固定好了,接下来就开始设置控件的属性。先点击你需要设置属性的控件,然后点击箭头所指的按钮,按钮下方就会显示该控件的属性设置了。
Text的位置设置显示的字体,Color就是颜色的设置,Font是字体格式的设置。如图是Text属性为“我是一个标签”,Color属性为蓝色,Font属性为“System 17.0”的显示效果。
otton
这里是按钮的属性设置,跟Label一样,它也有字体显示与字体颜色与字体格式的属性。不同的是,它可以放入图片和背景。
如图是Text属性为“我是一个按钮”,Text Color属性(因为Botton多了一个Shadow Color属性)为白色,Font属性为“System 15.0”,Background属性为蓝色的显示效果。在功能上Botton是可以被点击从而执行相应的操作的控件。
Text Field
输入框的属性也是有基本的Text属性和Color属性,与前面一样,就不再多说了。输入框主要是Border Style属性,这决定着输入框的样式。
如果背景有文字显示,则在Placeholder属性里写相应的文字。(这个效果在这个界面是显示不出来的,这在下面的模拟器上会有显示)
在Main.storyboard中设置好的控件是需要定义出来的。因为在Main.storyboard中设置好了,只是你知道控件的存在,电脑是不知道有这个控件的存在的,所以就要通过定义语句把该控件定义出来。
在Xcode中,有一项关联功能。只需要把设置好的控件直接与代码区关联起来就实现了定义。
如图,点击红色箭头指着的按钮,就会出现以下界面。然后点击要定义的控件,按住control键拖至代码区,然后命名即可实现关联。
需要一提的是,若Button是需要被点击后执行其他操作的时候,在关联的时候,必须把Connection属性的值改为Action。如下图。
如图,我们设置好的三个控件就定义好了,需要让他们实现更多的功能,就需要通过代码来实现。
最后,用模拟器运行一次(这次用的是iPhone 8 Plus)。我们所设置好的三个控件在8 Plus上显示的效果就是这样了,也算是一个属于自己的小项目了。
小预告
这一期就到这里啦!下一期我们将推出黑苹果教程,让你的电脑也能体验苹果电脑的系统。我们下期再见!
- 特别鸣谢 -
内容 - 莫大大
封面 - baidu
编辑 - 肥春