一.UIEdgeInsetsMake的四个属性
UIEdgeInsetsMake 有四个属性,依次是 Top,left,bottom,right
[Btn setTitleEdgeInsets:UIEdgeInsetsMake( top, left, bottom, right)];
四个属性的默认值为0,拿其中一个left属性来聊, 你可以理解为文字距离Btn左边界的“位移”是0,
如果给left一个正值(例如40),即说明 文字距离左边界位增加了40个距离(即向右边移动了40个距离).
(注意⚠️:这个左边界不是btn的左边,而是btn.titleLabel 的左边)
对比下图,红色Btn设置了属性[redbBtn setTitleEdgeInsets:UIEdgeInsetsMake(0, 40, 0, 0)];
即红色Btn的文字距离左边界位增加了40个距离(即向右边移动了40个距离).
如果给left一个负值(例如-40),即说明 文字距离左边界位增加了-40个距离(即向左边移动了40个距离).
如下图:
由以上两个示例我们可以得出结论:
1.给left设置正值,则title往右边移动,即距离左边界移动xx距离(原本默认距离为0);给left设置负值,则title往左边移动.
以此类推,其他3个属性也是这样.设置top正值,title往下边移动,设置负值,title往上边移动……
如果同时给left和right都设置相同的正值,则实际上title不移动:
给left设置了正值40,往右移动
[redbBtn setTitleEdgeInsets:UIEdgeInsetsMake(0, 40, 0, 0)];
给right设置了正值40,往左移动
[redbBtn setTitleEdgeInsets:UIEdgeInsetsMake(0, 0, 0, 40)];
一左一右都移动40,等同于不移动
总之,明白了属性的道理,上左下右各种组合你就慢慢玩吧.
以上是btn的文字title的处理,Btn的iamgeView也是这个意思.
那么文字+图片该怎么设置呢?
二.文字+图片
同时给Btn设置了文字和图片,系统默认图片在左,文字在右. 而且还是仅仅挨着的:
UIButton * redbBtn = [[UIButton alloc]initWithFrame:CGRectMake(100, 200, 150, 80)];redbBtn.backgroundColor = [UIColor redColor];[redbBtn setTitle:@"Btn文字" forState:UIControlStateNormal];[redbBtn setImage:[UIImage imageNamed:@"new_delete"] forState:UIControlStateNormal];[self.view addSubview:redbBtn];
我们可以设置setTitleEdgeInsets的left属性为正值(或者right属性为负值),让文字往右边移动
[redbBtn setTitleEdgeInsets:UIEdgeInsetsMake(0, 20, 0, 0)];
//或者
//[redbBtn setTitleEdgeInsets:UIEdgeInsetsMake(0, 0, 0, -20)];
也可以设置setImageEdgeInsets的right属性为正值(或者left属性为负值),让图片往左边移动
[redbBtn setImageEdgeInsets:UIEdgeInsetsMake(0, -20, 0, 0)];
//或者
//[redbBtn setImageEdgeInsets:UIEdgeInsetsMake(0, 0, 0, 20)];
当然20这个值不是随便设置的,要根据title和iamge的宽度(或者高度),以及Btn的高度或者宽度来协调.
读懂了以上的几个属性.
我们处理成四个样式
1.图片在左,文字在右;2.图片在右,文字在左;3.图片在上,文字在下;4.图片在下,文字在上;
代码如下:
- (void)setBtnImageAndTitle:(UIButton *)btn WithStyle:(NSString *)style Spacing:(CGFloat)spacing
{if ([style isEqualToString:@"top"]){CGFloat imageW = btn.imageView.frame.size.width;CGFloat imageH = btn.imageView.frame.size.height;CGFloat titleIntrinsicContentSizeW = btn.titleLabel.intrinsicContentSize.width;CGFloat titleIntrinsicContentSizeH = btn.titleLabel.intrinsicContentSize.height;btn.imageEdgeInsets = UIEdgeInsetsMake(- titleIntrinsicContentSizeH - spacing, 0, 0, - titleIntrinsicContentSizeW);btn.titleEdgeInsets = UIEdgeInsetsMake(0, - imageW, - imageH - spacing, 0);}else if ([style isEqualToString:@"left"]){if (btn.contentHorizontalAlignment == UIControlContentHorizontalAlignmentLeft) {btn.titleEdgeInsets = UIEdgeInsetsMake(0, spacing, 0, 0);} else if (btn.contentHorizontalAlignment == UIControlContentHorizontalAlignmentRight) {btn.imageEdgeInsets = UIEdgeInsetsMake(0, 0, 0, spacing);} else {btn.imageEdgeInsets = UIEdgeInsetsMake(0, - 0.5 * spacing, 0, 0.5 * spacing);btn.titleEdgeInsets = UIEdgeInsetsMake(0, 0.5 * spacing, 0, - 0.5 * spacing);}}else if ([style isEqualToString:@"bottom"]){CGFloat imageW = btn.imageView.frame.size.width;CGFloat imageH = btn.imageView.frame.size.height;CGFloat titleIntrinsicContentSizeW = btn.titleLabel.intrinsicContentSize.width;CGFloat titleIntrinsicContentSizeH = btn.titleLabel.intrinsicContentSize.height;btn.imageEdgeInsets = UIEdgeInsetsMake(titleIntrinsicContentSizeH + spacing, 0, 0, - titleIntrinsicContentSizeW);btn.titleEdgeInsets = UIEdgeInsetsMake(0, - imageW, imageH + spacing, 0);}else{CGFloat imageW = btn.imageView.image.size.width;CGFloat titleW = btn.titleLabel.frame.size.width;if (btn.contentHorizontalAlignment == UIControlContentHorizontalAlignmentLeft) {btn.imageEdgeInsets = UIEdgeInsetsMake(0, titleW + spacing, 0, 0);btn.titleEdgeInsets = UIEdgeInsetsMake(0, - imageW, 0, 0);} else if (btn.contentHorizontalAlignment == UIControlContentHorizontalAlignmentRight) {btn.imageEdgeInsets = UIEdgeInsetsMake(0, 0, 0, - titleW);btn.titleEdgeInsets = UIEdgeInsetsMake(0, 0, 0, imageW + spacing);} else {CGFloat imageOffset = titleW + 0.5 * spacing;CGFloat titleOffset = imageW + 0.5 * spacing;btn.imageEdgeInsets = UIEdgeInsetsMake(0, imageOffset, 0, - imageOffset);btn.titleEdgeInsets = UIEdgeInsetsMake(0, - titleOffset, 0, titleOffset);}}
}//调用代码[self setBtnImageAndTitle:redbBtn WithStyle:@"right" Spacing:10];