ios项目拆分之一 —— 扩充UIButton布局

参加比赛的项目，从团队组建到至今，一直一个人负责ios平台的app开发，开发周期断断续续一个月，主体功能一周完成，那一周真是酸爽，一天24h除了睡觉就是在敲键盘，好在结果还不错，有了回报。快速开发过去近一个月，吸收的东西太多，没有好好整理，慢慢写吧，其中用到了好多第三方sdk，主要功能包括人机互动，天气预报(只显示在UI上)，拍照识别，地图导航，音乐播放，电台播放等，涉及到的接口非常之多，蓝牙也是后期的拓展功能。

• 需要实现UIButton的 Image 和 文字 之间的排版模式（图上字下、图左字右、图下字上、图右字左）

思路：可以在UIButton上写一个UIImageView和UILabel，也可以把增加自身UIButton的方法，这样整个工程中需要拍版图片和文字的Button都能用到，简便了代码。

---

这里用到了Category模式，它主要用于向已经存在的类添加方法来扩展已有类的目的，在很多情形下Category也是比创建子类更优的选择。新添加的方法同样也会被被扩展的类的所有子类自动继承。

注释都在代码里

.h文件中枚举4种拍版样式和一个扩充的方法，如下代码：

typedef NS_ENUM(NSUInteger, ZZButtonEdgeInsetsStyle) 
{
    ZZButtonEdgeInsetsStyleTop, // image上，label下
    ZZButtonEdgeInsetsStyleLeft, // image左，label右
    ZZButtonEdgeInsetsStyleBottom, // image下，label上
    ZZButtonEdgeInsetsStyleRight // image右，label左
};

- (void)layoutButtonWithEdgeInsetsStyle:(ZZButtonEdgeInsetsStyle)style imageTitleSpace:(CGFloat)space;

.m中实现这个方法如下：

- (void)layoutButtonWithEdgeInsetsStyle:(ZZButtonEdgeInsetsStyle)style imageTitleSpace:(CGFloat)space
{    
    /**
     *  前置知识点：titleEdgeInsets是title相对于其上下左右的inset，跟tableView的contentInset是类似的
     *  如果只有title，那它上下左右都是相对于button的，image也是一样
     *  如果同时有image和label，那这时候image的上左下是相对于button，右边是相对于label的；title的上右下是相对于button，左边是相对于image的。
     */

    // 1.得到imageView和titleLabel的宽、高
    CGFloat imageWith = self.imageView.frame.size.width;
    CGFloat imageHeight = self.imageView.frame.size.height;
    
    CGFloat labelWidth = 0.0;
    CGFloat labelHeight = 0.0;
    
    if ([UIDevice currentDevice].systemVersion.floatValue >= 8.0) {
        // 由于iOS8中titleLabel的size为0，用下面的这种设置
        labelWidth = self.titleLabel.intrinsicContentSize.width;
        labelHeight = self.titleLabel.intrinsicContentSize.height;
        
    } else {
        labelWidth = self.titleLabel.frame.size.width;
        labelHeight = self.titleLabel.frame.size.height;
        
    }
    
    // 2. 声明全局的imageEdgeInsets和labelEdgeInsets
    UIEdgeInsets imageEdgeInsets = UIEdgeInsetsZero;
    UIEdgeInsets labelEdgeInsets = UIEdgeInsetsZero;
    
    // 3. 根据style和space得到imageEdgeInsets和labelEdgeInsets的值
    switch (style) {
        case ZZButtonEdgeInsetsStyleTop:
        {
           imageEdgeInsets = UIEdgeInsetsMake(-labelHeight-space/2.0, 0, 0, -labelWidth);
           labelEdgeInsets = UIEdgeInsetsMake(0, -imageWith, -imageHeight-space/2.0, 0);
            
        }
            break;
        case ZZButtonEdgeInsetsStyleLeft:
        {
            imageEdgeInsets = UIEdgeInsetsMake(0, -space/2.0, 0, space/2.0);
            labelEdgeInsets = UIEdgeInsetsMake(0, space/2.0, 0, -space/2.0);
        }
            break;
        case ZZButtonEdgeInsetsStyleBottom:
        {
            imageEdgeInsets = UIEdgeInsetsMake(0, 0, -labelHeight-space/2.0, -labelWidth);
            labelEdgeInsets = UIEdgeInsetsMake(-imageHeight-space/2.0, -imageWith, 0, 0);
        }
            break;
        case ZZButtonEdgeInsetsStyleRight:
        {
            imageEdgeInsets = UIEdgeInsetsMake(0, labelWidth+space/2.0, 0, -labelWidth-space/2.0);
            labelEdgeInsets = UIEdgeInsetsMake(0, -imageWith-space/2.0, 0, imageWith+space/2.0);
        }
            break;
        default:
            break;
    }
    
    // 4. 赋值
    self.titleEdgeInsets = labelEdgeInsets;
    self.imageEdgeInsets = imageEdgeInsets;
}

在工程中可以直接拿来用，例如：

// 这里的setting设置的是局部变量
setting = [[UIButton alloc] initWithFrame:CGRectMake(0, 40, 80, 80)];
[setting setImage:[UIImage imageNamed:@"setting"] forState:UIControlStateNormal];
[setting setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];
[setting setTitle:@"设置" forState:UIControlStateNormal]; /**以上是button的设置*/ 
    
CGFloat space = 20.0;  // space是图和文字的上下间距
[setting layoutButtonWithEdgeInsetsStyle:ZZButtonEdgeInsetsStyleTop imageTitleSpace:space];
[self.view addSubview:setting];
	// 别的排版就不举例了