2.4 按钮控件——UIButton

对于一个应用App来说，展示和交互就是其生命。UILabel控件可以说是UIKit框架中最简单基础的显示控件，与之对应的UIButton 控件是UIKit 框架中最简单基础的交互控件。UIButton 通常又被称为按钮控件，它的确也发挥着一个按钮的功能，可以监听到用户在屏幕视图上的多种手势操作。

2.4.1 创建一个按钮来改变屏幕颜色

通过Xcode创建一个名为UIButtonTest的工程，在ViewController.m的viewDidLoad方法中添加如下代码。

        - (void)viewDidLoad {
            [super viewDidLoad];
            UIButton * button = [UIButton buttonWithType:UIButtonTypeSystem];
            button.frame = CGRectMake(40, 100, 240, 30);
            button.backgroundColor = [UIColor redColor];
            [button setTitle:@"点我一下" forState:UIControlStateNormal];
            [button addTarget:self action:@selector(changeColor) forControlEvents:
    UIControlEventTouchUpInside];
            [self.view addSubview:button];
        }

一般会通过UIButton控件的类方法buttonWithType：来进行按钮控件的初始化，这里传入一个UIButtonType类型的枚举参数来确定创建的UIButton控件的风格，可用枚举值及意义如下：

        typedef NS_ENUM(NSInteger, UIButtonType) {
            UIButtonTypeCustom = 0,             // 自定义类型
            UIButtonTypeSystem ,                // 标准的系统类型
            UIButtonTypeDetailDisclosure,       // 详情按钮类型
            UIButtonTypeContactAdd,             // 添加按钮类型
        };

不同的风格枚举创建出来的按钮样式如图2-11~图2-14所示。

图2-11 UIButtonTypeCustom

图2-12 UIButtonTypeSystem

图2-13 UIButtonTypeDetailDisclosure

图2-14 UIButtonTypeContactAdd

UIButton控件也包括背景色、字体颜色、字体、单击状态等属性，Custom风格则是将这些属性全部采用默认值，需要开发者自行进行设置，System 风格则是系统定义好的一组属性设置的风格，DetailDisclosure 风格会在左边显示一个详情小icon, ContactAdd 风格则是在按钮左边显示一个添加小icon。

回到上面的代码，setTitle:forState：方法有两个参数，第一个设置了按钮的标题文字，第二个参数则是设置显示此标题文字时的按钮状态，UIControlState 中枚举了许多用于交互控件的状态定义，常用如下所示：

        typedef NS_OPTIONS(NSUInteger, UIControlState) {
            UIControlStateNormal      = 0,              //正常状态
            UIControlStateHighlighted  = 1 << 0,        //高亮状态
            UIControlStateDisabled    = 1 << 1,         //不可用状态
            UIControlStateSelected    = 1 << 2,         // 选中状态
        };

上面的枚举中，Normal状态是按钮的初始状态，此时并没有进行任何交互操作，Highlighted状态为高亮状态，即当用户手指单击到按钮但并没有抬起时的状态，Disabled的状态为不可用状态，此时用户的单击操作将无效，Selected为选中状态，用于一些充当切换开关的按钮。

UIButton控件的核心功能是进行用户交互，通过addTarget:action:forControlEvents：方法进行触发方法的添加，这个方法需要3个参数，第1个参数为执行此触发方法的对象，一般会填写当前类对象self，第2个参数为对应的方法，第3个参数为触发方法的条件，这里需要传入一个UIControlEvents的枚举对象，其中常用枚举值的意义如下所示：

        typedef NS_OPTIONS(NSUInteger, UIControlEvents) {
            UIControlEventTouchDown,        // 用户手指按下时触发方法
            UIControlEventTouchDownRepeat,  // 用户多次重复按下时触发
            UIControlEventTouchDragInside,  // 用户在控件范围内进行拖滑移动时触发
            UIControlEventTouchDragOutside, //用户在控件范围内按下并且拖滑到控件范围外时
                                              触发
            UIControlEventTouchDragEnter,   //用户手指拖动进控件范围后触发
            UIControlEventTouchDragExit     //用户手指拖动结束时触发，
            UIControlEventTouchUpInside     //用户在控件范围内按下并且在范围内抬起触发，
                                              即单击
            UIControlEventTouchUpOutside ,  //用户在控件范围内按下并在范围外抬起触发
            UIControlEventTouchCancel,      //单击事件被取消时触发
            UIControlEventValueChanged,     //控件的value值改变时触发
        };

上面的这些枚举选项决定了触发交互的用户操作行为。

下面是实现changeColor触发方法的示例。

        -(void)changeColor{
            self.view.backgroundColor = [UIColor colorWithRed:arc4random()%255/25
    5.0 green:arc4random()%255/255.0 blue:arc4random()%255/255.0 alpha:1];
        }

changeColor方法中使用了通过RGBA方式来创建颜色对象，前3个参数分别设置了颜色红、绿、蓝3色值，第4个参数设置了颜色的透明度值，每个参数的取值都为0~1之间的浮点值。

运行工程，单击视图上的按钮，可以看到视图颜色随机切换的霓虹效果。

2.4.2 更加多彩的UIButton控件

在2.4.1节的例子中，只是创建了一个未加任何修饰的按钮控件，可以通过一些UIButton的一些属性，为其添加背景或者内容图片来创建更多彩的按钮。

首先，先向工程项目中添加一张图片，在工程的导航窗口部分中单击Assets.xcassets包文件，选择一张图片将其拖入素材区，如图2-15所示。

图2-15 向工程中添加图片素材

通过修改为下面的代码来对按钮控件进行相关设置：

        UIButton * button = [UIButton buttonWithType:UIButtonTypeCustom];
        [button setBackgroundImage:[UIImage imageNamed:@"image"] forState:UIContr
    olStateNormal];

运行工程，会看到如图2-16所示，按钮被添加上了图片背景。

图2-16 按钮添加背景图片

可以发现，背景图片的效果是当图片作为背景时，按钮标题将显示在图片层之上，UIButon中还有一个方法用于设置图片为内容图片，这种情况下，图片将和标题并列显示，代码如下所示。

        [button setImage:[UIImage imageNamed:@"image"] forState:UIControlStateNor
    mal];

效果如图2-17所示。

图2-17 按钮添加内容图片

在图2-17中可以看到，图片和文字是左右并排排列并且共同居中显示的。在很多时候，开发者会需要上下排列或者其他位置排列的布局方式，UIButton 类中也提供了接口供开发者进行内容、图片和文字的位置设置，示例代码如下：

          [button setContentEdgeInsets:UIEdgeInsetsMake(0, 0, 0, 0)];
          [button setImageEdgeInsets:UIEdgeInsetsMake(0, 0, 0, 0)];
          [button setTitleEdgeInsets:UIEdgeInsetsMake(0, 0, 0, 0)];

setContentEdgeInsets：方法用于设置整体内容的区域偏移量，UIEdgeInsetsMake()方法中的4个参数分别代表上、左、下、右4个方向的偏移量。setImageEdgeInsets：方法只设置内容图片的位置偏移量，setTitleEdgeInsets：方法只设置内容标题的位置偏移量。

上一章目录下一章