iOS 9应用开发教程之使用代码添加按钮美化按钮

iOS 9应用开发教程之使用代码添加按钮美化按钮

丰富的用户界面

在iOS9中提供了很多的控件以及视图来丰富用户界面，对于这些视图以及控件我们在上一章中做了简单的介绍。本章我们将详细讲解这些视图。

ios9中使用按钮接收用户输入

按钮是iOS应用中最常使用也是最简单的控件，它常用来响应用户的点击事件，如图2.1所示。在图2.1中，蓝色的矩形就是一个按钮，它的标题为“登录”。在iOS 7以后按钮只是一块普通的文本，没有轮廓，边框，背景颜色，或其他装饰功能（为了美观，很多的应用程序中的按钮还是有背景的，就像图2.1中的按钮）。一般使用UIButton类来实现按钮。本节将主要讲解按钮的添加、美化按钮以及如何实现按钮的响应等内容。

 

图2.1  QQ登录界面

ios9中使用代码添加按钮

由于使用编辑界面添加视图的方式比较简单，所以不在介绍。这里，直接讲解代码中如何添加。使用代码为主视图添加一个按钮的方式和在1.3.3节中讲解的步骤是一样的。首先需要使用UIButton类实例化一个按钮对象，然后是设置位置和大小，最后是使用addSubview()方法将按钮对象添加到主视图中。（由于视图的添加方式都一样，后面将省略使用代码添加视图这块内容。）。

【示例2-1】以下将为主视图添加一个背景颜色为橘黄色的按钮对象。代码如下：

• import UIKit
• class ViewController: UIViewController {
• override func viewDidLoad() {
• super.viewDidLoad()
• // Do any additional setup after loading the view, typically from a nib.
• //添加按钮对象
•  let button=UIButton(frame: CGRectMake(143, 241, 88, 30))
•         button.backgroundColor=UIColor.orangeColor()
•         self.view.addSubview(button)
• }
• ……
• }

此时运行程序，会看到如图2.2所示的效果。

 

图2.2  运行效果

注意：在图2.2中所显示的橘黄色区域其实就是添加的按钮。

IOS9中美化按钮

美化按钮说白了就是对按钮的属性进行设置，设置按钮的属性有两种方法：一种是使用编辑界面中的属性检查器；另一种是使用代码进行设置。以下将主要讲解如何使用代码对按钮进行设置。

1.设置按钮的外观

设置按钮的外观其实就是对按钮的标题、图像等进行的设置。表2-1列出了常用的一些设置按钮外观的属性。

表2-1  常用属性

 

【示例2-2】下面将在主视图中添加一个按钮。此按钮的标题为I am button，标题的颜色为黑色。代码如下：

• import UIKit
• class ViewController: UIViewController {
• override func viewDidLoad() {
• super.viewDidLoad()
• // Do any additional setup after loading the view, typically from a nib.
• //添加按钮对象
• let button=UIButton(frame: CGRectMake(135, 241, 97, 30))
•  button.setTitle("I am Button", forState: UIControlState.Normal)                                  //设置标题
•         button.setTitleColor (UIColor.blackColor(), forState: UIControlState.Normal)          //设置标题颜色
• self.view.addSubview(button)
• }
• ……
• }

此时运行程序，会看到如图2.3所示的效果。

2.设置按钮的状态

在示例2-2中，设置按钮的标题和颜色时，需要对按钮的状态进行设置，表示按钮在某一状态下的标题和标题颜色是什么样子。例如，UIControlState.Normal就表示按钮的一种状态。对于像按钮的这类视图，即可以接受用户输入的视图也被称为控件。这些控件都有自己的状态。表2-2就为开发者详细介绍了控件的状态。

表2-2  控件的状态

 

3.设置按钮的类型

按钮的形式是多种多样的。例如，在通讯录中，添加新联系人的按钮是一个加号；查看来电的详细信息时是一个感叹号等。这些按钮的实现，可以在实例化按钮对象时使用UIButtonType来实现。UIButtonType中的内容如表2-3所示。

表2-3  UIButtonType的内容

 

【示例2-3】以下将在主视图中添加两个不同风格的按钮。代码如下：

• import UIKit
• class ViewController: UIViewController {
• override func viewDidLoad() {
• super.viewDidLoad()
• // Do any additional setup after loading the view, typically from a nib.
• //添加按钮对象
• let button1=UIButton(type: UIButtonType.ContactAdd)
• button1.center=CGPointMake(190, 250)
• self.view.addSubview(button1)
• //添加按钮对象
• let button2=UIButton(type: UIButtonType.DetailDisclosure)
• button2.center=CGPointMake(190, 450)
• self.view.addSubview(button2)
• }
• ……
• }

此时运行程序，会看到如图2.4所示的效果。

 

图2.3  运行效果                      图2.4  运行效果

ios9中实现按钮的响应

按钮主要是实现用户交互的，即实现响应。按钮实现响应的方式可以根据添加按钮的不同分为两种：一种是编辑界面添加按钮实现的响应；另一种是使用代码添加按钮实现的响应。

1.编辑界面添加按钮实现的响应

使用编辑界面添加按钮可以使用拖动的方式来实现按钮的响应，它也是最简单的一种实现响应的方式。

【示例2-4】以下将实现轻拍按钮，改变主视图背景颜色的功能。具体的操作步骤如下：

（1）创建一个Single View Application模板类型的项目，命名为UIButton-response。

（2）打开Main.storyboard文件，将主视图的尺寸设置为iPhone 4.7-inch。从视图库中拖动按钮控件到主视图中，将Title设置为Tap me,Change View Color。

（3）使用设置编辑器的三个视图方式的图标，将Xcode的界面调整为如图2.5所示的效果。这一过程在前面的章节中讲解过。

 

图2.5  调整Xcode的界面

（4）按住Ctrl键拖动界面中的按钮对象，这时会出现一个蓝色的线条，将这个蓝色的线条拖动到ViewController.swift文件的空白处中，如图2.6所示。

 

图2.6  按住Ctrl键拖动界面中的按钮对象

（5）松开鼠标后，会弹出声明关联插座变量一起进行的对话框（在前面章节中讲解过），如图2.7所示。

 

图2.7  弹出声明关联插座变量一起进行的对话框

（6）将Connection选项设置为Action，表示关联的是一个动作；将Name设置为tapButton，表示关联的动作名为tapButton，如图2.8所示。

 

图2.8  填写对话框

注意：这里的Name可以是任意的。

（7）单击Connect按钮，会在ViewController.swift文件中看到如图2.9所示的代码。

 

图2.9  动作

此时，当用户轻拍按钮后，一个叫tapButton()的方法就会被触发。

注意：以上这一种方式是动作声明和关联一起进行的，还有一种先声明动作后关联的方式。声明动作可以使用关键字IBAction。该关键字可以告诉故事面板的界面，此方法是一个操作，且可以被某个控件触发。声明动作的语法形式如下：

• @IBAction func 动作名(参数:参数类型){
• }

如图2.10所示，就是在ViewController.swift文件中编写的动作的声明代码。

 

图2.10  声明的动作

注意：在声明动作后，会在代码的前面出现一个空心的小圆圈，它表示此动作还未进行关联。

声明好动作后，就可以进行关联了，首先使用调整窗口中的工具，将Xcode的界面进行调整。将其调整为和图2.5一样的效果。

然后，按住Ctrl键拖动界面中的按钮对象，这时会出现一个蓝色的线条，将这个蓝色的线条和文件ViewController.swift中的动作进行关联，如图2.11所示。

 

图2.11  关联动作

最后，松开鼠标后，按钮对象就与动作成功的关联在一起了，此时动作前面的空心小圆圈就变为了实心的小圆圈，它表示此动作已被关联，效果和图2.9一样。

（8）打开ViewController.swift文件，编写代码，此代码将实现按钮的响应。代码如下：

• import UIKit
• class ViewController: UIViewController {
• var isYellow:Bool=false
• @IBAction func tapButton(sender: AnyObject) {
• //判断主视图的背景是否为黄色
•         if(isYellow){
•             self.view.backgroundColor=UIColor.whiteColor()                                 //设置主视图的背景颜色
•             isYellow=false
•         }else{
•             self.view.backgroundColor=UIColor.yellowColor()
•             isYellow=true
•         }
• }
• ……
• }

此时运行程序，首先会看到如图2.12的效果。当轻拍Tap me,Change View Color按钮后，主视图的背景变为黄色，如图2.13所示。当再一次轻拍Tap me,Change View Color按钮，主视图的背景颜色将会变回原来的白色。

 

图2.12  运行效果                              图2.13  运行效果

2.使用代码添加按钮实现的响应

使用代码添加的按钮，实现响应需要使用到addTarget(_:action:forControlEvents:)方法，其语法形式如下：

• func addTarget(_ target: AnyObject?,
• action action: Selector,
• forControlEvents controlEvents: UIControlEvents)

其中，参数说明如下：

• target：表示目标对象。它是动作消息的发送方。
• action：表示选择器，用来识别动作消息。它不可以为空。
• controlEvents：表示控件事件。在iOS中有19种控件事件，如表2-4所示。

表2-4  控件事件

 

【示例2-5】以下将实现轻拍按钮，改变主视图背景颜色的功能。代码如下：

• import UIKit
• class ViewController: UIViewController {
• var isCyan:Bool=false
• override func viewDidLoad() {
• super.viewDidLoad()
• // Do any additional setup after loading the view, typically from a nib.
• //添加按钮对象
• let button=UIButton(frame: CGRectMake(90, 545, 225, 30))
• button.setTitle("Tap me,Change View Color", forState: UIControlState.Normal)  //设置按钮的标题
• button.setTitleColor (UIColor.blackColor(), forState: UIControlState.Normal)   //设置按钮标题的颜色
• self.view.addSubview(button)
• //实现按钮的响应
•  button.addTarget(self, action: "tapbutton", forControlEvents: UIControlEvents.TouchUpInside)
• }
• func tapbutton(){
• //判断主视图的背景颜色是否为青色
•         if(isCyan){
•             self.view.backgroundColor=UIColor.whiteColor()
•             isCyan=false
•         }else{
•             self.view.backgroundColor=UIColor.cyanColor()
•             isCyan=true
•         }
•     }
• ……
• }

此时运行程序，首先会看到如图2.14的效果。当轻拍Tap me,Change View Color按钮后，主视图的背景变为青色，如图2.15所示。当再一次轻拍Tap me,Change View Color按钮，主视图的背景颜色将会变回原来的白色。

 

图2.14  运行效果                                 图2.15  运行效果

本文选自：iOS 9应用开发基础教程大学霸内部资料，转载请注明出处，尊重技术尊重IT人！