经常会遇到button中同时存在文字和图片的情况,UI还会标注间距,调来调去的超级抓狂,所以从各种大大们分享的博客扒些资料,自己总结一下,方便理解.
对齐方式
首先是.contentHorizontalAlignment属性,之前很少接触,每次都是根据字体大小算button的frame,设置跟其他控件的间距,但是这样就会出现button的点击区域太小的问题. 通过设置contentHorizontalAlignment是让button内的titleLabel或者ImageView紧贴边框:
UIButton * button = [UIButton buttonWithType:(UIButtonTypeCustom)];
[button setTitle:@"十指恋jing" forState:(UIControlStateNormal)];
button.titleLabel.backgroundColor = [UIColor yellowColor];
button.titleLabel.textAlignment = NSTextAlignmentRight; // 文字在titleLabel中右对齐(并没有看出有什么卵用)
[button setTitleColor:[UIColor blackColor] forState:(UIControlStateNormal)];
button.frame = CGRectMake(50, 300, 300, 40);
button.layer.borderColor = [UIColor blackColor].CGColor;
button.layer.borderWidth = 1;
[self.view addSubview:button];
效果如下:
// 设置button的内容位置。。设置content是title和image一起变化
// 让titleLabel 紧贴button右边框
[button setContentHorizontalAlignment:(UIControlContentHorizontalAlignmentRight)];
/*
UIControlContentHorizontalAlignmentCenter 居中
UIControlContentHorizontalAlignmentLeft 居左
UIControlContentHorizontalAlignmentRight 居右
UIControlContentHorizontalAlignmentFill 充满(但是实际看了下效果跟居左一样,没懂啥情况,欢迎大神解读)
*/
图片和文字共存
这里设置间距用到contentEdgeInsets属性,设置边界值 UIEdgeInsetsMake(CGFloat top, CGFloat left, CGFloat bottom, CGFloat right) // 上,左,下,右
contentEdgeInsets属性改变的为当前位置,是针对它当前的位置起作用的，并不是针对它距离button边框的距离的,举个栗子:在上面的代码中已设置titleLabel居右,此时设置 [button setTitleEdgeInsets:UIEdgeInsetsMake(0, 0, 0, 0 )];并无任何变化,应为所有距当前的位置的偏移量都为0;
[button setTitleEdgeInsets:UIEdgeInsetsMake(0, 0, 0, 10 )];// 此时titleLabel距button的右边距为10
如果只有title，那它上下左右都是相对于button的，image也是一样；如果同时有image和label，那这时候image的上左下是相对于button，右边是相对于label的；title的上右下是相对于button，左边是相对于image的,所以一般情况下button内的titleLAbel在右,imageView在左;
[button setTitle:@"十指恋jing" forState:(UIControlStateNormal)];
[button setImage:[UIImage imageNamed:@"info"] forState:(UIControlStateNormal)];
[button setContentHorizontalAlignment:(UIControlContentHorizontalAlignmentRight)];
[button setTitleEdgeInsets:UIEdgeInsetsMake(0, 0, 0, 20 )]; // 文字距离右边距20
[button setImageEdgeInsets:UIEdgeInsetsMake(0, 0, 0, 50)]; // 图片距离文字50
图片在右 文字在左的情况
[button setTitleEdgeInsets:UIEdgeInsetsMake(0, - button.imageView.frame.size.width - 20, 0, button.imageView.frame.size.width + 20)];
[button setImageEdgeInsets:UIEdgeInsetsMake(0, button.titleLabel.bounds.size.width, 0, -button.titleLabel.bounds.size.width)];
/*
设置右边距增加图片宽度，就使得自己的右边界距离按钮的右边界多了图片的宽度，正好放下图片。
此时，title lable变小了，而title lable的左边界还在原来的位置上，
所以lable的左边界距离按钮的左边界减少图片的宽度，
lable就和原来一样大了，而且左侧起始位置和图片的左侧起始位置相同了。
*/
图片与文字上下放置时与左右类似
设置 contentVerticalAlignment改变UIEdgeInsetsMake(CGFloat top, CGFloat left, CGFloat bottom, CGFloat right)的top 和 bottom即可
下面是关于UIButton中titleLabel与imageView的显示原则
1.当button.width < image.width时，只显示被压缩后的图片，图片是按fillXY的方式压缩。
2.当button.width > image.width，且 button.width < (image.width + text.width)时，图片正常显示，文本被压缩。
3.当button.width > (image.width + text.width),两者并列默认居中显示，可通过button的属性contentHorizontalAlignment改变对齐方式。
