原文: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显示在按钮内部右侧.如何更改两个内部控件的位置会在稍后给出.
![](https://i-blog.csdnimg.cn/blog_migrate/3a9429b8425c341bd5cf068430e63943.webp?x-image-process=image/format,png)
所以,在我们给UIButton设置文本文字和显示图片的时候,其实是在给UIButton中的UIImageView和UILabel赋值,而两者对应的属性分别是imageView和titleLabel.
而按钮是有状态的,从这这里看出,打开UIButton的属性检查器,查看属性state config,里面有很多状态,包括默认,高亮,禁用等状态.每种状态下的显示图片和文本文字都是不同的!
所以,总结起来就是:
1.给UIButton的UIImageView和UILabel设置数据,要取出UIButton的imageView和textLabel属性分别赋值.如果要设置imageView和textLabel的样式属性(例如设置textLabel的文字大小,颜色),还要继续取出控件的属性进行设置.
2.在给UIButton设置数据的时候,要给不同状态下的UIImageView和UILabel分别赋值.
![](https://i-blog.csdnimg.cn/blog_migrate/9d6cbd3add60d214a34447199cf86ec6.webp?x-image-process=image/format,png)
看到这里,有人会问,设置图片不是应该给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
![](https://i-blog.csdnimg.cn/blog_migrate/41d53ee99a1aeabc0d1d2660e6b7fc7d.webp?x-image-process=image/format,png)
参数contentRect意思是UIButton的内容大小,可以理解成为UIButton的展示空间大小.
这样就交换了UIImageView和UIButton的位置.但是,位置互换后还会出现一个问题,按钮的image会显示的"不正常"(也许比原来大了),造成UIButton的显示文字和显示图片非常不协调.这是因为没有设置图片的contentMode属性为UIViewContentModeCenter,解决办法是重写UIButton的initWithCoder方法,把图片的contentMode设置为UIViewContentModeCenter.
![](https://i-blog.csdnimg.cn/blog_migrate/5109592fce44d0eaafbbee8e1ffac747.webp?x-image-process=image/format,png)
至此,这个问题就解决了.
(3)关于按钮的背景颜色backgroundColor/背景图片backgroundImage
![](https://i-blog.csdnimg.cn/blog_migrate/da8d26df20f4c50459d4c3732759e786.webp?x-image-process=image/format,png)
(4)使用的小细节
4.1点击按钮时,会有一层灰蒙蒙的效果,打开UIButton按钮选择器,将Button Type的值由system改为custom
4.2点击按钮的时候,按钮会处于高亮状态,高亮状态下会加深按钮的颜色效果,如果不想要这个效果,如下操作
![](https://i-blog.csdnimg.cn/blog_migrate/d1f1352d7f4eba0559e34385f6f1f412.webp?x-image-process=image/format,png)
4.3内边距:内容与UIButton边框的距离
![](https://i-blog.csdnimg.cn/blog_migrate/6f30ceb0a4d97d4398c4da3acc5df490.webp?x-image-process=image/format,png)
![](https://i-blog.csdnimg.cn/blog_migrate/241e81231c0c920034c1a37e426178d6.webp?x-image-process=image/format,png)
重叠部分是内容,浅绿色部分就是内容与边框的距离.
可以把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的时候,按钮就没了,你也点击不到它.