美文网首页
UIButton设置图片和文字位置

UIButton设置图片和文字位置

作者: 贤宇 | 来源:发表于2017-02-27 18:29 被阅读320次

    开发中经常会遇到左边是图片右边是文字的情况(或者上面是图下面是文字), 这时最好的选择是用UIButton来写, 简单实用.

    知识点:

        // Button 有三个设置内边距的属性,分别是:
    
        // 1.contentEdgeInsets:会影响按钮内部的所有内容(里面的imageView和titleLabel)
        // button.contentEdgeInsets = UIEdgeInsetsMake(10, 100, 0, 0);
    
        // 2.titleEdgeInsets:只影响按钮内部的titleLabel
        // button.titleEdgeInsets = UIEdgeInsetsMake(0, 10, 0, 0);
    
        // 3.imageEdgeInsets:只影响按钮内部的imageView
        // button.imageEdgeInsets = UIEdgeInsetsMake(20, 0, 0, 50);
    
        // EdgeInsets: 内切, 逆时针(上左下右)
    

    举个例子:

        UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
    
        button.backgroundColor = [UIColor lightGrayColor];
        button.imageView.backgroundColor = [UIColor orangeColor];
        button.titleLabel.backgroundColor = [UIColor greenColor];
    
        button.imageView.contentMode = UIViewContentModeScaleAspectFit;
    
        // 内容居左
        button.contentHorizontalAlignment = UIControlContentHorizontalAlignmentLeft;
    
        [button setImage:[UIImage imageNamed:@"select_yes.png"] forState:UIControlStateNormal];
        [button setTitle:@"一人饮酒醉" forState:UIControlStateNormal];
    
        // 文字内边距 设置成距离图片15
        button.titleEdgeInsets = UIEdgeInsetsMake(0, 15, 0, 0);
    
        button.frame = CGRectMake(10, 500, 200, 40);
        [self.view addSubview:button];
    

    效果图:

    效果图.png
    如果要自适应宽度需要这样设置:
        // 自适应宽度好处会消除imageView多余的空隙.
        button.titleEdgeInsets = UIEdgeInsetsMake(0, 15, 0, 0);
        // 设置自适应大小
        CGSize autoSize = CGSizeMake(100, 999);
        CGSize size = [button sizeThatFits:autoSize];
    
        // 宽度需要再加上 15
        button.frame = CGRectMake(10, 500, size.width+15, size.height);
    

    效果图:

    效果图2.png

    补充
    文字和图片在按钮的两边:

    CGFloat width = [UIScreen mainScreen].bounds.size.width;
        
        UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
        [button setTitle:@"背景音乐使用原音" forState:UIControlStateNormal];
        [button setImage:[UIImage imageNamed:@"select_no.png"] forState:UIControlStateNormal];
        button.backgroundColor = [UIColor orangeColor];
        button.frame = CGRectMake(0, 550, width, 30);
        button.titleLabel.backgroundColor = [UIColor redColor];
        button.imageView.backgroundColor = [UIColor greenColor];
    
        button.imageView.contentMode = UIViewContentModeScaleAspectFit;
        
        button.titleEdgeInsets = UIEdgeInsetsMake(0, -width+button.titleLabel.frame.size.width-button.imageView.frame.size.width, 0, 0);
        button.imageEdgeInsets = UIEdgeInsetsMake(0, 0, 0, -width+button.imageView.frame.size.width-button.titleLabel.frame.size.width);
        
        [self.view addSubview:button];
    
    

    效果图

    效果图.png

    相关文章

      网友评论

          本文标题:UIButton设置图片和文字位置

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