设置UIButton的image和title排版

UIButton中有title和image的属性,只有其一的时候,默认都是居中排版。若两者都有,默认的排版则是image在左,title在右的。我们可以修改image和title的edgeInsets的值来达到改变排版的目的。

下面是创建一个UIButton的category,用来简单的engeInsets修改及定制image和title的间距

typedef NS_ENUM(NSUInteger, ZLButtonEdgeInsetStyle) {
    ZLButtonEdgeInsetStyleTop,          //imageView在上,titleLabel在下
    ZLButtonEdgeInsetStyleLeft,         //imageView在左,titleLabel在右  (UIButton的默认排版)
    ZLButtonEdgeInsetStyleBottom,       //imageView在下,titleLabel在上
    ZLButtonEdgeInsetStyleRight         //imageView在右,titleLabel在左
};

/*
 * @param style:根据枚举设置ImageView和titleLabel的样式
 * @param space:ImageView和titleLabel的间距
 */
- (void)layoutWithEdgeInsetStyle:(ZLButtonEdgeInsetStyle)style spaceBetweenImageAndTitle:(CGFloat)space {
    /**
     *  UIButton中的titleEdgeInsets是title相对于其上左下右的inset,跟tableView的contentInset是类似的。
     *  若只有title或只有image时,那它上下左右都是相对于button的。
     *  如果同时有image和label,UIButton默认的排版是image在左,title在右的,那这时候image的上左下是相对于button,右边是相对于label的;title的上右下是相对于button,左边是相对于image的。
     */
    
    //1.获取imageView和titleLabel的宽高
    CGFloat imageViewWidth = self.imageView.frame.size.width;
    CGFloat imageViewHeight = self.imageView.frame.size.height;
    CGFloat titleLabelWidth = 0.f;
    CGFloat titleLabelHeight = 0.f;
    if ([UIDevice currentDevice].systemVersion.floatValue >= 8.0) {
        // 由于iOS8中titleLabel的size为0,用下面的这种设置
        titleLabelWidth = self.titleLabel.intrinsicContentSize.width;
        titleLabelHeight = self.titleLabel.intrinsicContentSize.height;
    } else {
        titleLabelWidth = self.titleLabel.frame.size.width;
        titleLabelHeight = self.titleLabel.frame.size.height;
    }
    
    //2.声明全局的imageView、titleLabel的EdgeInsets
    UIEdgeInsets imageViewEdgeInsets = UIEdgeInsetsZero;
    UIEdgeInsets titleLabelEdgeInsets = UIEdgeInsetsZero;
    
    //3.根据style设置EdgeInsets
    switch (style) {
        case ZLButtonEdgeInsetStyleTop:
        {
            imageViewEdgeInsets = UIEdgeInsetsMake(- titleLabelHeight - space/2.f, 0.f, 0.f, - titleLabelWidth);
            titleLabelEdgeInsets = UIEdgeInsetsMake(0.f, - imageViewWidth, -imageViewHeight - space/2.f, 0.f);
        }
            break;
        case ZLButtonEdgeInsetStyleLeft:
        {
            imageViewEdgeInsets = UIEdgeInsetsMake(0.f, - space/2.f, 0.f, space/2.f);
            titleLabelEdgeInsets = UIEdgeInsetsMake(0.f, space/2.f, 0.f, - space/2.f);
        }
            break;
        case ZLButtonEdgeInsetStyleBottom:
        {
            imageViewEdgeInsets = UIEdgeInsetsMake(0.f, 0.f, - titleLabelHeight - space/2.f, - titleLabelWidth);
            titleLabelEdgeInsets = UIEdgeInsetsMake(- imageViewHeight - space/2.f, - imageViewWidth, 0.f, 0.f);
        }
            break;
        case ZLButtonEdgeInsetStyleRight:
        {
            imageViewEdgeInsets = UIEdgeInsetsMake(0.f, titleLabelWidth + space/2.f, 0.f, - titleLabelWidth - space/2.f);
            titleLabelEdgeInsets = UIEdgeInsetsMake(0.f, - imageViewWidth - space/2.f, 0.f, imageViewWidth + space/2.f);
        }
            break;
        default:
            break;
    }
    
    //4.赋值
    self.imageEdgeInsets = imageViewEdgeInsets;
    self.titleEdgeInsets = titleLabelEdgeInsets;
    
}

调用及效果

 [self.buttonTop layoutWithEdgeInsetStyle:ZLButtonEdgeInsetStyleTop spaceBetweenImageAndTitle:5.f];
    [self.buttonLeft layoutWithEdgeInsetStyle:ZLButtonEdgeInsetStyleLeft spaceBetweenImageAndTitle:10.f];
    [self.buttonBottom layoutWithEdgeInsetStyle:ZLButtonEdgeInsetStyleBottom spaceBetweenImageAndTitle:15.f];
    [self.buttonRight layoutWithEdgeInsetStyle:ZLButtonEdgeInsetStyleRight spaceBetweenImageAndTitle:20.f];
设置UIButton的image和title排版_第1张图片
UIButton自定义排版.png

你可能感兴趣的:(设置UIButton的image和title排版)