玩转UI-- 图片+text 的按钮实现方式

屏幕快照 2017-03-16 上午11.38.52.png

像上图，在开发中很常见的一种按钮，结构是 上方图片，下方是文字的按钮，这种按钮实现的方式有很多种方式：

• 第一种：直接用UIButton 控件，设置image 和 title，再设置 image和title的偏移。这种方法个人觉得在屏幕适配的时候有些麻烦。

• 第二种：自定义一个View, 里面放UIImageView 和 UILabel ，再调用自定义的View,但是这种就要去重新创建一个类，觉得麻烦，占内存。

• 第三种：使用UIButton 控件，设置 image,再为button添加一个UILabel 的子视图，放在图片下方，图片再向上偏移指定像素。 这种方法是我常用的，适配起来方便，也不用那么麻烦去新增一个类。

UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
        button.frame = CGRectMake(i*(Screen_Width/4), 0, Screen_Width/4, downView.frame.size.height);
        // 设置图片和文字
        
        UILabel *title = [[UILabel alloc] initWithFrame:CGRectMake(0, button.frame.size.height*2/3-8, button.frame.size.width, button.frame.size.height/3)];
        title.textAlignment = NSTextAlignmentCenter;
        title.text = array[i][@"name"];
        title.textColor = BLACK_66;
        title.font = [UIFont systemFontOfSize:[UIFont adjustFontSize:14.0]];
        [button addSubview:title];
        
        [button setImage:[UIImage imageNamed:array[i][@"logo"]] forState:0];
        button.imageEdgeInsets = UIEdgeInsetsMake(-10, 0, 0, 0);  

        button.tag = i;
        [downView addSubview:button];

注：若有错误，欢迎指正。