3.3.3 主视图UI
主视图如图3-36 所示是MainView (主视图)设计窗口,我们一步一步介绍一下如何实现该视图设计和编程。
表3-7MainView 视图中的控件
首先我们需要为工程准备图片,在工程的“Resources
”文件夹右键点击菜单Add-> Existing Files…
,弹出添加对话框,选择原作者项目中图片添加到当前工程中。图片添加到工程中后,可以添加背景图片控件了,选择MainView.xib
文件双击会用Interface Builder
打开,然后在菜单Tool->Library
打开对象库对话框,选择Image View
把它拖拽到MainView
设计窗口,如图3-37
所示。
主视图如图3-36 所示是MainView (主视图)设计窗口,我们一步一步介绍一下如何实现该视图设计和编程。
图3-36 MainView
视图设计窗口
主视图中的控件进行了编号,视图中的控件内容见表3-7
所示。
表3-7MainView 视图中的控件
编号 |
控件项目 |
控件类型 |
1 |
密码长度标签 |
UILabel |
2 |
密码长度文本框 |
UITextField |
3 |
否显示发音标签 |
UILabel |
4 |
否显示发音开关 |
UISwitch |
5 |
包括小写标签 |
UILabel |
6 |
包括小写开关 |
UISwitch |
7 |
包括大写标签 |
UILabel |
8 |
包括大写开关 |
UISwitch |
9 |
包括数字标签 |
UILabel |
10 |
包括数字开关 |
UISwitch |
11 |
包括标点符号标签 |
UILabel |
12 |
包括标点符号开关 |
UISwitch |
13 |
产生密码按钮 |
UIButton |
14 |
输出密码文本框 |
UITextField |
15 |
发音文本框 |
UITextView |
16 |
发送E-mail按钮 |
UITextField |
17 |
背景图片控件 |
UIImageView |
图3-37
拖拽Image View
到主视图设计窗口
然后在菜单Tools->Attributes Inspector
打开按钮检查器,点中标签
中对话框的Image
下拉列表中选择SafeBack.png
图片,如图3-38
所示。
图3-38
选择图片设计窗口
背景图片添加完成之后,我们就可以添加其它的控件了,这个没有先后顺序,从对象库中拖拽并摆放好就可以了。下面我们添加几个有代表性的,其它的就不再介绍了,先看密码长度标签如何做的吧,通过对象库拖拽一个Label
控件到设计视图,然后双击使其处于编辑状态,输入Password Length
如图3-39
所示。再将鼠标点击到其它地方,这样密码长度标签就添加完成了。
图3-39
编辑Label
控件
密码长度文本框是从对象库拖拽一个Text Field
控件到设计视图如图3-40
所示。
图3-40
编辑文本框控件
然后在菜单Tools->Attributes Inspector
打开检查器,点中标签
打开检查器,在Text
项目中输入8
,这可以让文本框显示8
的初始值,在Alignment
项目中选择右对齐按钮
,如图3-41
所示。
图3-41
文本框检查器
其它的控件就不再一一介绍,在视图的下方还有3
个隐藏控件,这些控件是如何实现隐藏和显示的呢?在本应用中是通过调整Alpha
(透明度)属性,Alpha
取值范围是0.0~1.0
,0.0
是最弱即完全透明,1.0
是最强即完全不透明。从对象库拖拽一个按钮到设计视图,双击该按钮,编辑按钮的标签E-Mail Password
,然后打开检查器,点中标签
,找到Alpha
属性如图3-42
所示,将划块拖到最左边,就是0.0
取值
。
图3-42 Alpha
属性
其它
2
个控件也可以这样设置
Alpha
值。这样整个主视图
UI
部分就完成了。下面我们介绍主视图代码实现。