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人!

时间: 2024-10-13 00:56:40

iOS 9应用开发教程之使用代码添加按钮美化按钮的相关文章

iOS 9应用开发教程之编辑界面与编写代码

iOS 9应用开发教程之编辑界面与编写代码 编辑界面 在1.2.2小节中提到过编辑界面(Interface builder),编辑界面是用来设计用户界面的,单击打开Main.storyboard文件就打开了编辑界面.在Xcode 5.0以后中,编辑界面直接使用的是故事板.本小节将对编辑界面进行介绍 1.界面的构成 单击Main.storyboard打开编辑界面后,可以看到编辑界面会有4部分组成,如图1.23所示. 编号为1的部分为dock. 编号为2的部分为画布:用于设计用户界面的地方,在画布中

iOS 9应用开发教程之创建iOS 9项目与模拟器介绍

iOS 9应用开发教程之创建iOS 9项目与模拟器介绍 编写第一个iOS 9应用 本节将以一个iOS 9应用程序为例,为开发者讲解如何使用Xcode 7.0去创建项目,以及iOS模拟器的一些功能.编辑界面等内容. 创建iOS 9项目 一个iOS应用的所有文件都在一个Xcode项目下.项目可以帮助用户管理代码文件和资源文件.以下是使用Xcode创建项目的具体操作步骤 (1)打开Xcode,弹出Welcome to Xcode对话框,如图1.4所示. 图1.4  Welcome to Xcode对话

iOS 9应用开发教程之使用开关滑块控件以及滚动部署视图

iOS 9应用开发教程之使用开关滑块控件以及滚动部署视图 使用ios9中的开关.滑块控件 开关和滑块也是用于和用户进行交互的控件.本节将主要讲解这两种控件. ios9开关 开关控件常用来控制某个功能的开发状态,如蓝牙.GPS.WiFI信号等.如图2.29所示就是一个在WiFI中的开关.开关控件一般使用UISwitch来实现. 图2.29  开关 [示例2-10]以下将使用开发控件实现手电筒的功能.代码如下: import UIKit class ViewController: UIViewCon

iOS 9应用开发教程之显示编辑文本标签文本框

iOS 9应用开发教程之显示编辑文本标签文本框 ios9显示.编辑文本 在iOS,经常会看到一些文本的显示.文字就是这些不会说话的设备的嘴巴.通过这些文字,可以很清楚的指定这些设备要表达的信息.本节将主要讲解在iOS中,用来显示和编辑文本的三个视图:标签.文本框和文本视图. ios9只读文本——标签 标签视图是一个只读的文本视图,它用于在应用程序中为用户显示少量的信息,如图2.16所示.在此图中文字的显示使用的就是标签视图.标签视图一般使用UILabel类实现.   图2.16  美容相机 [示

iOS 9应用开发教程之多行读写文本ios9文本视图

iOS 9应用开发教程之多行读写文本ios9文本视图 多行读写文本--ios9文本视图 文本视图也是输入控件,与文本框不同的是,文本视图可以让用户输入多行,如图2.23所示.在此图中字符串"说点什么吧"这一区域就是使用文本视图实现的,用户可以在此区域中写大量的文本内容.一般文本框视图使用UITextView实现. 图2.23  写日志 [示例2-9]以下将使用文本视图实现QQ中写说说并发表的功能.具体的操作步骤如下: (1)创建一个Single View Application模板类型

iOS 9应用开发教程之定制应用程序图标以及真机测试

iOS 9应用开发教程之定制应用程序图标以及真机测试 定制ios9应用程序图标 在图1.12中可以看到应用程序的图标是网状白色图像,它是iOS模拟器上的应用程序默认的图标.这个图标是可以进行改变的.以下就来实现在iOS模拟器上将HelloWorld应用程序的图标进行更改. (1)添加图像logo.png到创建的项目中,添加图像的具体步骤如下.首先右击项目文件夹中的任意位置,弹出快捷菜单,如图1.39所示. 图1.39  快捷菜单 然后,选择Add Files to "HelloWorld&quo

Magento2开发教程 - 如何向数据库添加新表

Magento 2具有特殊的机制,允许你创建数据库表,修改现有的,甚至添加一些数据到他们(如安装数据,已被添加在模块安装). 这种机制允许这些变化可以在不同的设备之间传输. 关键的概念是,而不是做你能做的一次又一次重新安装系统时,手动SQL操作,开发人员创建一个安装(或升级)脚本包含数据. 每次安装模块时,脚本将被执行. Magento 2有四种类型的脚本:installschema,installdata,upgradeschema和upgradedata. 安装脚本只执行一次,而升级脚本每次

Swift开发教程--如何给UITextView添加圆角边框

直接上代码: self.textView.layer.borderColor = UIColor(red: 60/255, green: 40/255, blue: 129/255, alpha: 1).CGColor; self.textView.layer.borderWidth = 2; self.textView.layer.cornerRadius = 16; 版权声明:本文为博主原创文章,未经博主允许不得转载.

我的长大app开发教程第二弹:完成ContentFragment底部按钮

在开始之前,先上一张效果图 突然发现有点知乎的味道...的确..知乎灰#989898,知乎蓝15,136,235(逃.... 1.学P图 想我大一的时候也用过不少Adobe的软件,昨天重新打开我的Photoshop,电脑提示缺少什么.dll文件,最后弄了一上午,是因为vc2012的运行库出了问题,最后发现一个软件特别好用:DirectX Repair,可以完美解决.dll丢失的问题. UI素材我是在google的icons素材库下载的https://github.com/google/mater