上一节介绍了图像/文本框/输入框,并进行了适配.这节我们就开始介绍剩下的UI部分,如图1-5-23
图1-5-23 剩余部分的UI部分
下面我们分别分为身高/性别/是否5~6岁/宝宝生日来一步一步添加到视图中
❤️身高(滑块条控件)
这部分由三个控件组成,分别是两个UILabel和一个UISlider如图1-5-24将三个控件分别拖入视图中,并将第一个label命名为"身高(厘米):".第二个label输入身高的默认值设置为80将UISlider放到中间
图1-5-24添加两个label和一个UISlider到视图中
我们选择UISlider并选择特定的范围值,儿童3~6岁大概范围在80~130cm,所以我们将最小是设置为80,最大值设置为130.如图1-5-25
图1-5-26 设置UISlider的最小和最大值
下一步就开始分别约束.在这里我们先固定两个文本,然后再约束滑动条.在约束两个label的时候要保持自身的宽高不变,第一个label要靠上靠左约束,儿右侧的label需要靠上靠右约束,而中间的滑块就需要对自身的宽度进行变化,我们将对靠上,靠左,靠右,并进行高度固定,如图1-5-27/图1-5-28/图1-5-29
图1-5-27 对身高约束
图1-5-28对数字进行约束
图1-5-29对滑动条进行约束
❤️性别(分段选择器)
这部分由两个控件组成分别是UILabel和UISegmentedControl.UILabel大家都熟悉了,我们主要说一下Segmented Control.它提供一栏按钮（有时称为按钮栏），但只能激活其中一个按钮。分段控件会导致用户在屏幕上看到的内容发生变化。它们常用于在不同类别的信息之间选择，或在不同的应用屏幕之间切换,本节中将会根据选中状态,分辨出是小美女还是小帅锅.如图1-5-30
图1-5-30默认情况下的Segmented Control
而我们在这里并不想使用"First"和"Second",我们需要"小帅哥"和小美女,那么我们选中控件,把注意力转移到分段控件对应的属性栏,在Segment栏中的下拉菜单中选中Segment0-First修改Title为小帅哥.同样的选择下拉菜单中选中Segment1-Second修改Title为小美女.OK 修改后如图1-5-31
图1-5-31 修改分段控件的Title
下面就进行对其约束.如图1-5-32/图1-5-33
图1-5-32对性别进行约束
图1-5-32对分段控件进行约束
❤️是否5~6岁(开关控件)
是否5~6岁也是由两个控件组成,分别是UILabel 和UISwitch组成,UISwithch(开关)一个简单的开/关切换，允许用户选择一个布尔值.本节中用来判断是否是5~6岁儿童.下面分别将控件拖到视图中并进行约束.如图1-5-33
图1-5-33添加是否是5~6岁的两个控件
约束和上面的性别一样,请参考上面.
❤️宝宝生日(日期选择器)
宝宝生日也是由两个控件组成,UILabel 和UIDatePicker组成.UIDatePicker根据名称就知道是用来选择日期的组件,他可以填写用户的出生日期，填写自己的计划，填写自己的约会安排，都是会有用到日期选择的地方的.
我们进行添加两个控件到视图中,并将UIDatePicker的宽度设置为300,并进行约束如图1-5-34
图1-5-34添加日期选择器控件
我进行约束下,约束和以上相同,等宽等高,靠上靠右约束.当然也可以先对其水平居中,等高等宽,靠上
command + R运行如图1-5-35
图1-5-35 默认的日期选择器
这个明显不是我们想要的结果,我们想要的格式应该是xxxx年xx月xx日的格式.下面我们对他的属性进行修改,如图1-5-36
图1-5-36 将Mode改为Date
再运行程序,就会得到如图1-5-37.
图1-5-37 日期选择器修改成功
❤️登录按钮
下面对最后一个登录按钮进行添加和约束
如图1-5-38
图1-5-38添加登录按钮
欧克,添加完毕,将登录按钮水平居中,并进行宽高固定,靠上进行约束如图1-5-39和1-5-40
图1-5-39对登录按钮进行水平居中约束
图1-5-40对登录按钮进行宽高固定,并靠上约束
到这里,我们1.5实例的UI部分就添加完毕了.下一节,我们就会将UI和代码连接起来,做一些事情了.下一节进行代码部分讲解.
欢迎加入Swift QQ交流群:513653400
网友评论