关于UIButton的UIEdgeInsets属性

作者: 啃手高手 | 来源:发表于2016-05-29 14:09 被阅读5609次

UIButton共有三个相关属性:
1.contentEdgeInsets
2.titleEdgeInsets
3.imageEdgeInsets
本文将一一介绍.

UIEdgeInsets

先来看看这个UIEdgeInsets:

typedef struct UIEdgeInsets {
    CGFloat top, left, bottom, right;  // specify amount to inset (positive) for each of the edges. values can be negative to 'outset'
} UIEdgeInsets;

原来是结构体,它的四个参数:top, left, bottom, right, 分别表示距离上边界,左边界,下边界,右边界的位移,默认值均为0。

contentEdgeInsets

我们都知道,UIButton按钮可以只设置一个UILabel或者一个UIImageView,还可以同时具有UILabel和UIImageView;如果给按钮设置contentEdgeInsets属性,就是按钮的内容整体(包含UILabel和UIImageView)进行偏移。
按钮内容整体向右下分别移动10像素:

Button.contentEdgeInsets = UIEdgeInsetsMake(10, 10, -10, -10);

titleEdgeInsets & imageEdgeInsets

这两个属性的效果是相辅相成的。如果给一个按钮同事设置了title和image,他们默认的状态是图片在左,标题在右,而且image和title之间没有空隙;那就这就引出一个问题,title和image的UIEdgeInsets属性分别的相对于谁而言的?

真相只有一个:
image的UIEdgeInsets属性的top,left,bottom都是相对于按钮的,right是相对于title;
title的UIEdgeInsets属性的top,bottom,right都是相对于按钮的,left是相对于image;

知道真相的你不知道有没有眼泪流下来,怪不得之前怎么设置都不是想要的结果,原来相对于谁的位移压根没有搞清楚。现在既然搞清楚了,我们来试一下:

title在左,image在右:

//拿到title和image的大小:
CGSize titleSize = self.pureButton.titleLabel.bounds.size;
CGSize imageSize = self.pureButton.imageView.bounds.size;
//分别设置偏移量:记住偏移量是位移
self.pureButton.titleEdgeInsets = UIEdgeInsetsMake(0, -imageSize.width, 0, imageSize.width);
self.pureButton.imageEdgeInsets = UIEdgeInsetsMake(0, titleSize.width, 0, -titleSize.width);

image在上,title在下:

//图片 向右移动的距离是标题宽度的一半,向上移动的距离是图片高度的一半
//标题 向左移动的距离是图片宽度的一半,向下移动的距离是标题高度的一半

self.pureButton.imageEdgeInsets = UIEdgeInsetsMake(-imageSize.height/2, titleSize.width/2, imageSize.height/2, -titleSize.width/2);
self.pureButton.titleEdgeInsets = UIEdgeInsetsMake(titleSize.height/2, -imageSize.width/2, -titleSize.height/2, imageSize.width/2);

最后

这篇没有Demo...( 太简单了)

相关文章

网友评论

  • 785c52f271d5:怎么感觉自相矛盾
    image的UIEdgeInsets属性的top,left,bottom都是相对于按钮的,right是相对于title;
    //分别设置偏移量:记住偏移量是位移
    self.pureButton.titleEdgeInsets = UIEdgeInsetsMake(0, -imageSize.width, 0, imageSize.width);
    如果按照上面规则应该是:
    self.pureButton.titleEdgeInsets = UIEdgeInsetsMake(0, -titleSize.width, 0, imageSize.width);
  • js_846865:CGSize titleSize = self.pureButton.titleLabel.bounds.size;
    CGSize imageSize = self.pureButton.imageView.bounds.size;
    为什么拿到的titleSize返回的是(0,0)呢,最后出来的布局就不正确了
    js_846865:知道了,在iOS8之后self.pureButton.titleLabel.bounds.size确实是返回(0,0)的,改为self.pureButton.titleLabel.intrinsicContentSize就好了
  • 5b38959bd283:设置image在上,title在下时
    self.pureButton.imageEdgeInsets = UIEdgeInsetsMake(-imageSize.height, 0, 0, -titleSize.width);
    self.pureButton.titleEdgeInsets = UIEdgeInsetsMake(0, -imageSize.width, -titleSize.height,0);
    为什么这样写也可以,不会被压缩吗(我自己尝试了一遍不会)
  • 孙好运:有人遇到过 加载的时候出现一个位置改变的动画吗?
  • 康小曹:更准确点应该是imageview里面的img.size吧?imageview如果因为size被压缩后,根据imageview.size设置insets就会不准确吧?
  • Code_Ninja:见过的最清晰最容易记忆的解释了,比苹果官方文档解释的好。:+1:
  • lesmiserables0:真相只有一个:
    image的UIEdgeInsets属性的top,left,bottom都是相对于按钮的,right是相对于title;
    image的UIEdgeInsets属性的top,bottom,right都是相对于按钮的,left是相对于image;
    打错了吧。。。
    啃手高手:@lesmiserables0 心细如你,谢谢提醒,手比心。
  • dlxfly:label 是不是没有这个属性
    啃手高手:@dlxfly 没有
  • 9c08ecd184d2:知道真相的你不知道有没有眼泪流下来
  • FengxinLi:请问那如果单独是image 或者title 那就不需要设置刚才那个,只需要设置本身的titleEdgeInsets
    和imageEdgeInsets?
    FengxinLi:@Goyakod 好的 谢谢
    啃手高手:@Fengxinliju 嗯,这种情况也可以直接设置content 效果都是一样的
  • da27c260cc85:设置edge时候,是否需要把按钮变大一些,以免遮挡了内容
    啃手高手:@一号线 自定义高度也可以改
    一号线:@Goyakod 假如自定tabbar时,tabbar高度只有49,这样设置按钮之后 按钮的图片都超出tabbar咯!!
    啃手高手:@ArthurChi 视图的masktobounce 属性默认是No,也就是只要别多此一举,遮挡不住的
  • 魏天晨:最后知道真相的我眼泪流下来
    啃手高手:@魏天晨 哈哈哈哈哈

本文标题:关于UIButton的UIEdgeInsets属性

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