美文网首页
UIButton中Image和Title位置变换

UIButton中Image和Title位置变换

作者: 危险地带_浅笑 | 来源:发表于2018-04-25 17:48 被阅读29次

UIButton是我们iOS里面不可或缺的控件,不知道你是否跟我一样,对他的imageViewtitleLabel的位置产生过困惑。
一般我们需要实现如下几种效果:

image.png

只要稍微做过开发的人都知道利用buttonimageEdgeInsetstitleEdgeInsets进行控制。不知道有没有童鞋在这上面懵逼过...

设置偏移量的方式

UIEdgeInsetsMake(CGFloat top, CGFloat left, CGFloat bottom, CGFloat right)

button的默认样式为左边图,右边文字,

  • imageEdgeInsets这个值top,left,bottom相对于button的偏移量位0,要特别注意的是right是相对右边文字的偏移量为0,它控制着imageView的相对偏移量。
  • titleEdgeInsets这个值top,right,bottom相对于button的偏移量为0,要特别注意的是left是相对左边图片的偏移量为0,它控制着titleLabel的相对偏移量;

偏移的方向,网上一哥们儿用下面这幅图表示:

image.png
翻译成文字:远离你要移动的方向就是正,接近你要移动的方向就是负。(举个例子:left:10-->left:20,left偏移量为+10)

搞懂了这个那么我们就可以写出下面代码了

1. 上图下文字

- (void)verticalTopImageAndBottomTitle:(CGFloat)spacing{
    [self.titleLabel sizeToFit];
    CGFloat imageW = self.imageView.frame.size.width;
    CGFloat imageH = self.imageView.frame.size.height;
    CGFloat labelW = self.titleLabel.frame.size.width;
    CGFloat labelH = self.titleLabel.frame.size.height;
    self.imageEdgeInsets = UIEdgeInsetsMake(0, labelW / 2.0, labelH + spacing, - labelW / 2.0);
    self.titleEdgeInsets = UIEdgeInsetsMake(imageH + spacing, -imageW / 2.0, 0, imageW / 2.0);
}

2.上文字下图

-(void)verticalTopTitleAndBottomImage:(CGFloat)spacing{
    [self.titleLabel sizeToFit];
    CGFloat imageW = self.imageView.frame.size.width;
    CGFloat imageH = self.imageView.frame.size.height;
    CGFloat labelW = self.titleLabel.frame.size.width;
    CGFloat labelH = self.titleLabel.frame.size.height;
    self.imageEdgeInsets = UIEdgeInsetsMake(labelH + spacing, labelW / 2.0, 0, -labelW / 2.0);
    self.titleEdgeInsets = UIEdgeInsetsMake(0, -imageW / 2.0, imageH + spacing, imageW / 2.0);
}

3. 左文字右图

-(void)horizontalLeftTitleAndRightImage:(CGFloat)spacing{
    [self.titleLabel sizeToFit];
    CGFloat imageW = self.imageView.frame.size.width;
    CGFloat labelW = self.titleLabel.frame.size.width;
    self.imageEdgeInsets = UIEdgeInsetsMake(0, labelW, 0, -labelW - spacing);
    self.titleEdgeInsets = UIEdgeInsetsMake(0, -imageW - spacing, 0, imageW);
}

4.左图右文字(默认样式做个偏移量)

-(void)horizontalLeftImageAndRightTitle:(CGFloat)spacing{
    self.imageEdgeInsets = UIEdgeInsetsMake(0, 0, 0, spacing);
    self.titleEdgeInsets = UIEdgeInsetsMake(0, spacing, 0, 0);
}

相关文章

网友评论

      本文标题:UIButton中Image和Title位置变换

      本文链接:https://www.haomeiwen.com/subject/wjuylftx.html