UIButton图片和文字位置

开发中我们经常会用到UIButton，默认的图片是在左边，文字是在右边的，这通常不足以满足我们的需求，毕竟文字可以放在图片上下左右等各个方位，可以通过titleEdgeInsets和imageEdgeInsets设置文字和图片的位置，不过这里没有使用，而是继承自UIButton创建了一个类。

这里是Demo。

这里是四种位置：

1.文字在左，图片在右

TitleLeft.png

代码如下：
_imageTitleSpacing为文字和图片的间距，下同

CGFloat sumWidth = CGRectGetWidth(titleFrame) + CGRectGetWidth(imageViewFrame) + _imageTitleSpacing;
            
titleFrame.origin = CGPointMake((self.bounds.size.width - sumWidth) / 2, (self.bounds.size.height - titleFrame.size.height) / 2);
self.titleLabel.frame = titleFrame;
            
imageViewFrame.origin = CGPointMake(CGRectGetMaxX(titleFrame) + _imageTitleSpacing, (self.bounds.size.height - imageViewFrame.size.height) / 2);
self.imageView.frame = imageViewFrame;

2.文字在右，图片在左

TitleRight.png

代码如下：

CGFloat sumWidth = CGRectGetWidth(titleFrame) + CGRectGetWidth(imageViewFrame) + _imageTitleSpacing;
            
imageViewFrame.origin = CGPointMake((self.bounds.size.width - sumWidth) / 2, (self.bounds.size.height - imageViewFrame.size.height) / 2);
self.imageView.frame = imageViewFrame;
            
titleFrame.origin = CGPointMake(CGRectGetMaxX(imageViewFrame) + _imageTitleSpacing, (self.bounds.size.height - titleFrame.size.height) / 2);
self.titleLabel.frame = titleFrame;

3.文字在上，图片在下

TitleTop.png

代码如下：

CGFloat sumHeight = CGRectGetHeight(titleFrame) + CGRectGetHeight(imageViewFrame) + _imageTitleSpacing;
            
titleFrame = CGRectMake(0, (self.bounds.size.height - sumHeight) / 2, self.bounds.size.width, titleFrame.size.height);
self.titleLabel.frame = titleFrame;
self.titleLabel.textAlignment = NSTextAlignmentCenter;
            
imageViewFrame.origin = CGPointMake((self.bounds.size.width - imageViewFrame.size.width) / 2, CGRectGetMaxY(titleFrame) + _imageTitleSpacing);
self.imageView.frame = imageViewFrame;

4.文字在下，图片在上

TitleBottom.png

代码如下：

CGFloat sumHeight = CGRectGetHeight(titleFrame) + CGRectGetHeight(imageViewFrame) + _imageTitleSpacing;
            
imageViewFrame.origin = CGPointMake((self.bounds.size.width - imageViewFrame.size.width) / 2, (self.bounds.size.height - sumHeight) / 2) ;
self.imageView.frame = imageViewFrame;
            
titleFrame = CGRectMake(0, CGRectGetMaxY(imageViewFrame) + _imageTitleSpacing, self.bounds.size.width, titleFrame.size.height);
self.titleLabel.frame = titleFrame;
self.titleLabel.textAlignment = NSTextAlignmentCenter;

其实改变文字和图片的位置很简单，例如文字在左，图片在右，只要先确定文字位置，图片的x值只要加上间距和文字宽度即可得到，其它位置以此类推即可。
其实这样并没有结束，因为我们设置的button的frame不一定刚好能完美地显示图片和文字，那我们就要调用sizeToFit这个方法，因此，继承自UIButton的类，还需要实现- (CGSize)sizeThatFits:(CGSize)size这个方法，在这个方法中：

CGSize titleSize = [self.titleLabel sizeThatFits:size];
CGSize imageSize = [self.imageView sizeThatFits:size];
    
switch (_buttonPositioned) {
        case PositionedButtonTypeTitleTop:
        case PositionedButtonTypeTitleBottom:
        {
            return CGSizeMake(MAX(titleSize.width, imageSize.width), titleSize.height + imageSize.height + _imageTitleSpacing);
        }
        case PositionedButtonTypeTitleLeft:
        case PositionedButtonTypeTitleRight:
        {
            return CGSizeMake(titleSize.width + imageSize.width + _imageTitleSpacing, MAX(titleSize.height, imageSize.height));
        }
}
    
return size;

我们需要调用sizeThatFits得到titleLabel和imageView最适宜的size，然后加上间距，得到最适合的尺寸，这样就可以很好地显示图片和文字了。