美文网首页iosJC专题首页投稿(暂停使用,暂停投稿)
UIButton 根据自己的需求对内部控件重新布局

UIButton 根据自己的需求对内部控件重新布局

作者: 以技术之名 | 来源:发表于2016-03-07 16:29 被阅读562次

    做公司项目的时候有个需求,做签到功能的时候,无论点击图标还是点击签到的文字,都要相应签到这个功能,文字和图片要同时有点击效果。试了很多方法效果都不是太好~~最后对button重新布局才满足产品经理的要求。

    UIButton显示问题
    UIButton* btn = [UIButtonbuttonWithType:UIButtonTypeCustom];
    btn.frame = CGRectMake(20,100,200,30);
    btn.background =Color[UIColorcyanColor];
    btn.titleLabel.backgroundColor= [UIColorblackColor];
    

    这几行代码实现的效果是



    可见,即便设置了label的背景颜色也没有什么改变,难道Button内部的控件是隐藏不见得的?且慢,加上下面一行代码

    [btn setTitle:@"你好"forState:UIControlStateNormal];
    

    效果就变成接下来的样子



    很明显,只有Label的内容不为空的时候,才有frame;那么如果加上下面一段代码

    btn.imageView.backgroundColor= [UIColorredColor]; 
    [btn setImage[UIImageimageNamed:@"rechargeLine@2x.png"]forState:UIControlStateNormal];
    

    效果是什么样子呢?



    注意是setImage而不是setBackgroundImage,可以看到,Imageview和Label是左右布局的,而不是我想象中的上下布局。因为我给的图片比较长,可以看到UIImageVIew会根据图片的大小自动调整其frame值,在Buttton的frame范围内,尽量调整到图片本身的大小,如果图片的width超过了Button的witdth,图片被压缩,label内容无法显示。其实这两个控件在Button内部可以看成一个整体,默认情况下,如果这两个控件的总frame的大小(比如width)小于Button的frame,那么它们在Button的内部就是居中显示的。

    [btn setBackgroundImage:[UIImageimageNamed:@"rechargeLine@2x.png"]forState:UIControlStateNormal];
    

    如果换成setBackgroundImage会有什么效果呢?



    估计大家知道这两种设置图片方式之间的区别了.

    改变UIButton里UIImageView和UILabel的布局

    UIButton里面有几个属性,contentEdgeInsets
    titleEdgeInsetsimageEdgeInsets,通过设置UIImageView和UILabel的UIEdgeInsets可以改变Button内部的相对布局。

    UIButton的.m文件可以看到:

    
    @property(nonatomic)    UIEdgeInsets contentEdgeInsets UI_APPEARANCE_SELECTOR; // default is UIEdgeInsetsZero
    
    

    contentEdgeInsets默认情况下为UIEdgeInsetsZero
    titleEdgeInsetsimageEdgeInsets,也是如此。

    仅设置titleEdgeInsets的值

    btn.titleEdgeInsets = UIEdgeInsetsMake(0, 10, 0,0 );
    

    文字向右偏移10sp

    仅设置imageEdgeInsets的值

    btn.imageEdgeInsets = UIEdgeInsetsMake(0, 0, 0, 50);
    

    图片向左偏移50sp

    仅设置contentEdgeInsets的值

      btn.contentEdgeInsets = UIEdgeInsetsMake(-15, -150, 0, 0);
    

    整体向坐上偏移
    可以通过调整titleEdgeInsetsimageEdgeInsets,控制文字和图片的相对位置,然后通过设置contentEdgeInsets,调整图片和文字在UIButton中整体的位置~~
    code:https://github.com/Flying-Einstein/UIButton-

    相关文章

      网友评论

        本文标题:UIButton 根据自己的需求对内部控件重新布局

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