iOS - UIButton的特殊用法

在此主要介绍UIButton的一些特殊用法：UIButton的图片与文字排版，UIButton的UIControlEvents，以及UIButton背景图片设置，至于给UIButton设置frame，UIButtonType之类的基础知识，就不做介绍。

一、UIButton的图片与文字排版

UIButton可以同时设置title和image，但如果不对title和image的位置进行调整，排版会很丑，如下：

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

不作任何处理的效果
上面的排版之所以不好看，那是因为图片与文字靠的太近，** 所以我们要将图片与文字距离拉开些，这里就涉及到UIButton的titleEdgeInsets和imageEdgeInsets属性，这两个属性的默认值为零，**如果我们将代码修改下，效果将很不一样：

    UIButton *btn = [UIButton buttonWithType:UIButtonTypeCustom];
    btn.frame = CGRectMake(90, 180, 100, 40);
    btn.layer.cornerRadius = 20;
    btn.backgroundColor = [UIColor cyanColor];
    [btn setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
    
    [btn setTitle:@"title" forState:UIControlStateNormal];
    [btn setImage:[UIImage imageNamed:@"co_ch_t"] forState:UIControlStateNormal];
    
    btn.titleEdgeInsets = UIEdgeInsetsMake(0.0,  0.0, 0.0,  - 10);
    btn.imageEdgeInsets = UIEdgeInsetsMake(0.0, - 10, 0.0, 0.0);
    
    [self.view addSubview:btn];

变美了~

自然，在开发的过程中，我们会遇到很多不一样的需求，比如图片在文字右边，图片在文字上边，等等，我们都可以通过改变UIButton的titleEdgeInsets和imageEdgeInsets这两个属性来实现。
下面列举一些排版例子：

    // 图片在左边，全部居中
    CGFloat spacing = 20;
    CGSize imageSize = btn0.imageView.frame.size;
    btn0.titleEdgeInsets = UIEdgeInsetsMake(0.0,  0.0, 0.0,  - spacing/2);
    // 对titleEdgeInsets的属性赋值之后，title的宽度可能会变化，所以我们需要在titleEdgeInsets赋值之后去获取titleSize
    CGSize titleSize = btn0.titleLabel.frame.size;
    btn0.imageEdgeInsets = UIEdgeInsetsMake(0.0, - spacing/2, 0.0, 0.0);
    
    // 图片在上边，全部居中
    imageSize = btn1.imageView.frame.size;
    titleSize = btn1.titleLabel.frame.size;
    spacing = 2;
    btn1.titleEdgeInsets = UIEdgeInsetsMake(0.0, - imageSize.width, - (imageSize.height + spacing/2), 0.0);
    titleSize = btn1.titleLabel.frame.size;
    btn1.imageEdgeInsets = UIEdgeInsetsMake(- (titleSize.height + spacing/2), 0.0, 0.0, - titleSize.width);
    
    // 图片在右边，全部居中
    spacing = 20;
    imageSize = btn2.imageView.frame.size;
    btn2.titleEdgeInsets = UIEdgeInsetsMake(0.0, - imageSize.width, 0.0, imageSize.width + spacing/2);
    titleSize = btn2.titleLabel.frame.size;
    btn2.imageEdgeInsets = UIEdgeInsetsMake(0.0, titleSize.width + spacing/2, 0.0, - titleSize.width);
    
    // 图片在右边，文字居中
    imageSize = btn3.imageView.frame.size;
    btn3.titleEdgeInsets = UIEdgeInsetsMake(0.0, - imageSize.width, 0.0, 0.0);
    titleSize = btn3.titleLabel.frame.size;
    btn3.imageEdgeInsets = UIEdgeInsetsMake(0.0, titleSize.width + imageSize.width + spacing, 0.0, - titleSize.width);

效果图

二、UIButton的UIControlEvents

点击UIButton，不仅仅会触发添加在UIButton上的触发事件，还会根据点击动作，手指移开UIButton范围等操作进行响应，就如聊天软件中的录音按钮，根据手指的移动做各种需求处理，在此，就会用到UIButton的UIControlEvents属性：

typedef NS_OPTIONS(NSUInteger, UIControlEvents) {
        // 手指按下按钮之后，在按钮范围内滑动
        // 之前会先响应 UIControlEventTouchDown
        UIControlEventTouchDragInside ,
        
        // 手指按下按钮之后，在按钮范围外滑动
        // 之前会依次先响应 UIControlEventTouchDown，UIControlEventTouchDragInside
        UIControlEventTouchDragOutside ,
        
        // 手指按下按钮的时候触发
        UIControlEventTouchDown ,
        
        // 手指按下按钮之后，在按钮范围内抬起
        // 之前会依次先响应 UIControlEventTouchDown
        UIControlEventTouchUpInside ,
        
        // 手指按下按钮之后，在按钮范围外抬起
        // 之前会依次先响应 UIControlEventTouchDown，UIControlEventTouchDragInside，UIControlEventTouchDragOutside
        UIControlEventTouchUpOutside
    };
    
    // 给btn添加各种UIControlEvents，并添加触发方法，在各个方法做相应操作
    [btn addTarget:self action:@selector(record_btn_dragged:with_event:) forControlEvents:UIControlEventTouchDragInside];
    [btn addTarget:self action:@selector(record_btn_dragged2:with_event:) forControlEvents:UIControlEventTouchDragOutside];
    [btn addTarget:self action:@selector(record_btn_touched_down) forControlEvents:UIControlEventTouchDown];
    [btn addTarget:self action:@selector(record_btn_touched_up:with_event:) forControlEvents:UIControlEventTouchUpInside];
    [btn addTarget:self action:@selector(record_btn_touched_up2:with_event:) forControlEvents:UIControlEventTouchUpOutside];

三、UIButton背景图片设置

UIButton背景图片设置有两种方法，在我上一篇《iOS - 背景图片大小的调整》中有介绍。