IOS之UI -- 按钮UIButton的细节

按钮细节

文章概要:

1、内部子控件
2、按钮拉伸问题
 2-1、代码拉伸
 2-2、无代码拉伸

内部子控件

如果想要改变按钮内部子控件的属性,只能自定义按钮

  • 自定义按钮:调整内部子控件的frame
    • 方式1:实现titleRectForContentRect:和imageRectForContentRect:方法,分别返回titleLabel和imageView的frame
    • 方式2:在layoutSubviews方法中设置
  • 内边距
// 设置按钮内容的内边距(影响到imageView和titleLabel)
@property(nonatomic) UIEdgeInsets contentEdgeInsets;
// 设置titleLabel的内边距(影响到titleLabel)
@property(nonatomic) UIEdgeInsets titleEdgeInsets;
// 设置imageView的内边距(影响到imageView)
@property(nonatomic) UIEdgeInsets imageEdgeInsets;

调整内部子控件的frame的方法1但是这样写很麻烦,而且有个问题:

  如果两个方法内部的参数互相依赖,但是却不清楚两个方法的执行顺序,所以容易出现异常。

然后建议使用调整内部子控件的frame方法2,在layoutSubviews中设置子控件的frame。

按钮其实不需要添加子控件的,因为按钮内部有两个子控件UIImage和UILabel,可以直接使用,但是对于这两个子控件使用有一些注意点:UIButton的子控件的iamgeView.image和titleLabel.text不能直接设置值,因为这两个值(或许还有别的值,可以通过看源码查看注释)是需要有设置状态属性值,如果没有设置状态,直接访问其属性更改会失效。

IOS之UI -- 按钮UIButton的细节

所以,以后按钮内置子控件的属性,要先确认是否需要分状态显示的。

如果想要该自己改变子控件titileLabel的字体,直接拿出font赋值,因为font不分状态

按钮拉伸问题

代码拉伸

在按钮使用了背景图片之后,特别是圆角图片,如果将按钮拉伸很大,边角锯齿显示就很明显了,也很难看。

所以我们需要将按钮拉伸问题进行处理:

使用UIImage对象的一个方法resizeable...可拉伸的意思

IOS之UI -- 按钮UIButton的细节
瓦片模式:拉伸后,会将可拉伸的部分拷贝铺设一块一块
拉伸模式:拉伸后,会直接将可拉伸部分直接拉大

瓦片模式,如果可拉伸部分是纯单色,跟拉伸模式没区别

IOS之UI -- 按钮UIButton的细节
  • iOS5之前
// 只拉伸中间的1x1区域
- (UIImage *)stretchableImageWithLeftCapWidth:(NSInteger)leftCapWidth topCapHeight:(NSInteger)topCapHeight;
IOS之UI -- 按钮UIButton的细节
  • iOS5开始
- (UIImage *)resizableImageWithCapInsets:(UIEdgeInsets)capInsets;
- (UIImage *)resizableImageWithCapInsets:(UIEdgeInsets)capInsets resizingMode:(UIImageResizingMode)resizingMode;
最后一般项目中这个图片拉伸的复用的功能我们可以封装在内部,
我们先将这个功能封装进方法,方法名是:resizableImage
那么写在谁的内部比较合适,也就是谁做这个功能最合适呢?
当然是UIImage,那么就有两种方式,
 1、分类类别拓展UIImage的方法,2、在继承UIImage自定义类中写
注意:类别拓展拓展成类方法比较合适哦,不然你还需要通过alloc-init创建UIImage对象,然后调用这个拓展的类别方法。

无代码拉伸

在xcode上设置,直接好使用,不用写代码,一劳永逸。连前面导入类别文件名都不需要了。

IOS之UI -- 按钮UIButton的细节
上一篇:iOS如何把导航默认的返回按钮设置成“返回”


下一篇:JS操作JSON总结