UIButton 图片和标题排版
UIButton *btn = [UIButton buttonWithType:UIButtonTypeCustom];
btn.frame = CGRectMake(100,100,100, 44);
[btn setTitle:@"按钮" forState:UIControlStateNormal];
btn.titleLabel.font=[UIFont systemFontOfSize:20];
[btn setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
NSString *filePath = [[NSBundle mainBundle] pathForResource:@"plus@3x" ofType:@"png"];
[btn setImage:[UIImage imageWithContentsOfFile:filePath] forState:UIControlStateNormal];
[self.view addSubview:btn];
默认显示方式
1.当button.width < imageView.width时,只显示被压缩后的图片,图片是按fillXY的方式压缩。
2.当button.width > imageView.width,且 button.width < (imageView.width + titleLbl.width)时,图片正常显示,文本被压缩。
3.当button.width > (imageView.width + titleLbl.width),两者默认居中显示,可通过button的属性contentHorizontalAlignment改变整体对齐方式。
默认情况下设置图片和标题,图片在左面文字在右边,整体水平居中。
修改文字和图片排版方式
方式1
字左图右
新建UIButton的子类,重写layoutSubviews方法。
-(void)layoutSubviews{
[super layoutSubviews];
CGRect imageRect = self.imageView.frame;
imageRect.size = CGSizeMake(20, 20);
CGRect titleRect = self.titleLabel.frame;
imageRect.origin.x = (self.frame.size.width -imageRect.size.width-titleRect.size.width)/2.0 + titleRect.size.width;
imageRect.origin.y = (self.frame.size.height - 20)/2.0f;
self.imageView.frame = imageRect;
titleRect.origin.x = (self.frame.size.width -imageRect.size.width-titleRect.size.width)/2.0;
titleRect.origin.y = (self.frame.size.height - titleRect.size.height)/2.0f;
self.titleLabel.frame = titleRect;
}
效果图如下
方式2
注:一定要记住imageView和titleLbl移动的时候,都是相对于原来的位置。默认情况下imageView的右边 是相对于titleLbl的左面。titleLbl的左面是相对于imageView的右面。
如果嫌不好计算可将contentHorizontalAlignment和contentVerticalAlignment 设置为靠近一边方便计算。
btn.contentHorizontalAlignment = UIControlContentHorizontalAlignmentLeft;
btn.contentVerticalAlignment = UIControlContentVerticalAlignmentTop;
字左图右
如果需要设置图片在右标题在左,那么imageView的左边相对于button的左边右移labelWidth的距离,imageView的右边相对于label的左边右移labelWidth的距离。
注:当平移时要往同一个方向移动如果不是同一个方向则会相互抵消。
如果水平平移那么left、right必须一负一正。
如果垂直平移那么top、bottom必须一负一正。
top: 为正数:表示向下偏移 为负数:表示向上偏移
left: 为正数:表示向右偏移 为负数:表示向左偏移
bottom: 为正数:表示向上偏移 为负数:表示向下偏移
right: 为正数:表示向左偏移 为负数:表示向右偏移
通过设置imageEdgeInsets 和titleEdgeInsets
btn.imageEdgeInsets = UIEdgeInsetsMake(0,btn.titleLabel.frame.size.width,0,-btn.titleLabel.frame.size.width);
btn.titleEdgeInsets = UIEdgeInsetsMake(0,-btn.imageView.frame.size.width,0,btn.imageView.frame.size.width);
图上字下
首先计算imageView的位置向右移动了多少
然后计算imageView的位置向上移动了多少
然后计算titleLbl的位置向左移动了多少
然后计算titleLbl的位置向下移动了多少
CGFloat imageOffsetX = (btn.imageView.frame.size.width + btn.titleLabel.frame.size.width)/2 - btn.imageView.frame.size.width/2;
CGFloat imageOffsetY = btn.imageView.frame.size.height/2;
CGFloat titleOffsetX = (btn.imageView.frame.size.width + btn.titleLabel.frame.size.width/2) - (btn.imageView.frame.size.width + btn.titleLabel.frame.size.width)/2;
CGFloat titleOffsetY = btn.titleLabel.frame.size.height/2;
btn.imageEdgeInsets = UIEdgeInsetsMake(-imageOffsetY, imageOffsetX, imageOffsetY, -imageOffsetX);
btn.titleEdgeInsets = UIEdgeInsetsMake(titleOffsetY, -titleOffsetX, -titleOffsetY, titleOffsetX);