做公司项目的时候有个需求,做签到功能的时候,无论点击图标还是点击签到的文字,都要相应签到这个功能,文字和图片要同时有点击效果。试了很多方法效果都不是太好~~最后对button重新布局才满足产品经理的要求。
UIButton显示问题
UIButton* btn = [UIButtonbuttonWithType:UIButtonTypeCustom];
btn.frame = CGRectMake(20,100,200,30);
btn.background =Color[UIColorcyanColor];
btn.titleLabel.backgroundColor= [UIColorblackColor];
这几行代码实现的效果是
可见,即便设置了label的背景颜色也没有什么改变,难道Button内部的控件是隐藏不见得的?且慢,加上下面一行代码
[btn setTitle:@"你好"forState:UIControlStateNormal];
效果就变成接下来的样子
很明显,只有Label的内容不为空的时候,才有frame;那么如果加上下面一段代码
btn.imageView.backgroundColor= [UIColorredColor];
[btn setImage[UIImageimageNamed:@"rechargeLine@2x.png"]forState:UIControlStateNormal];
效果是什么样子呢?
注意是setImage而不是setBackgroundImage,可以看到,Imageview和Label是左右布局的,而不是我想象中的上下布局。因为我给的图片比较长,可以看到UIImageVIew会根据图片的大小自动调整其frame值,在Buttton的frame范围内,尽量调整到图片本身的大小,如果图片的width超过了Button的witdth,图片被压缩,label内容无法显示。其实这两个控件在Button内部可以看成一个整体,默认情况下,如果这两个控件的总frame的大小(比如width)小于Button的frame,那么它们在Button的内部就是居中显示的。
[btn setBackgroundImage:[UIImageimageNamed:@"rechargeLine@2x.png"]forState:UIControlStateNormal];
如果换成setBackgroundImage会有什么效果呢?
估计大家知道这两种设置图片方式之间的区别了.
改变UIButton里UIImageView和UILabel的布局
UIButton里面有几个属性,contentEdgeInsets
、
titleEdgeInsets
、imageEdgeInsets
,通过设置UIImageView和UILabel的UIEdgeInsets可以改变Button内部的相对布局。
UIButton的.m文件可以看到:
@property(nonatomic) UIEdgeInsets contentEdgeInsets UI_APPEARANCE_SELECTOR; // default is UIEdgeInsetsZero
contentEdgeInsets
默认情况下为UIEdgeInsetsZero
,titleEdgeInsets
、imageEdgeInsets
,也是如此。
仅设置titleEdgeInsets的值
btn.titleEdgeInsets = UIEdgeInsetsMake(0, 10, 0,0 );
文字向右偏移10sp
仅设置imageEdgeInsets的值
btn.imageEdgeInsets = UIEdgeInsetsMake(0, 0, 0, 50);
图片向左偏移50sp
仅设置contentEdgeInsets的值
btn.contentEdgeInsets = UIEdgeInsetsMake(-15, -150, 0, 0);
整体向坐上偏移
可以通过调整
titleEdgeInsets
、imageEdgeInsets
,控制文字和图片的相对位置,然后通过设置contentEdgeInsets
,调整图片和文字在UIButton中整体的位置~~code:https://github.com/Flying-Einstein/UIButton-