iOS开发4-多控件的使用

目标

将实现一个图像视图、一个滑动条、两个不同的文本框、一个分段控件、两个开关控件和一个更符合iOS风格的按钮。

你将了解如何设置和获取各种控件的值。

还会介绍如何使用操作表单强制用户作出选择，以及使用警告视图向用户显示重要的反馈信息。并将讨论控件状态以及如何使用可拉伸图像让按钮更加美观。

内容

创建应用程序

打开Xcode，创建一个新项目，使用Single View Application模板，如之前。

1实现图像视图和文本框

将图像添加到项目之后，实现5个界面元素：图像视图、两个文本框和两个标签，如下图：

1.1添加图像视图

1）调整视图尺寸为4.7-inch。



打开Main.storyboard，在控件库中找到Image View。将其拖入到视图中。

1.2添加图片

在图像视图的Image中输入logo即可将图片添加到视图上，进行显示。

1.2调整图像视图大小

选中图像视图之后，按option+command+4调出属性检查器（或直接点检查器面板上的按钮），这样可以看到UIImageView类的可编辑选项。

看到视图中，注意到该图像被放大到完全填满了整个图像视图。原因在于，属性检查器中的Mode属性被设置为Scale To Fill（自适应缩放）。



虽然我们以这种方式使用图像和图像视图可以保证应用的正常运行，但是更好的方法是在运行前就先做好图像缩放的工作，因为运行应用时，进行图像缩放需要消耗一些时间和处理器周期。



调整后的结果：

1.3设置视图属性

选中图像视图，再看属性检查器。在检查器的Image View 部分下面的是View部分。



1.Mode

Mode菜单用于选择内容在视图内部的显示方式。这决定了图像在视图内的对齐方式，以及是否缩放图像以适应视图大小。

记住，选择任何导致图像缩放的选项都可能增加处理开销，因此最好避免使用这些选项，尽量在导入图像之前就调整好它们的大小。如果希望以多种尺寸显示同一图像，最好是在项目中导入该图像不同尺寸的多个副本，而不是强制让iOS设备在运行时对它们执行缩放。

2.Tag

UIView的所有子类，包括所有视图和控件，都有一个tag属性，该属性只是一个数值，可以在这里设置，也可以在代码中设置。Tag是开发者使用的，系统永远不会设置或修改它的值。

3.Interaction

Interaction部分的两个复选框与用户交互有关。第一个复选框User Interaction Enabled指定用户能否与当前对象进行交互。对于大多数控件来说，都应该选中这个复选框，否则控件永远不能触发操作方法。但是，图像视图默认都没有选中这个复选框，因为它们通常只是用于静态信息的显示。

另一个复选框是Multiple Touch，它决定了当前控件是否能够接收多点触摸事件。

4.Alpha

Alpha定义图像的透明度，也就是图像背后内容的可见度。Alpha是取值范围为0.0~1.0的浮点数，0.0是完全透明，1.0是完全不透明。

5.Background

视图的背景颜色。

6.Tint

指定所选视图的高光颜色。

7.Drawing

第一个复选框名为Opaque。这个复选框在默认情况下应该是选中的，如果没有，请单击选中它。Opaque选中就相当于告诉iOS当前视图背后没有需要绘制的内容，同时允许iOS的绘图方法通过一些优化来加速当前视图的绘制。

8.Stretching

Stretching(拉伸)，只有在屏幕上调整矩形视图大小导致重绘视图时，才需要拉伸。

1.4添加文本框

没啥好说的，直接按之前的方法拖控件，修改名称，调节大小，位置，如下图：



文本框检查器的属性介绍：



1.Text:它旁边的两个控件可以让你控制文本框显示的内容。上方的下拉列表按钮中有纯文本（Plain Text）和属性文本（Attributed Text）两种类型。

2.Color：设置颜色。

3.Font:设置字体。

4. Alignment：控制文本框中文字对齐方式。

5.Placeholder:占位符，这里可以输入一些文本，文本框的内容为空时，Placeholder的内容会以灰色文本显示在文本框中。

6.Background和Disabled:仅在需要定制文本框的外观时使用，多数情况下不建议使用。

7.Border Style:用于改变文本框边框的绘制方式。

8.Clear Button:这里可以设置何时出现清除按钮（clear button）。清除按钮是出现在文本框最右边的一个小X型按钮。

9.Min Font Size:设置文本框在显示文本时可以使用的最小字号，Adjust to Fit复选框可以指定显示文本是否应随文本框尺寸的变化而变化。

10.Capitalization:设置为Words时,可以保证每个输入的单词都会自动转换为首字母大写。

11.Keyboard:设置输入框输入时的键盘模式

12:Return Key: return键是键盘右下方的一个键，它的标签会根据用户正在进行的操作变化而变化。

13.Secure：这个复选框用于是否在文本框中显示已经输入的字符。

设置视图文本框的属性：

Placeholder:Type in a number

并确保Clear When Editing Begins未选中。

在Keyboard弹出的菜单中，我们希望用户只输入数字，而不是字母，因此选中Number Pad。

下面选中Opaque,而Clear Craphics Context和Clip Subviews都不需要选中。

1.5创建并关联输出接口

打开辅助编辑器，按下control键拖动鼠标，将nameField和numberField字段与输出接口关联起来：

2关闭键盘

运行应用，应用程序就会出现在iPhone模
4000
拟器中，

单击Name文本框就会弹出传统键盘，

单击Number文本框就会弹出纯数字键盘。



但怎么关闭键盘呢？

下面解决这个问题.

2.1输入完成后关闭键盘

iOS设备上的键盘是虚拟的，不是物理键盘，因些我们需要额外设置一下，来确保用户输入完成后关闭键盘。

用户按下键盘上的Done按钮时，会产生一个Did End On Exit事件，些时需要让文本框交出控制权，以关闭键盘。为了实现这个功能，需要在控制器类中添加一个操作方法。

在ViewController.h中添加如下操作方法：



在ViewController.m中实现该操作方法：



这里的第一响应者就是当前正在与用户进行交互的控件。在这个新方法中我们通知该控件放弃做为第一响应者的控制权，将其返还给用户之前操作的控件。

一个文本框失去了第一响应状态后，与之关联的键盘也就消失了。

保存刚才编辑的这两个文件，回到storyboard中，将这个操作方法与两个文本框关联起来。

在项目导航面板上选择Main.storyboard，单击Name文本框，按下option+command+6(或按下检查器面板上第6个按钮，如图)，使用Did End On Exit事件，因为这个事件会在用户按下文本键盘上的Done按钮时触发。

将Did End On Exit旁边的小圆点拖放视图控制器上的黄色图标上，这时会弹出一个菜单，从中可以看到刚刚添加的操作方法。单击这个操作方法textFieldDoneEditing:以选中它。

对两个文本框都实现这样的操作，保存修改，按command+R再次运行应用。



关联成功后，连接检查器面板上会出现：



运行结果：



这里的return就是Done键，（修改这个键名的位置，你应该猜的到的吧）按下return后，果然，键盘消失了，但Number时，我们发现没有Done键，然怎么取消键盘呢？

问题又来了，并非所有的键盘都有Done键的布局。怎么提高用户体验呢？

下面解决这个问题。

2.2通过触摸背景关闭键盘

大部分保存文本框的地方，点击视图中没有活跃的控件的任何地方键盘都会消失。我们如何实现些功能呢？

答案很简单。视图控制器都有一个View属性，是从UIViewController继承来的。这个view属性对应storyboard中的视图，其指向storyboard中的一个UIView实例，这个实例是用户界面中所有元素的容器。



使用界面构建器可以更改view所指向的对象所属的类，将它的底层类由UIView更改为UIControl。因为UIControl是UIView的子类，所以非常适用于将view属性连接到UIControl实例。

请记住，当一个类继承自另一个类时，子类其实是父类的一个更加具体的版本。所以UIControl是一个UIView。如果从UIView类创建实例更改为从UIControl类创建实例，就获得了触发操作方法的能力。



在此之前，需要创建在点击背景时需要调用的操作方法。



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

请注意，与之前同时在头文件和实现文件中添加操作方法不同，这次我们只将它放在了实现文件中。现在的Xcode已经足够智能了，即使跳过了多余的头文件声明也可以对界面和代码之间进行关联。不过假如我们要在其他类中也使用这个方法的话，仍然需要在头文件中声明这个方法。

保存文件，打开Main.storyboard。单击选中view，按option+command+3打开身份检查器，在这里可以更改任何对象实例的底层类。

名为Class字段目前的值是UIView（如果不是，是因为你没有选中视图view容器视图），现在将其改为UIControl,按下return提交修改。所有能够触发操作方法的控件都是UIControl的子类，所以通过更改底层类，这个视图就可以触发操作方法了。



按option+command+6调出关联检查器，把Touch Down事件拖到backgroundTop操作方法上



完成关联后：

2.3添加滑动条和标签

在界面上拖放上滑动条和标签，

滑动条在检查器中设置初始值，最小值为1，最大值为100，当前值是50。选中Update Events和Continuous复选框，这样可以确保滑动条的值改变时可以触发一系列连续的事件。

标签内容改为50。表示滑动条的当前值。

2.5创建并关联操作方法和输出接口

然后，为这两个控件关联输出接口和操作方法。我们需要一个指向该标签的输出接口，以便在滑动条滑动时能够更新标签的值，另外还需要一个操作方法，它将在滑动条位置发生变化时被调用。

使用辅助编辑器ViewController.m文件，然后按住control键从滑动条拖动到辅助编辑器@end声明上方的位置。弹出窗口出现后，将Connection弹出菜单改为Action,在name字段中键入sliderChanged.再把Type字段值设为UISlider,然后按return完成关联。

按住control键，从标签（显示文字50的那个）拖向辅助编辑器。这次，拖到顶端@interface和@end之间，最后一个属性的下方位置。弹出窗口后，在Name文本框中输入sliderLabel，然后按下return完成输出接口的创建和关联。

2.6实现操作方法

运行结果：

3实现开关、按钮和分段控件

拖出分段控件（segmented Control）和两个开关控件（switch）放入视图上：

3.2为两个开关创建并关联输出接口和操作方法

如之前，创建左右两个开关的输出接口：



创建操作方法，并同时关联两个按钮：



用户按任意一个开关都会调用这个方法。在该方法中，我们简单地获取sender参数的isOn属性值（sender代表被按下的那个开关），然后使用这个值来设置两个开关。此处的逻辑是设置一个开关值的会改变另一个开关的值，让它们始终保持同步。

3.3添加个性按钮

再拖和一个按钮，调节长度，盖在两个开关的上面：

3.4美化按钮

为按钮增加背景图，先在Images.xcassets中添加上要用的素材：whiteButton和blueButton.



然后设置Button控件的属性，将两种状态下的背景图片添加上去，如下图设置：





在Default默认状态下按钮背景图片设置为whiteButton。

在Highlighted高亮状态下按钮背景图片设置为blueButton。

4.1控件状态

每个iOS控件都有如下4种状态，任何时候都处于并仅能处于其中一种状态。

普通（Normal）:最常见的状态就是默认的普通状态。

高亮（Highlighted）:高亮状态是控件正被使用时的状态。对于按钮来说，这表示用户手指正在按钮上。

禁用（Disabled）:禁用状态是控件被关闭时的状态。要禁用控件，可以在界面构建器中取消选中Enable复选框，或者将控件的enabled属性设置为NO。

选中（Selected）:只有一部分控件支持选中状态。

某些iOS控件的属性可以根据控件的不同状态接受不同的值。

举例来说，可以为UIControlStateNormal状态指定一个图像，

为UIControlStateHighlighted状态指定另一个图像。

4.2为按钮创建并关联输出接口和操作方法

按住Control键，从新创建的按钮拖向辅助编辑器，拖至文件顶端最后一个输出接口下方位置：



还需要在启动时就把按钮标记为隐藏。之前没有这么做，因为这样会使关联输出接口和操作方法变得更加困难。而现在，既然已经关联好了，就可以隐藏这个按钮了。用户按下分段控件右边部分时，按钮将会显示。而应用刚启动时，按钮是隐藏的。

所以，按下option+command+4打开属性检查器，向下滚动到View的部分，选中Hidden复选框。

5实现分段控件的操作方法

6实现操作表单和警告视图

操作表单（action sheet）和警告视图（alert）都用于向用户提供反馈。

操作表单的作用是要求用户在两个以上选项之间作出选择。操作表单从屏幕底部出现，显示一系列按钮供用户选择。

警告视图以圆角矩形的形式出现在屏幕中央。

6.1遵从操作表单委托方法

委托模式是Cocoa Touch中一个非常通用的设计模式。操作表单和警告视图都使用了委托，所以它们知道在用户做出选择之后应该通知哪个对象。

在当前的应用程序中，需要在操作表单消失时获得通知。但是并不需要知道警告视图何时消失，因为这里只是使用它来通知用户某件事情，而不是要求用户作出选择。

为了让控制器充当操作表单的委托对象，控制器类需要遵从UIActionSheetDelegate协议。这可以通过在类声明部分的超类后面加上尖括号中添加协议名称来实现：

6.2显示操作表单

在buttonPressed:方法中创建并显示操作表单：



分析一下：

这个初始化方法接受多个参数：

第一个参数(initWithTitle)是要显示的标题。

第二个参数(delegate)是操作表单的委托对象。

第三个参数(cancelButtonTitle)是cancel按钮（取消按钮）的标题。

第四个参数(destructiveButtonTitle)是destructive按钮（可以理解为“是的，请继续”按钮）的标题。

第五个参数(otherButtonTitles)是用于指定任意数量的其他按钮，这些按钮也会显示在表单上。

创建完成之后，使用以下代码来显示它：

[actionSheet showInView:self.view];

操作表单始终有一个父视图，即当前对用户可见的视图。在这里，我们希望使用在界面构建器中设计的视图作为父视图，因此这里使用self.view。注意这里的点语法。self.view使用存取方法返回视图属性的值，等价于[self view]。

接下来在ViewControl.m中的buttonPressed:方法后面添加一个新方法：



最后运行程序。

小结

1.介绍了许多控件的用法，以及各种实现细节。

2.做了不少输出接口和操作方法的实践，并了解如何利用视图的层次性提供方便。

3.学习了如何使用操作表单和警告视图。

4.果断利用这些，不断修改代码进行尝试。