iOS - UIButton的重难点使用方法

这篇文章不介绍按钮的基本用法，主要介绍按钮的难点,项目中常会碰到的问题，现在总结出来。

一 . 关于UIButton的title和image位置问题。

    UIButton *btn = [UIButton buttonWithType:UIButtonTypeCustom];
    btn.frame = CGRectMake(90, 180, 100, 40);
    btn.backgroundColor = [UIColor yellowColor];
    [btn setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
    [btn setTitle:@"title" forState:UIControlStateNormal];
    [btn setImage:[UIImage imageNamed:@"button_help_small"] forState:UIControlStateNormal];
    [self.view addSubview:btn];

运行结果

这样的结果不太好看吧。因为图片和文字都紧紧的挨在一起了。所以咱们可以调节两者的距离,下面这两个属性就是调节距离的。

@property(nonatomic)          UIEdgeInsets titleEdgeInsets;                
@property(nonatomic)          UIEdgeInsets imageEdgeInsets;    

然后看我写的代码：

 UIButton *btn = [UIButton buttonWithType:UIButtonTypeCustom];
    btn.frame = CGRectMake(90, 180, 100, 40);
    btn.backgroundColor = [UIColor yellowColor];
    [btn setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
    [btn setTitle:@"title" forState:UIControlStateNormal];
    [btn setImage:[UIImage imageNamed:@"button_help_small"] forState:UIControlStateNormal];
//    UIEdgeInsetsMake(CGFloat top, CGFloat left, CGFloat bottom, CGFloat right)
//    上左下右
    btn.titleEdgeInsets = UIEdgeInsetsMake(0, 20, 10, 0);
    btn.imageEdgeInsets = UIEdgeInsetsMake(0, -20, -10, 0);
    
    [self.view addSubview:btn];

调节后的

根据这个例子，举一反三，你是不是可以让按钮上的图片和文字各种位置摆放，想放哪里放哪里。

二 . 关于UIButton只有图片的问题。

当UIButton在设置背景图片的时候，我们会遇到这样的问题，有时候设计的UI尺寸比较小，那样会导致可点击区域太小，用户体验不好，但设计的UI又不能更改，影响美观，所以这里就涉及到设置UIButton背景图片的两个方法，image和BackgroundImage。image是图片不会被拉伸。BackgroundImage会拉伸。这在项目中看需求用。

    UIButton *btn = [UIButton buttonWithType:UIButtonTypeCustom];
    btn.frame = CGRectMake(90, 180, 100, 40);
    btn.backgroundColor = [UIColor yellowColor];
 // 方法一：该方法不管UIButton设置的尺寸为多大，只居中显示图片的原始尺寸
    // 该方法可以在不改变原始设计UI的尺寸前提下，扩大可点击区域
    [btn setImage:[UIImage imageNamed:@"button_help_small"] forState:UIControlStateNormal];
    [self.view addSubview:btn];

QQ20170218-115704@2x.png

    UIButton *btn = [UIButton buttonWithType:UIButtonTypeCustom];
    btn.frame = CGRectMake(90, 180, 100, 40);
    btn.backgroundColor = [UIColor yellowColor];
    // 方法二：该方法会把图片伸缩至UIButton设置的尺寸大小
    // 如果想让图片不变形，就只能就UIButton的尺寸设置成image的大小
    [btn setBackgroundImage:[UIImage imageNamed:@"button_help_small"] forState:UIControlStateNormal];
    [self.view addSubview:btn];

QQ20170218-120012@2x.png

三、关于UIButton调整内容的属性介绍。

重点来了，通过设置UIButton的contentEdgeInsets属性和UIControl（UIControl是UIButton的父类）的contentVerticalAlignment和contentHorizontalAlignment属性可以将按钮中的内容（图片或者文字或者图片和文字的整体）整体移动。

   
    UIButton *button = [[UIButton alloc] init];
    //设置坐标
    button.frame = CGRectMake(100, 200, 200, 50);
    //设置标题
    [button setTitle:@"呵呵" forState:UIControlStateNormal];
    [button setImage:[UIImage imageNamed:@"button_help_small"] forState:UIControlStateNormal];
    //设置标题颜色
    [button setTitleColor:[UIColor blueColor] forState:UIControlStateNormal];
    //设置背景颜色
    [button setBackgroundColor:[UIColor orangeColor]];
    
    button.contentVerticalAlignment = UIControlContentVerticalAlignmentBottom;
    button.contentHorizontalAlignment = UIControlContentHorizontalAlignmentLeft;
    button.contentEdgeInsets = UIEdgeInsetsMake(0, 10, 0, 0);
    [self.view addSubview:button];

QQ20170218-122554@2x.png

四、关于UIButton文字字体大小。

button.titleLabel.font = [UIFont systemFontOfSize:50];