前言:
我们经常会要用到自定义button的
标题,图片位置, 距离等定制化需求,
在网上也有很多相关工具,但找来之后发现用起来不方便,有时还不能满足需求,
于是,自己写了一个工具,目前支持图片和标题左右布局
一 想要实现如图的效果
#import <LBButtonImageTitlePosition/UIButton+ImageTitleLocationSpace.h>
....
self.firstButton.contentEdgeInsets = UIEdgeInsetsMake(0, 20, 0, 40);
[self.firstButton setTitle:@"你好你哈" forState:UIControlStateNormal];
[self.firstButton setImage:[UIImage imageNamed:@"account_verify_info"] forState:UIControlStateNormal];
[self.firstButton rightImgWithIntervalSpace:40];
二 实现原理核心代码
图片在右
- (void)rightImgWithIntervalSpace:(CGFloat)space
{
/*这里为了避免重复设置导致的button frame 重复改变,添加了一个判断*/
if (self.hasSetPositionAndSpace) {
return;
}
CGFloat imageWidth = self.imageView.image.size.width;
CGFloat titleWidth = self.titleLabel.intrinsicContentSize.width;
if ([UIApplication sharedApplication].userInterfaceLayoutDirection == UIUserInterfaceLayoutDirectionRightToLeft) {
//反向语言处理
[self setImageEdgeInsets:UIEdgeInsetsMake(0, -titleWidth - space/2.0, 0, titleWidth + space/2.0)];
[self setTitleEdgeInsets:UIEdgeInsetsMake(0, imageWidth + space/2, 0, -imageWidth-space/2.0)];
} else {
///通常情况下,我们只需要关注正向布局的即可
/*
这里的 titleWidth的标题的宽度
正常情况下,图片是在左,标题是在右的,
我们如果想要实现图片在右边,则需要
将图片的左边距和有边距都移动
标题的宽度(图片移动的距离等于左边距移动的距离/2 + 右边距移动的距离/2),然后还需要加上我们设置的距离
*/
[self setImageEdgeInsets:UIEdgeInsetsMake(0, titleWidth + space/2.0, 0, -titleWidth -space/2.0)];
[self setTitleEdgeInsets:UIEdgeInsetsMake(0, -imageWidth - space/2, 0, imageWidth + space/2.0)];
}
[self _updateContentInsetWithSpace:space];
}
// 图片在左边就简单些了
- (void)intervalSpace:(CGFloat)space
{
if (self.hasSetPositionAndSpace) {
return;
}
if ([UIApplication sharedApplication].userInterfaceLayoutDirection == UIUserInterfaceLayoutDirectionRightToLeft) {
//反向语言处理
[self setTitleEdgeInsets:UIEdgeInsetsMake(0, -space/2, 0, space/2)];
[self setImageEdgeInsets:UIEdgeInsetsMake(0, space/2, 0, -space/2)];
} else {
[self setTitleEdgeInsets:UIEdgeInsetsMake(0, space/2, 0, -space/2)];
[self setImageEdgeInsets:UIEdgeInsetsMake(0, -space/2, 0, space/2)];
}
[self _updateContentInsetWithSpace:space];
}
// 修改button 的内容内边距,防止button宽度过小导致内容左右溢出
- (void)_updateContentInsetWithSpace:(CGFloat)space
{
CGFloat top = self.contentEdgeInsets.top;
CGFloat bottom = self.contentEdgeInsets.bottom;
CGFloat right = self.contentEdgeInsets.right;
CGFloat left = self.contentEdgeInsets.left;
if ([UIApplication sharedApplication].userInterfaceLayoutDirection == UIUserInterfaceLayoutDirectionRightToLeft) {
//反向语言处理
CGFloat temp = right;
right = left;
left = temp;
}
[self setContentEdgeInsets:UIEdgeInsetsMake(top, space/2 + left, bottom, space/2 + right)];
self.hasSetPositionAndSpace = YES;
}
使用方法
pod ‘LBButtonImageTitlePosition’
button设置标题,图片之后,调用该工具的设置距离的方法
如
[self.firstButton setTitle:@"你好你哈" forState:UIControlStateNormal];
[self.firstButton setImage:[UIImage imageNamed:@"account_verify_info"] forState:UIControlStateNormal];
[self.firstButton rightImgWithIntervalSpace:40];
[self.firstButton mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.mas_equalTo(10);
make.top.mas_equalTo(100);
make.height.mas_equalTo(50);
}];
注意: 调用rightImgWithIntervalSpace 方法一定要button设置标题,图片之后哦,因为
需要根据获取内容的大小来进行相应的设置