ios-UI控件精讲之【6】UIButton

原文：http://www.jianshu.com/p/ae684aeac913

1.按钮UIButton

（1）UIButton是一个容器

UIButton是一个比较特殊的UI控件,它不仅仅是一个控件,更是一个容器.为什么说是容器?

打开UIButton的属性检测器,会有2个比较重要的属性,分别是title和image,对应的类型分别是NSString和UIImage.再直白一点就是UILabel和UIImageView.

如何查看? command+鼠标左键点击UIButton类进入到UIButton.h文件,在74,75行会看到如下代码：

@property(nullable,nonatomic,readonly,strong)UILabel*titleLabelNS_AVAILABLE_IOS(3_0);

@property(nullable,nonatomic,readonly,strong)UIImageView*imageViewNS_AVAILABLE_IOS(3_0);

为了理解容器这个问题,可以这样理解,我们看到的UIButton,可以看做是由两部分组成的.

一部分是UIImageView,另一部分是UILabel.而系统默认情况下,UIImage显示在按钮内部左侧,UILabel显示在按钮内部右侧.如何更改两个内部控件的位置会在稍后给出.

UIImageView和UILabel在UIButton中的默认显示位置

所以,在我们给UIButton设置文本文字和显示图片的时候,其实是在给UIButton中的UIImageView和UILabel赋值,而两者对应的属性分别是imageView和titleLabel.

而按钮是有状态的,从这这里看出,打开UIButton的属性检查器,查看属性state config,里面有很多状态,包括默认,高亮,禁用等状态.每种状态下的显示图片和文本文字都是不同的!

所以,总结起来就是：

1.给UIButton的UIImageView和UILabel设置数据,要取出UIButton的imageView和textLabel属性分别赋值.如果要设置imageView和textLabel的样式属性(例如设置textLabel的文字大小,颜色),还要继续取出控件的属性进行设置.

2.在给UIButton设置数据的时候,要给不同状态下的UIImageView和UILabel分别赋值.

代码实现

看到这里,有人会问,设置图片不是应该给imageView属性赋值吗？你这里怎么用的是setImage方法?

是这样的,可以把UIImageView理解成一个相框,UIImage是相框中的图片,当你设置好image后,这张图片就会显示在相框(UIImageView)中.当然你也可以根据UIButton取出它的imageView属性,但是你给imageView属性进行图片赋值的时候,运行在模拟器中什么都不会显示.

新手易犯错误：没有给不同状态下的UIButton子控件进行赋值,而选择直接赋值,导致在界面上显示错误.

（2）改变默认的UIButton显示样式

系统默认的子控件显示样式已经在第一张图片中描绘清楚了.

但是会有其他状况发生:我想让UIButton内部左侧显示文本,右侧显示图片.

这种情况下,你就要用到自定义UIButton,重新设置UIImageView和UILabel的位置(frame)

思路：自定义类继承自UIButton类,在自定义类的实现文件中,重写父类的两个方法,分别是：

-(CGRect)titleRectForContentRect:(CGRect)contentRect;  ->设置titleLabel的frame

-(CGRect)imageRectForContentRect:(CGRect)contentRect;  ->设置imageView的frame

代码实现

参数contentRect意思是UIButton的内容大小,可以理解成为UIButton的展示空间大小.

这样就交换了UIImageView和UIButton的位置.但是,位置互换后还会出现一个问题,按钮的image会显示的"不正常"(也许比原来大了),造成UIButton的显示文字和显示图片非常不协调.这是因为没有设置图片的contentMode属性为UIViewContentModeCenter,解决办法是重写UIButton的initWithCoder方法，把图片的contentMode设置为UIViewContentModeCenter.

代码实现

至此,这个问题就解决了.

（3）关于按钮的背景颜色backgroundColor/背景图片backgroundImage

背景图片也需要在按钮的不同状态下设置

（4）使用的小细节

4.1点击按钮时,会有一层灰蒙蒙的效果,打开UIButton按钮选择器,将Button Type的值由system改为custom

4.2点击按钮的时候,按钮会处于高亮状态,高亮状态下会加深按钮的颜色效果,如果不想要这个效果,如下操作

将Highlighted Adjust image属性勾选掉（系统默认是勾选的）

4.3内边距：内容与UIButton边框的距离

该模块位于属性检查器

设置完内边距后的效果

重叠部分是内容,浅绿色部分就是内容与边框的距离.

可以把Edge的属性值该为title或image,就可以分别设置UILabel和UIImageView与边框的距离了.

4.4关于UIButton的属性tag

tag这个属性很多地方可以用到,而且在两个独立的按钮需要通过tag进行交互的时候,很容器产生bug,所以不要将它忽略.

tag是NSInteger类型的属性,创建并初始化一个按钮后,该按钮的tag值默认为0.

4.5按钮的禁用

该属性是enabled,是BOOL类型,值是YES可以点击,值是NO禁止点击.

4.6按钮的透明度alpha

所有控件都有这个属性,可以设置控件的透明度,它是一个0~1之间的值.

当alpha=0的时候,按钮就没了,你也点击不到它.