- UIButton是iOS UI中最簡(jiǎn)單的一個(gè)控件了。
- 這里給出5類示例。如下圖。
1.button 類型
2.button 屬性及方法（詳見(jiàn)代碼）
3.xib 實(shí)現(xiàn)圖片、標(biāo)題一體
4.純代碼實(shí)現(xiàn)圖片、標(biāo)題一體
5.button 按標(biāo)題長(zhǎng)度設(shè)置大小且可選返回示例
- 1、能夠定義的button類型有以下6種，但是現(xiàn)在已經(jīng)沒(méi)有這么多形態(tài)了，因?yàn)樘O果UI全部換成扁平化，現(xiàn)在只剩下四種形態(tài)：系統(tǒng)的，自定義的，加號(hào)，嘆號(hào),最后那種圓角可以畫的。
typedef enum {
UIButtonTypeCustom = 0, //自定義風(fēng)格
UIButtonTypeRoundedRect, //圓角矩形
UIButtonTypeDetailDisclosure, //藍(lán)色小箭頭按鈕，主要做詳細(xì)說(shuō)明用
UIButtonTypeInfoLight,// 亮色感嘆號(hào)
UIButtonTypeInfoDark, //暗色感嘆號(hào)
UIButtonTypeContactAdd,// 十字加號(hào)按鈕
} UIButtonType;
- 2、button屬性及方法（詳見(jiàn)代碼）
//btn 類型
UIButton *btn = [UIButton buttonWithType:UIButtonTypeCustom];
//btn frame
btn.frame = CGRectMake(0, 0, 100, 50);
btn.center = self.view.center;
//背景色
btn.backgroundColor = [UIColor cyanColor];
//設(shè)置button 的填充圖片
[btn setImage:[UIImage imageNamed:@"share_qq"] forState:UIControlStateNormal];
//選中狀態(tài)下的圖片
[btn setImage:[UIImage imageNamed:@"share_pengyouquan"] forState:UIControlStateSelected];
//背靜圖片
[btn setBackgroundImage:[UIImage imageNamed:@"share_weixin"] forState:UIControlStateNormal];
//設(shè)置tag值
btn.tag = 12345;
//添加事件
[btn addTarget:self action:@selector(btnClick:) forControlEvents:UIControlEventTouchUpInside];
//加載到view上
[self.view addSubview:btn];
//取消按鈕已經(jīng)添加的所有事件:(這個(gè)比較重要,若添加了兩個(gè)事件 兩個(gè)事件都會(huì)被觸發(fā))
[btn removeTarget:nil action:nil forControlEvents:UIControlEventTouchUpInside];
- 3、xib 實(shí)現(xiàn)圖片、標(biāo)題一體
一個(gè)button 有圖片有標(biāo)題的時(shí)候我們應(yīng)該怎么來(lái)合理的安排它們?cè)赽utton 中的位置呢？
3.1 在UIButton中有三個(gè)對(duì)EdgeInsets的設(shè)置：ContentEdgeInsets、titleEdgeInsets、imageEdgeInsets
UIEdgeInsetsMake
里面的四個(gè)參數(shù)表示距離上邊界、左邊界、下邊界、右邊界的距離，默認(rèn)都為零，title／image在button的正中央
UIKIT_STATIC_INLINE UIEdgeInsets UIEdgeInsetsMake(CGFloat top, CGFloat left, CGFloat bottom, CGFloat right) {
UIEdgeInsets insets = {top, left, bottom, right};
return insets;
}
設(shè)置imageEdgeInsets 是圖片相對(duì)于button的位置
設(shè)置titleEdgeInsets是標(biāo)題相對(duì)于button的位置
設(shè)置ContentEdgeInsets是圖片和標(biāo)題一起變化
方法
如果是xib設(shè)置的話，看到一個(gè)button控件上放了一張?zhí)畛鋱D片和一個(gè)標(biāo)題，然后右側(cè)的工具欄看到 Edge這一欄，可選的有Image,Title,Content,下面有Inset欄我們一般選擇Title和Image調(diào)整即可。如圖可以隨便得到你想要的效果。
4.純代碼實(shí)現(xiàn)圖片、標(biāo)題一體
示例代碼：
- (void)setUI {
//第一種
UIButton *btn = [UIButton buttonWithType:UIButtonTypeCustom];
btn.frame = CGRectMake(0, 0, 48, 70);
btn.center = CGPointMake(self.view.frame.size.width/2, 200);
btn.backgroundColor = [UIColor orangeColor];
//1.給 btn 添加圖片
[btn setImage:[UIImage imageNamed:@"share_mesage"] forState:UIControlStateNormal];
//2.設(shè)置image 在 btn 上的位置(上，左，下，右)
btn.imageEdgeInsets = UIEdgeInsetsMake(-15, 0, 0, 0);
//3.添加標(biāo)題
[btn setTitle:@"短信" forState:UIControlStateNormal];
btn.titleLabel.font = [UIFont systemFontOfSize:12];
[btn setTitleColor:[UIColor blueColor] forState:UIControlStateNormal];
[btn setTitleColor:[UIColor redColor] forState:UIControlStateSelected];
//4.設(shè)置 title 在 btn 上的位置
btn.titleEdgeInsets = UIEdgeInsetsMake(60, -48, 5, 0);
btn.tag = 10001;
[btn addTarget:self action:@selector(btnClick:) forControlEvents:UIControlEventTouchUpInside];
//第二種
UIButton *btn1 = [UIButton buttonWithType:UIButtonTypeCustom];
btn1.frame = CGRectMake(0, 0, 48, 70);
btn1.center = CGPointMake(self.view.frame.size.width/2, 300);
btn1.backgroundColor = [UIColor orangeColor];
//1.給 btn 添加圖片
[btn1 setImage:[UIImage imageNamed:@"share_mesage"] forState:UIControlStateNormal];
//2.設(shè)置image 在 btn 上的位置(上，左，下，右)
btn1.imageEdgeInsets = UIEdgeInsetsMake(20, 0, 0, 0);
//3.添加標(biāo)題
[btn1 setTitle:@"短信" forState:UIControlStateNormal];
btn1.titleLabel.font = [UIFont systemFontOfSize:12];
[btn1 setTitleColor:[UIColor blueColor] forState:UIControlStateNormal];
[btn1 setTitleColor:[UIColor redColor] forState:UIControlStateSelected];
//4.設(shè)置 title 在 btn 上的位置
btn1.titleEdgeInsets = UIEdgeInsetsMake(-50, -48, 0, 0);
btn1.tag = 10002;
[btn1 addTarget:self action:@selector(btnClick:) forControlEvents:UIControlEventTouchUpInside];
[self.view addSubview:btn];
[self.view addSubview:btn1];
}
效果圖：
5.button 按標(biāo)題長(zhǎng)度設(shè)置大小且可選返回示例
1.按button標(biāo)題的長(zhǎng)度計(jì)算button的frame
2.可以選擇或取消選擇
3.完成后可以用block把選擇的按鈕值傳回上一級(jí)菜單
