美文网首页iOS 控件定制ios开发进阶iOS学习
有关UIButton的UIEdgeInsets那点事儿

有关UIButton的UIEdgeInsets那点事儿

作者: JasonLee宸 | 来源:发表于2017-10-18 15:51 被阅读106次

    UIButton

    UIButton 是iOS控件出现很高的控件,基础的使用方法在此就不一一细说了,接下来讲一下以前看基础文章中没有讲到的一些知识。

    type

    /*
     UIButtonTypeCustom = 0,           自定义button //背景和字体 默认white
     UIButtonTypeSystem                  系统button  //背景 默认white 字体默认blue
     UIButtonTypeDetailDisclosure,     详细说明使用 默认蓝色 可通过tintColor修改颜色
     UIButtonTypeInfoLight,
     UIButtonTypeInfoDark,
     UIButtonTypeContactAdd,           加号按钮 默认蓝色 可通过tintColor修改颜色
     
     UIButtonTypeRoundedRect        圆角
     */
    

    UIEdgeInsets

    在使用button中,有时候需要修改文字边距,此时就需要利用设置titleEdgeInsets。
    此处针对button图文的使用,以下是本人的理解,不对之处请指正。
    图文使用大致分为四种情况:
    1.左图右文
    如果不设置imageEdgeInsets和titleEdgeInsets ,默认即左图右文,会将图片与文本框组合为一个view,中心点与button中心点相同。

    图1.png

    此时我们需要将图文之间添加间隔,space 为 10。


    图2.png

    typedef struct UIEdgeInsets {
    CGFloat top, left, bottom, right;
    } UIEdgeInsets;
    对于图片,left与right发生了变化,基于图1图片的left左移10(右为正方向),right左移10(左为正方向);
    对于文本框,left与right发生了变化,基于图1文本框右移10,right右移10;

    [btn setImageEdgeInsets:UIEdgeInsetsMake(0, -10, 0, 0)];
    [btn setTitleEdgeInsets:UIEdgeInsetsMake(0, 10, 0, -10)];
    

    2.右图左文
    此处需要获取titleLabel和image的size
    btn.titleLabel.intrinsicContentSize
    btn.currentImage.size
    此处介绍intrinsicContentSize– Intrinsic Content Size:固有大小。顾名思义,在AutoLayout中,它作为UIView的属性(不是语法上的属性),意思就是说我知道自己的大小,如果你没有为我指定大小,我就按照这个大小来。

    图3.png
    [btn setImageEdgeInsets:UIEdgeInsetsMake(0, btn.titleLabel.intrinsicContentSize.width+10, 0, -btn.titleLabel.intrinsicContentSize.width-10)];
    [btn setTitleEdgeInsets:UIEdgeInsetsMake(0, -10-btn.currentImage.size.width, 0, btn.currentImage.size.width+10)];
    

    3.上图下文

    图4.png
    [btn setImageEdgeInsets:UIEdgeInsetsMake(-10, btn.titleLabel.intrinsicContentSize.width, btn.titleLabel.intrinsicContentSize.height+10, 0)];
    [btn setTitleEdgeInsets:UIEdgeInsetsMake(0, -btn.currentImage.size.width, -btn.currentImage.size.height-10, 0)];
    

    4.下图上文


    图5.png
    [btn setImageEdgeInsets:UIEdgeInsetsMake(0, btn.titleLabel.intrinsicContentSize.width, -btn.titleLabel.intrinsicContentSize.height-10, 0)];
    [btn setTitleEdgeInsets:UIEdgeInsetsMake(-10, -btn.currentImage.size.width, btn.currentImage.size.height+10, 0)];
    

    以上就是button图文的四种模式。

    另外提一点,当我们在button上设置文字时,尝试

        [btn.titleLabel setFrame:CGRectMake(22, 0, 150, 44)];
        [btn.titleLabel setHidden:NO];
        [btn.titleLabel setText:@"adad"];
    

    这样是不起作用的,
    设置文字还是需要通过以下方法:

        [btn setTitle:@"asdf" forState:UIControlStateNormal];
        [btn setAttributedTitle:(nullable NSAttributedString *) forState:(UIControlState)];
    

    以上是对button使用中的一点认识,请大家多多指教!

    相关文章

      网友评论

      • lawrenceWeiii:有个 Button 的分类库,JKCategories(2k的 star),对 自定义button 的 title 和 image位置做了封装,不错的。
        JasonLee宸:好的,thanks

      本文标题:有关UIButton的UIEdgeInsets那点事儿

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