在此主要介绍UIButton
的一些特殊用法:UIButton
的图片与文字排版,UIButton
的UIControlEvents
,以及UIButton
背景图片设置,至于给UIButton
设置frame
,UIButtonType
之类的基础知识,就不做介绍。
一、UIButton的图片与文字排版
UIButton
可以同时设置title
和image
,但如果不对title
和image
的位置进行调整,排版会很丑,如下:
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];
自然,在开发的过程中,我们会遇到很多不一样的需求,比如图片在文字右边,图片在文字上边,等等,我们都可以通过改变UIButton
的titleEdgeInsets
和imageEdgeInsets
这两个属性来实现。
下面列举一些排版例子:
// 图片在左边,全部居中
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
,不仅仅会触发添加在UIButton
上的触发事件,还会根据点击动作,手指移开UIButton
范围等操作进行响应,就如聊天软件中的录音按钮,根据手指的移动做各种需求处理,在此,就会用到UIButton
的UIControlEvents
属性:
typedef NS_OPTIONS(NSUInteger, UIControlEvents) {
// 手指按下按钮之后,在按钮范围内滑动
// 之前会先响应 UIControlEventTouchDown
UIControlEventTouchDragInside ,
// 手指按下按钮之后,在按钮范围外滑动
// 之前会依次先响应 UIControlEventTouchDown,UIControlEventTouchDragInside
UIControlEventTouchDragOutside ,
// 手指按下按钮的时候触发
UIControlEventTouchDown ,
// 手指按下按钮之后,在按钮范围内抬起
// 之前会依次先响应 UIControlEventTouchDown
UIControlEventTouchUpInside ,
// 手指按下按钮之后,在按钮范围外抬起
// 之前会依次先响应 UIControlEventTouchDown,UIControlEventTouchDragInside,UIControlEventTouchDragOutside
UIControlEventTouchUpOutside
};
// 给btn添加各种UIControlEvents,并添加触发方法,在各个方法做相应操作
[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背景图片设置
UIButton
背景图片设置有两种方法,在我上一篇《iOS - 背景图片大小的调整》中有介绍。