iOS UIButton调整图片与文字的位置

原理

imageEdgeInsets titleEdgeInsets contentEdgeInsets 利用 UIButton 的这三个属性来调整图片与文字的位置从而达到以下的效果

为了减少代码耦合度，用Category 的方式来实现，首先需要一个 typedef 来标记图片文字的排行位置

///图片文字显示位置
typedef NS_ENUM(NSInteger, imageStyleStyle) {

    ///图片左 文字右
    imageStyleStyleLeft    = 0,
    ///图片右 文字左
    imageStyleStyleRight   = 1,
    ///图片上 文字下
    imageStyleStyleTop     = 2,
    ///图片下 文字上
    imageStyleStyleBottom  = 3
}; 

同时需要一个入参方法共需求

- (void)changePosition:(imageStyleStyle)style space:(CGFloat)space;

然后加点细节

- (void)changePosition:(imageStyleStyle)style space:(CGFloat)space {
    [self setTitle:self.currentTitle forState:UIControlStateNormal];
    [self setImage:self.currentImage forState:UIControlStateNormal];

    CGFloat imageWidth = self.imageView.image.size.width;
    CGFloat imageHeight = self.imageView.image.size.height;

    CGFloat labelWidth = [self.currentTitle boundingRectWithSize:CGSizeMake(MAXFLOAT, self.frame.size.height)
                                                      options:NSStringDrawingUsesLineFragmentOrigin
                                                   attributes:@{NSFontAttributeName : self.titleLabel.font}
                                                      context:nil].size.width;

    CGFloat labelHeight = [self.currentTitle boundingRectWithSize:CGSizeMake(labelWidth, MAXFLOAT)
                                                          options:NSStringDrawingUsesLineFragmentOrigin
                                                       attributes:@{NSFontAttributeName : self.titleLabel.font}
                                                          context:nil].size.height;

    CGFloat imageOffsetX = (imageWidth + labelWidth) / 2 - imageWidth / 2;//image中心移动的x距离
    CGFloat imageOffsetY = imageHeight / 2 + space / 2;//image中心移动的y距离
    CGFloat labelOffsetX = (imageWidth + labelWidth / 2) - (imageWidth + labelWidth) / 2;//label中心移动的x距离
    CGFloat labelOffsetY = labelHeight / 2 + space / 2;//label中心移动的y距离

    CGFloat tempWidth = MAX(labelWidth, imageWidth);
    CGFloat changedWidth = labelWidth + imageWidth - tempWidth;
    CGFloat tempHeight = MAX(labelHeight, imageHeight);
    CGFloat changedHeight = labelHeight + imageHeight + space - tempHeight;

    switch (style) {
        case imageStyleStyleLeft:
            self.imageEdgeInsets = UIEdgeInsetsMake(0, -space/2, 0, space/2);
            self.titleEdgeInsets = UIEdgeInsetsMake(0, space/2, 0, -space/2);
            self.contentEdgeInsets = UIEdgeInsetsMake(0, space/2, 0, space/2);
            break;

        case imageStyleStyleRight:
            self.imageEdgeInsets = UIEdgeInsetsMake(0, labelWidth + space/2, 0, -(labelWidth + space/2));
            self.titleEdgeInsets = UIEdgeInsetsMake(0, -(imageWidth + space/2), 0, imageWidth + space/2);
            self.contentEdgeInsets = UIEdgeInsetsMake(0, space/2, 0, space/2);
            break;

        case imageStyleStyleTop:
            self.imageEdgeInsets = UIEdgeInsetsMake(-imageOffsetY, imageOffsetX, imageOffsetY, -imageOffsetX);
            self.titleEdgeInsets = UIEdgeInsetsMake(labelOffsetY, -labelOffsetX, -labelOffsetY, labelOffsetX);
            self.contentEdgeInsets = UIEdgeInsetsMake(imageOffsetY, -changedWidth/2, changedHeight-imageOffsetY, -changedWidth/2);
            break;

        case imageStyleStyleBottom:
            self.imageEdgeInsets = UIEdgeInsetsMake(imageOffsetY, imageOffsetX, -imageOffsetY, -imageOffsetX);
            self.titleEdgeInsets = UIEdgeInsetsMake(-labelOffsetY, -labelOffsetX, labelOffsetY, labelOffsetX);
            self.contentEdgeInsets = UIEdgeInsetsMake(changedHeight-imageOffsetY, -changedWidth/2, imageOffsetY, -changedWidth/2);
            break;

        default:
            break;
    }

}

over~

核心代码参考与 https://github.com/Phelthas/Demo_ButtonImageTitleEdgeInsets