【极客班】iOS用户界面

MVC模式

Cocoa Touch设计者们采用MVC模式作为指导原则,在基于图形用户界面的应用程序中,使用MVC可以非常合理地对代码进行拆分。MVC模式将代码功能划分为3个不同类别:

模型:保存应用程序数据的类。

视图:包括窗口、控件以及其他一些用户可以看到并能与之交互的元素。

控制器:把模型和视图捆绑在一起的代码,包括处理用户输入的应用程序逻辑。

MVC的目标是最大限度地分离这3类代码。创建的任何对象都应该非常清晰明确,让人一看便知这个对象所属的分类(模型、视图或控制器),尽量不要包含那些可能被认为属于多个分类的功能。例如,实现按钮的对象不应该包含按钮点击时处理数据的代码,实现银行账户的对象不应该包含绘制表格来显示交易数据的代码。

创建模型时,可以编写一个Swift或Objective-C类来保存应用程序数据,也可以使用Core Data构建一个数据模型。控制器组件通常由应用程序的具体类组成。控制器可以是完全自定义的类,但在多数情况下,它是UIKit框架提供的通用控制器类(比如UIViewController)的子类。

输出接口和操作方法

为了让代码能引用nib中的对象,需要代码里有一个变量来引用界面对象;可以把输出接口看作指向用户界面中对象的指针。反过来也可以对storyboard或nib文件中的界面对象进行设置,以触发控制器类中的某些特殊方法。

【极客班】iOS用户界面_第1张图片

输出接口:

在Swift里,输出接口是一个很常见的属性,用修饰符@IBoutlet来标记。代码如下:

@IBOutlet weak var myButton: UIButton!

但在Objective-C中输出接口是一种特殊属性,用IBOutlet关键字声明。代码如下:

@property (weak, nonatomic) IBOutlet UIButton *myButton;

操作方法:

在Swift中,操作方法是拥有@IBAction修饰符的方法,它告诉Interface Builder这个方法可以被storyboard或nib文件中的控件触发:

@IBAction func doSomething(sender: UIButton) {}

或 @IBAction func doSomething() {}

但在Objective-C中操作方法是一种返回类型为IBAction的特殊方法:

-(IBAction)doSomething:(id)sender;

或-(IBAction)doSomething;

操作方法要么不接受任何参数,要么只接受一个参数,该参数通常命名为sender。在操作方法被调用时,sender会指向触发该方法的对象。例如,如果用户按下某个按钮时触发了这个操作方法,那么sender就指向这个被按下的按钮。

【极客班】iOS用户界面_第2张图片

关联关系:界面对象.事件——>类实例.方法

添加文本框、按钮以及图像

添加一个文本框和按钮时先找到Text Field、Button以及Image View,把它们拖入storyboard中,如下:

文本框检查器设置:

【极客班】iOS用户界面_第3张图片

第一部分最上方是Text属性,它旁边的两个控件可以让你控制文本框中显示的内容。上方的下拉列表按钮中有纯文本(plain Text)和属性文本(Attributed Text)两种类型可供选择,之后是一系列用于设置字体和字体颜色的空间。接下来的部分是Placeholder(占位符),可以在这里输入一些文体;文本框的内容为空时,Placeholder的内容就会以灰色文本显示在文本框。接下来的两个字段是Background和Disabled,仅在需要定制文本框的外观时使用。再之后是4个名为Border Style的按钮,用于更改文本框边框的绘制方式。在边框设置下面是Clear Button弹出按钮,可以在这里设置何时出现清除按钮(clear Button)。Adjust to Fit复选框可以指定显示文本是否应随文本框尺寸的变化而变化。接着是Return Key弹出选项,Return键是虚拟键盘右下方的一个键,它的标签会根据用户正在进行的操作发生变化;如果选中了Auto-enable Return Key复选框,那么在文本框内容为空时Return键将被禁用,直到至少在文本框中输入一个字符;Secure复选框指定是否在文本框中显示已输入的字符。

UIButton属性设置:

【极客班】iOS用户界面_第4张图片

最上方可以定义button的类型以及状态,接着是Button的内容和颜色字体大小;接着是插图以及定义背景。

代码创建按钮:


首先创建一个Button并定义Type,然后设置这个按钮的位置和尺寸,再就是设置标题以及相应;最后把这个按钮添加到storyboard的view里面。

设置图像属性:

【极客班】iOS用户界面_第5张图片

Mode菜单用于选择内容在视图内部的显示方式;Interaction部分的两个复选框与用户交互有关,下面那个为接受多点触摸事件;Alpha定义图像的透明度;Background用于确定视图的背景颜色;Tint可以调节指定所选视图的高光颜色;Stretching可以忽略,只有在屏幕上调整矩形视图大小导致重新绘图时,才需要拉伸。

键盘遮蔽及提示信息

按下Done按钮关闭键盘:

iOS设备上的键盘是虚拟的,不是物理键盘,因此我们需要一些额外的步骤来确保用户完成输入后可以关闭键盘。用户按下键盘上的Done按钮时,会产生一个Did End On Exit事件,此时需要让文本框交出控制权,以关闭键盘。为了实现这个功能,需要在控制器类中添加一个操作方法。

触摸背景关闭键盘:

这个方法只是告诉两个文本框放弃第一响应状态。即使控件并非第一响应者,对其调用resignFirstResponder方法是非常安全,所以可以在这两个文本框上都调用方法,而不需要检查它们是否为第一响应者。

提示信息:

有些界面注册或者登入,当用户输错时会弹出提示信息,iOS中用UIAlertController解决该类问题,具体代码如下:

【极客班】iOS用户界面_第6张图片

具体步骤概括为创建alert以及action信息,再把action添加进alert里面,最后把alert添加到ViewController中。

你可能感兴趣的:(【极客班】iOS用户界面)