在此主要介紹UIButton
的一些特殊用法:UIButton
的圖片與文字排版渴肉,UIButton
的UIControlEvents
限佩,以及UIButton
背景圖片設(shè)置蔚润,至于給UIButton
設(shè)置frame
焚挠,UIButtonType
之類的基礎(chǔ)知識蟹肘,就不做介紹璃吧。
一楣导、UIButton的圖片與文字排版
UIButton
可以同時設(shè)置title
和image
,但如果不對title
和image
的位置進行調(diào)整畜挨,排版會很丑筒繁,如下:
UIButton *btn = [UIButton buttonWithType:UIButtonTypeCustom];
btn.frame = CGRectMake(90, 180, 100, 40);
btn.layer.cornerRadius = 20;
btn.backgroundColor = [UIColor cyanColor];
[btn setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
[btn setTitle:@"title" forState:UIControlStateNormal];
[btn setImage:[UIImage imageNamed:@"co_ch_t"] forState:UIControlStateNormal];
[self.view addSubview:btn];
不作任何處理的效果
上面的排版之所以不好看,那是因為圖片與文字靠的太近巴元,** 所以我們要將圖片與文字距離拉開些毡咏,這里就涉及到
UIButton
的titleEdgeInsets
和imageEdgeInsets
屬性,這兩個屬性的默認值為零逮刨,**如果我們將代碼修改下呕缭,效果將很不一樣:
UIButton *btn = [UIButton buttonWithType:UIButtonTypeCustom];
btn.frame = CGRectMake(90, 180, 100, 40);
btn.layer.cornerRadius = 20;
btn.backgroundColor = [UIColor cyanColor];
[btn setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
[btn setTitle:@"title" forState:UIControlStateNormal];
[btn setImage:[UIImage imageNamed:@"co_ch_t"] forState:UIControlStateNormal];
btn.titleEdgeInsets = UIEdgeInsetsMake(0.0, 0.0, 0.0, - 10);
btn.imageEdgeInsets = UIEdgeInsetsMake(0.0, - 10, 0.0, 0.0);
[self.view addSubview:btn];
變美了~
自然,在開發(fā)的過程中修己,我們會遇到很多不一樣的需求臊旭,比如圖片在文字右邊,圖片在文字上邊箩退,等等离熏,我們都可以通過改變UIButton
的titleEdgeInsets
和imageEdgeInsets
這兩個屬性來實現(xiàn)。
下面列舉一些排版例子:
// 圖片在左邊戴涝,全部居中
CGFloat spacing = 20;
CGSize imageSize = btn0.imageView.frame.size;
btn0.titleEdgeInsets = UIEdgeInsetsMake(0.0, 0.0, 0.0, - spacing/2);
// 對titleEdgeInsets的屬性賦值之后滋戳,title的寬度可能會變化钻蔑,所以我們需要在titleEdgeInsets賦值之后去獲取titleSize
CGSize titleSize = btn0.titleLabel.frame.size;
btn0.imageEdgeInsets = UIEdgeInsetsMake(0.0, - spacing/2, 0.0, 0.0);
// 圖片在上邊,全部居中
imageSize = btn1.imageView.frame.size;
titleSize = btn1.titleLabel.frame.size;
spacing = 2;
btn1.titleEdgeInsets = UIEdgeInsetsMake(0.0, - imageSize.width, - (imageSize.height + spacing/2), 0.0);
titleSize = btn1.titleLabel.frame.size;
btn1.imageEdgeInsets = UIEdgeInsetsMake(- (titleSize.height + spacing/2), 0.0, 0.0, - titleSize.width);
// 圖片在右邊奸鸯,全部居中
spacing = 20;
imageSize = btn2.imageView.frame.size;
btn2.titleEdgeInsets = UIEdgeInsetsMake(0.0, - imageSize.width, 0.0, imageSize.width + spacing/2);
titleSize = btn2.titleLabel.frame.size;
btn2.imageEdgeInsets = UIEdgeInsetsMake(0.0, titleSize.width + spacing/2, 0.0, - titleSize.width);
// 圖片在右邊咪笑,文字居中
imageSize = btn3.imageView.frame.size;
btn3.titleEdgeInsets = UIEdgeInsetsMake(0.0, - imageSize.width, 0.0, 0.0);
titleSize = btn3.titleLabel.frame.size;
btn3.imageEdgeInsets = UIEdgeInsetsMake(0.0, titleSize.width + imageSize.width + spacing, 0.0, - titleSize.width);
效果圖
二、UIButton的UIControlEvents
點擊UIButton
娄涩,不僅僅會觸發(fā)添加在UIButton
上的觸發(fā)事件窗怒,還會根據(jù)點擊動作,手指移開UIButton
范圍等操作進行響應(yīng)蓄拣,就如聊天軟件中的錄音按鈕扬虚,根據(jù)手指的移動做各種需求處理,在此球恤,就會用到UIButton
的UIControlEvents
屬性:
typedef NS_OPTIONS(NSUInteger, UIControlEvents) {
// 手指按下按鈕之后辜昵,在按鈕范圍內(nèi)滑動
// 之前會先響應(yīng) UIControlEventTouchDown
UIControlEventTouchDragInside ,
// 手指按下按鈕之后,在按鈕范圍外滑動
// 之前會依次先響應(yīng) UIControlEventTouchDown咽斧,UIControlEventTouchDragInside
UIControlEventTouchDragOutside ,
// 手指按下按鈕的時候觸發(fā)
UIControlEventTouchDown ,
// 手指按下按鈕之后堪置,在按鈕范圍內(nèi)抬起
// 之前會依次先響應(yīng) UIControlEventTouchDown
UIControlEventTouchUpInside ,
// 手指按下按鈕之后,在按鈕范圍外抬起
// 之前會依次先響應(yīng) UIControlEventTouchDown张惹,UIControlEventTouchDragInside舀锨,UIControlEventTouchDragOutside
UIControlEventTouchUpOutside
};
// 給btn添加各種UIControlEvents,并添加觸發(fā)方法宛逗,在各個方法做相應(yīng)操作
[btn addTarget:self action:@selector(record_btn_dragged:with_event:) forControlEvents:UIControlEventTouchDragInside];
[btn addTarget:self action:@selector(record_btn_dragged2:with_event:) forControlEvents:UIControlEventTouchDragOutside];
[btn addTarget:self action:@selector(record_btn_touched_down) forControlEvents:UIControlEventTouchDown];
[btn addTarget:self action:@selector(record_btn_touched_up:with_event:) forControlEvents:UIControlEventTouchUpInside];
[btn addTarget:self action:@selector(record_btn_touched_up2:with_event:) forControlEvents:UIControlEventTouchUpOutside];
三雁竞、UIButton背景圖片設(shè)置
UIButton
背景圖片設(shè)置有兩種方法,在我上一篇《iOS - 背景圖片大小的調(diào)整》中有介紹拧额。