开发中我们经常会用到UIButton,默认的图片是在左边,文字是在右边的,这通常不足以满足我们的需求,毕竟文字可以放在图片上下左右等各个方位,可以通过titleEdgeInsets和imageEdgeInsets设置文字和图片的位置,不过这里没有使用,而是继承自UIButton创建了一个类。
这里是Demo。
这里是四种位置:
1.文字在左,图片在右
代码如下:
_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.文字在右,图片在左
代码如下:
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.文字在上,图片在下
代码如下:
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.文字在下,图片在上
代码如下:
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,然后加上间距,得到最适合的尺寸,这样就可以很好地显示图片和文字了。