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);

这里写图片描述

睡觉不盖被

发布了38 篇原创文章 · 获赞 5 · 访问量 9078

私信关注