Swift—UIButton的基本用法

UIButton在我们的开发过程中是随处可见的,那么本人就其基本属性和用法进行了总结,具体如下:
UIButton继承自UIControl,所以UIControl的一些属性和方法对于UIButton来说适用。

1、按钮的创建#####
let btn: UIButton = UIButton()//没有样式
//let btns:UIButton =UIButton(type: UIButtonType)//有样式
//let button = UIButton(frame:CGRect(x:10, y:150, width:100, height:30))//简化创建方式
self.view.addSubview(button)

UIButtonType有以下类型

public enum UIButtonType : Int {
    case custom // no button type
    @available(iOS 7.0, *)
    case system // standard system button
    case detailDisclosure
    case infoLight
    case infoDark
    case contactAdd
    public static var roundedRect: UIButtonType { get } // Deprecated, use UIButtonTypeSystem instead
}
//使用
let  btn: UIButton = UIButton(type: .Custom)
2、UIButton设置字内容和颜色#####

UIButton所对应的状态有几种

 /**
     Normal          (默认状态)
     Highlighted    (高亮状态)点击按钮不放
     Disabled       (使能状态)就是是否可用状态-->禁用的状态才会显现
     Selected       (选中状态)通过selected属性设置
 */
//显示文字
button1.setTitle("普通状态", for: .normal)
button1.setTitle("高粱状态", for: .highlighted)
button1.setTitle("禁用状态", for: .disabled)
//显示文字颜色
button1.setTitleColor(UIColor.red, for: .normal)
button1.setTitleColor(UIColor.blue, for: .highlighted)
button1.setTitleColor(UIColor.cyan, for: .selected)
button1.setTitleColor(UIColor.cyan, for: .disabled)
//阴影文字颜色设置
button1.setTitleShadowColor(UIColor.cyan, for: .normal)
button1.setTitleShadowColor(UIColor.green, for: .highlighted)
button1.setTitleShadowColor(UIColor.brown, for: .disabled)
button1.setTitleShadowColor(UIColor.darkGray, for: .selected)
3、UIButton设置背景颜色和背景图片#####
//背景颜色
button2.backgroundColor = UIColor.orange
//背景图片    button4.setBackgroundImage(UIImage(named:"XXX"), for: .normal)
4、UIButton设置字体大小#####
 button.titleLabel?.font = UIFont.systemFont(ofSize: 12)
5、禁用UIButton#####
button.isEnabled = false
button.isEnabled = true
6、设置圆角#####
button.layer.cornerRadius = 5
button.layer.masksToBounds = true
7、设置边框宽度/颜色#####
button.layer.borderWidth = 2
button.layer.borderColor = UIColor.red.cgColor
8、设置背景图片为圆角#####
buttonImage.setImage(UIImage(named:"1") , forState: UIControlState.Normal)
//设置背景图片为圆角
buttonImage.imageView?.layer.cornerRadius = 50

默认情况下按钮会被渲染成单一颜色;系统蓝
button.setImage(UIImage(named:"icon1"),forState:.Normal)  //设置图标
button.adjustsImageWhenHighlighted=false //使触摸模式下按钮也不会变暗(半透明)
button.adjustsImageWhenDisabled=false //使禁用模式下按钮也不会变暗(半透明)

也可以设置成保留图标原来的颜色
let iconImage = UIImage(named:"icon2")?.withRenderingMode(.alwaysOriginal)
button.setImage(iconImage, for:.normal)  //设置图标
button.adjustsImageWhenHighlighted = false //使触摸模式下按钮也不会变暗(半透明)
button.adjustsImageWhenDisabled = false //使禁用模式下按钮也不会变暗(半透明)
9、UIButton上图片和文字调整#####

UIButton上添加图片和文字,有时需要我们调整
方向为逆时针方向,上、左、下、右依次去设置的

btn.imageEdgeInsets =UIEdgeInsetsMake(top: CGFloat, left: CGFloat, bottom: CGFloat, right: CGFloat)

btn.titleEdgeInsets =UIEdgeInsetsMake(top: CGFloat, left: CGFloat, bottom: CGFloat, right: CGFloat)

实例如下:

//创建一个图片一个文字的按钮  
let btn2: UIButton = UIButton(type: .Custom)  
btn2.frame = CGRectMake(50, 100, 120, 35)  
btn2.setImage(UIImage(named: "1"), forState: .Normal)  
btn2.backgroundColor = UIColor.blackColor()  
btn2.titleLabel?.font = UIFont.systemFontOfSize(20)  
btn2.imageView?.contentMode = UIViewContentMode.ScaleAspectFit  
btn2.setTitle("图片按钮", forState: .Normal)  
//偏移量,分别为上下左右  
btn2.imageEdgeInsets = UIEdgeInsetsMake(0, -50, 0, 0)  
btn2.titleEdgeInsets = UIEdgeInsetsMake(0, -80, 0, 5)  
btn2.setTitleColor(UIColor.whiteColor(), forState: .Normal)  
btn2.adjustsImageWhenHighlighted = false  
self.view.addSubview(btn2) 
10、添加按钮的点击事件#####

按钮的触摸时间有以下类型

touchDown:单点触摸按下事件,点触屏幕
touchDownRepeat:多点触摸按下事件,点触计数大于1,按下第2、3或第4根手指的时候
touchDragInside:触摸在控件内拖动时
touchDragOutside:触摸在控件外拖动时
touchDragEnter:触摸从控件之外拖动到内部时
touchDragExit:触摸从控件内部拖动到外部时
touchUpInside:在控件之内触摸并抬起事件
touchUpOutside:在控件之外触摸抬起事件
touchCancel:触摸取消事件,即一次触摸因为放上太多手指而被取消,或者电话打断
button1.addTarget(self,action:#selector(methodName), for: .touchUpInside)
button1.addTarget(self, action:#selector(someMethod(button:)), for:.touchUpInside)
//上
    func methodName() {
        print("tapped")
    }

//下
    func someMethod(button:UIButton) {
        print("你是谁啊,其实就是一个按钮")
    }
11、按钮文字过长时候的显示处理#####

我们创建一个按钮

let button = UIButton(frame:CGRect(x:20, y:50, width:130, height:50))
button.setTitle("这个是一长长长长长长长长长长的文字", for:.normal) //普通状态下的文字
button.setTitleColor(UIColor.white, for: .normal) //普通状态下文字的颜色
button.titleLabel?.lineBreakMode = .byTruncatingTail
button.backgroundColor = UIColor.orange
self.view.addSubview(button)
运行效果

我们通过修改 button 按钮中 titleLabel 的 lineBreakMode 属性,便可以调整按钮在文字超长的情况下如何显示,以及是否换行。
其有以下几种样式可供选择,API的介绍也是简单明了

public enum NSLineBreakMode : Int {
    
    case byWordWrapping // Wrap at word boundaries, default

    case byCharWrapping // Wrap at character boundaries

    case byClipping // Simply clip

    case byTruncatingHead // Truncate at head of line: "...wxyz"

    case byTruncatingTail // Truncate at tail of line: "abcd..."

    case byTruncatingMiddle // Truncate middle of line:  "ab...yz"
}

2019年12月18日补充以下:

UIButton的图片文字布局

我们创建一个按钮且其同时拥有文字和图片属性,会按照系统的默认样式(左图片,右文字)显示。但是有的时候,我们会遇到其他的设计需求,比如:左文字有图片、上文字下图片、上图片下文字等。这个时候就需要我们自定义按钮的显示样式来满足复杂多变的设计需求了。
我自定义了一个按钮的extension来满足以上的功能,代码如下:

import Foundation
import UIKit

enum ButtonLayout {
    case leftImage
    case rightImage
    case topImage
    case bottomImage
}

extension UIButton {
    
    func setLayoutType(type: ButtonLayout){
        let image: UIImage? = self.imageView?.image
        switch type {
        case .leftImage:
            print("系统默认的方式")
        case .rightImage:
            self.imageEdgeInsets = UIEdgeInsets(top:0, left: (self.titleLabel?.frame.size.width)!, bottom: 0, right:-(self.titleLabel?.frame.size.width)!)
            self.titleEdgeInsets = UIEdgeInsets(top: 0, left: -(image?.size.width)!, bottom: 0, right: (image?.size.width)!)
        case .topImage:
            self.imageEdgeInsets = UIEdgeInsets(top:-(self.titleLabel?.frame.size.height)!, left: 0, bottom: 0, right:-((self.titleLabel?.frame.size.width)!))
            //图片距离右边框距离减少图片的宽度,距离上m边距的距离减少文字的高度
            self.titleEdgeInsets = UIEdgeInsets(top: ((image?.size.height)!), left: -((image?.size.width)!), bottom: 0, right:0)
        //文字距离上边框的距离增加imageView的高度,距离左边框减少imageView的宽度,距离下边框和右边框距离不变
        default:
            self.imageEdgeInsets = UIEdgeInsets(top: (self.titleLabel?.frame.size.height)!, left:0, bottom: 0, right:-((self.titleLabel?.frame.size.width)!))
            //图片距离上边距增加文字的高度  距离右边距减少文字的宽度
            self.titleEdgeInsets = UIEdgeInsets(top: -(image?.size.height)!, left: -(image?.size.width)!, bottom: 0, right: 0)
        }
    }
}

如果有更进一步的需求,比如设置文字和图片的间距等,可以在此基础之上添加响应的参数配置即可。

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

推荐阅读更多精彩内容

  • 对象继承关系 UIButton 类本身定义继承 UIControl ,描述了在 iOS 上所有用户界面控件的常见基...
    独木舟的木阅读 3,658评论 0 3
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 11,612评论 4 59
  • XCode中有LaunchScreen.storyboard或者LaunchScreen.xib,苹果默认使用的就...
    打不死的小怪兽阅读 2,319评论 7 3
  • 我听见雨击大地愤怒的嘶吼 我看到檐下坠落参差的水珠 风吹散檐上升起的白雾 雷声震怒间,干渴落下帷幕
    兹心非心阅读 252评论 0 1
  • 【原创】文/紫陌 盛夏,刚刚下过一场雷雨。此刻,骤雨初歇,风平浪静。夏墨在日记里写道: “今天,我和男朋友又吵架了...
    倾城之语阅读 1,289评论 1 3