美文网首页iOS-UI扩展
UIButton 的edgeInsets研究

UIButton 的edgeInsets研究

作者: 齐滇大圣 | 来源:发表于2014-11-20 23:30 被阅读3015次

    UIButton内有两个控件titleLabel和imageView,可以用来显示一个文本和图片,这里的图片区别于背景图片。给UIButton设置了title和image后,它们会图片在左边,文本在图片右边显示。它们两个做为一个整体依赖于button的
    contentHorizontalAlignment居左居右或居中显示。(默认是居中)

    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改变对齐方式。

    4. 想两改变两个子控件的显示位置,可以分别通过setTitleEdgeInsets和setImageEdgeInsets来实现。 需要注意的是,对titleLabel和imageView设置偏移,是针对它当前的位置起作用的,并不是针对它距离button边框的距离的。
      看到网上很多说 UIEdgeInsetsMake ( CGFloat top, CGFloat left, CGFloat bottom, CGFloat right ); 构造出,分别表示其中的内容/标题/图片离各边的距离。刚开始搞的很郁闷不知道为什么总是设置不对。可能是我理解错了吧,需要有空在看一下官方文档了解一下UIEdgeInsetsMake

    当第三种情况的时候,button的contentHorizontalAlignment不同,我们设置UIEdgeInsetsMake的值也是不一样的

    button:width=150 image:width=24 label:width=102

    1.button.contentHorizontalAlignment=UIControlContentHorizontalAlignmentCenter;时 image离左边的距离为(button.width-image.width-label.width)/2 = 12, 那么我们设置
    [btn setImageEdgeInsets:UIEdgeInsetsMake(0, -12, 0, 0)];其实图片只向左移了6。
    当[btn setImageEdgeInsets:UIEdgeInsetsMake(0, -24, 0, 0)];或
    [btn setImageEdgeInsets:UIEdgeInsetsMake(0, -12, 0, 12)];
    图片才向左移了12
    所以当button的对齐方式为居中时,对应方向偏移的距离要乘2;

    UIEdgeInsetsMake(0, -12, 0, 0) UIEdgeInsetsMake(0, -12, 0, 12)

    2.button.contentHorizontalAlignment=UIControlContentHorizontalAlignmentLeft;时 image离左边的距离为0,label离左边的距离为image.width=24;
    设置[btn setImageEdgeInsets:UIEdgeInsetsMake(0, 24, 0, 0)];
    [btn setTitleEdgeInsets:UIEdgeInsetsMake(0, 24, 0, 0)];
    图片和文字都正确的向右移动了24距离,而不用乘2

    UIControlContentHorizontalAlignmentLeft btn setImageEdgeInsets:UIEdgeInsetsMake(0, 24, 0, 0)

    注意:位置的偏移是按最初的原始坐标来算的,比如情况2图片的原始坐标为(0,0),title的原始坐标为(24,0),偏移一次过后第二次偏移也是按照那个原始坐标来算,而不是第一次偏移后的那个坐标

    我简单了写了个uibutton的分类,能简单的设置图片离左边的距离,和设置文字居中。
    github:UIButtonDemo

    相关文章

      网友评论

      本文标题:UIButton 的edgeInsets研究

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