庖丁UIKit之UIButton

App中最常见的也是基本少不了的交互,就是按钮了。UIKit通过UIButton来提供按钮服务。
UIButton的基本结构如图:

button_sturcture

包含一个图标UIImage,一个标题UILabel。

UIButton继承自UIControl,而UIControl又继承自UIView,所以UIButton本质上是一个UIView,可以认为是一个容器View。

所以在IB里面,UIButton有“Image” 和“Background”两个属性可以设置,并且都可以设置图片,其中这个“Image”其实只是按钮的一部分,还可以追加一段标题。如图中:

a_button

背景设置成蓝色,一个图标以及一个标题“Pause”。

0. 各种各样的按钮

为了方便使用,UIKit提供的五中固定结构的按钮类,由UIButtonType枚举来表示:

  • case system : 最常用的,标题和图片都可以自由设置,并且按下的时候会变暗,产生闪烁的点击效果
  • case detailDisclosure :
    info_button

    外形固定,是一个感叹号,用于表示点击后有说明信息的情况。

  • case infoLight :和“detailDisclosure”但是点击时会亮色闪烁,背景变大,特别醒目
  • case infoDark : 和“detailDisclosure”但是点击时会暗色闪烁,背景变大,特别醒目
  • case contactAdd :
    add_button

    外形固定,是一个➕号,用于表示添加的意思

除了上面五种,还有一种case custom表示完全自定义,用户根据上面介绍的UIButton的结构,自行组织按钮的外形和效果。

Apple的UI设计规范描述了哪些场景下推荐用系统自定义的按钮。

1. 使用步骤

step1:选择一个类型类创建一个按钮

    let codeBtn:UIButton = UIButton(type:.system)

UIButton的构造函数需要指定其类型

step2: 设置按钮的背景图片或者标题,并设置好大小

    func setTitle(_ title: String?, for state: UIControlState)
    func setImage(_ image: UIImage?, for state: UIControlState)

通过调用setTitlesetImage设置标题和图片。每个UIButton都有好几个状态UIControlState。参见下面的状态介绍

当然还有其他几个选项,但是基本用不上,这里也没有必要理出来。

step3: 为按钮添加触发执行的动作

codeBtn.addTarget(self, action: #selector(onCodeBtnClicked(sender:)), for:.touchDown)

@IBAction func onCodeBtnClicked(sender: UIButton)  {
    
}

这里定义了一个@IBAction的Action方法,然后调用UIButton的func addTarget(_ target: Any?, action: Selector, for controlEvents: UIControlEvents) 添加按钮在对应状态下的触发动作。

step4: 调整按钮在UI中的位置

UIButton的本质是一个UIView,所以通过设置其Frame就可以设置设置按钮的大小和位置。当然作为后现代化iOS UI,肯定不应该用frame来做布局,通过设置UIView的autolayout规则,来对UIButton进行大小和位置布局才是最佳选择。

step5: 提供辅助信息和国际化的文字或者图片

对于UIButton的标题和图片,根据系统获得的localizations来进行设置。当然最简单的就是把Plist里面的location配置成对应的位置,比如“zh-CN”,这样默认的按钮显示就是中文了。

2.为按钮添加触发动作

UIButton继承自UIControl,所以他也继承了UIControl的事件触发功能,而UIButton通常是不可以编辑的,所以主要是触碰事件。触碰事件的定义可以参考Apple的官方手册Target-Action

上面介绍了用func addTarget(_ target: Any?, action: Selector, for controlEvents: UIControlEvents)来为按钮添加特定状态时所发生的动作。这里target表示的是action所属的对象,也就是要触发那个对象的那个方法。而Selector是一个方法回调。其可以为:

@IBAction func doSomething()
@IBAction func doSomething(sender: UIButton)
@IBAction func doSomething(sender: UIButton, forEvent event: UIEvent)

三种形式,@IBAction的修饰,使得其可以被连接到IB的上。sender: UIButton表示是哪个按钮被触发了,这样在函数总通过判断谁触发的,就可以为多个按钮绑定同一个“IBAction”了。最后forEvent event: UIEvent提供了颗粒度控制,判断当前是什么事件被触发了,是否需要相应。

当然,Swift中的Selector和OC中的不同,用“#”大头,后面接函数原型,比如:

#selector(onCodeBtnClicked(sender:))

UIButton定义了几种常见的事件,而不用通过“UITapGestureRecognizer”来实现:

事件 事件名 意义
单击 touchDown 一般表示单击,当然多次按,也会被触发
双击 touchDownRepeat 一般表示双击,当然多余两次的连续按也会触发,通过tapCount可以判断按了几次

当然UIControl还定义了其他一些触摸事件比如
touchDragInside、
touchDragOutside、
touchDragOutside、
touchDragExit、
touchUpInside、
touchUpOutside、
touchCancel但是对按钮基本上都用不上。

3. 设置按钮的状态属性

同样因为UIButton继承自UIControl,所以其有个UIControlState属性表示当前所处的状态,UIControlState定义了很多个状态,但是UIButton通常只用到如下几个状态。

状态 意义
normal 没有被触发的情况下
highlighted 按钮被按下,但是没有抬起的状态
disabled 按钮不可用的状态
selected 选中状态,比如默认选项

所以只要对其进行背景或者标题文字的设置就可以了。最常见的就是,当按钮被按下的时候,设置其背景图片为暗色,这样营造出一种按下时闪烁的效果。这个效果系统自带的五中按钮都自动实现了,如果是自己自定义的按钮则要自己去实现。

4. 总结

UIButton表示的按钮分成五大类加上一类自定义,一般情况下使用.System即可,需要特殊效果时,可以使用.Custom进行自定义,按照Apple的UI设计规则,部分场合最好还是用系统提供的五大类型按钮。为按钮添加的点击动作可以按照不同的点击事件进行区别,并可以设置按钮在对应状态下的外观表现。

参考

UIButton API Reference
Cocoa Application Competencies for iOS

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 202,905评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,140评论 2 379
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 149,791评论 0 335
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,483评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,476评论 5 364
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,516评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,905评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,560评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,778评论 1 296
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,557评论 2 319
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,635评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,338评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,925评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,898评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,142评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,818评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,347评论 2 342

推荐阅读更多精彩内容

  • 好奇触摸事件是如何从屏幕转移到APP内的?困惑于Cell怎么突然不能点击了?纠结于如何实现这个奇葩响应需求?亦或是...
    Lotheve阅读 56,558评论 51 597
  • 一个UIButton的实例变量, 使一个按钮(button)在触摸屏上生效。一个按钮监听触摸事件,当被点击时,给目...
    wushuputi阅读 1,479评论 0 1
  • 在iOS开发中经常会涉及到触摸事件。本想自己总结一下,但是遇到了这篇文章,感觉总结的已经很到位,特此转载。作者:L...
    WQ_UESTC阅读 5,987评论 4 26
  • 对象继承关系 UIButton 类本身定义继承 UIControl ,描述了在 iOS 上所有用户界面控件的常见基...
    独木舟的木阅读 3,717评论 0 3
  • 我 路过了 一堵 斑驳的墙 光线很暗 我使劲 睁大眼 睁大眼 我睁大眼 看到了 远处 午后的 阳光 . LY.20...
    米谷吧奴古吧都来吧阅读 195评论 0 1