UIButton 按钮

前言

  • Objective-C

    1
    NS_CLASS_AVAILABLE_IOS(2_0) @interface UIButton : UIControl <NSCoding>
  • Swift

    1
    @available(iOS 2.0, *) public class UIButton : UIControl, NSCoding

1、UIButton 的创建

  • Objective-C

    1
    2
    3
    4
    5
    // 实例化 button 对象
    UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];

    // 将 button 添加到 window
    [self.view addSubview:button];
  • Swift

    1
    2
    3
    4
    5
    // 实例化 button 对象
    let button: UIButton = UIButton(type: .Custom)

    // 将 button 添加到 window
    self.view.addSubview(button)

2、UIButton 的设置

  • Objective-C

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    // 设置 button 类型
    /*
    UIButtonTypeCustom = 0, // 定制按钮,不带图标(常加载图片),默认文字颜色为白色,无触摸时的高亮效果
    UIButtonTypeSystem // 不带图标,默认文字颜色为蓝色,有触摸时的高亮效果
    UIButtonTypeDetailDisclosure, // “!” 图标按钮,默认文字颜色为蓝色,有触摸时的高亮效果
    UIButtonTypeInfoLight, // “!” 图标按钮,默认文字颜色为蓝色,有触摸时的高亮效果
    UIButtonTypeInfoDark, // “!” 图标按钮,默认文字颜色为蓝色,有触摸时的高亮效果
    UIButtonTypeContactAdd, // “+” 图标按钮,默认文字颜色为蓝色,有触摸时的高亮效果
    UIButtonTypeRoundedRect = UIButtonTypeSystem,

    [[UIButton alloc] init] 方式创建的 button 为 UIButtonTypeCustom 类型。
    StoryBoard 创建的 button 默认为 UIButtonTypeSystem 类型。
    */
    UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];

    // 设置 frame
    button.frame = CGRectMake(10, 100, 110, 50);

    // 设置内边距大小
    /*
    设置的内边距范围内不会显示内容
    */

    // 内容内边距(标题文字和图片)
    button.contentEdgeInsets = UIEdgeInsetsMake(20, 20, 10, 10);

    // 标题文字内边距
    button.titleEdgeInsets = UIEdgeInsetsMake(40, 20, 10, 10);

    // 图片内边距
    button.imageEdgeInsets = UIEdgeInsetsMake(20, 10, 10, 10);

    // 背景颜色
    /*
    默认为透明色(clearColor)
    */
    button.backgroundColor = [UIColor grayColor];

    // 设置按钮的文字
    /*
    UIControlStateNormal = 0, // 未选中状态,常规状态
    UIControlStateHighlighted = 1 << 0, // 高亮状态,点击状态
    UIControlStateDisabled = 1 << 1, // 禁用状态
    UIControlStateSelected = 1 << 2, // flag usable by app (see below),选中状态
    UIControlStateFocused NS_ENUM_AVAILABLE_IOS(9_0) = 1 << 3,
    // Applicable only when the screen supports focus
    UIControlStateApplication = 0x00FF0000, // additional flags available for application use
    UIControlStateReserved = 0xFF000000 // flags reserved for internal framework use
    */
    [button setTitle:@"普通状态" forState:UIControlStateNormal];

    // 设置文字颜色
    [button setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];

    // 设置文字阴影颜色
    [button setTitleShadowColor:[UIColor yellowColor] forState:UIControlStateNormal];

    // 修改文字字体
    button.titleLabel.font = [UIFont systemFontOfSize:30]; // 普通
    button.titleLabel.font = [UIFont boldSystemFontOfSize:30]; // 加粗
    button.titleLabel.font = [UIFont italicSystemFontOfSize:30]; // 斜体(对中文无效)
    button.titleLabel.font = [UIFont fontWithName:@"Zapfino" size:15]; // 设置为指定字体类型的文字

    // 修改文字水平对齐方式
    /*
    UIControlContentHorizontalAlignmentCenter = 0, // 居中
    UIControlContentHorizontalAlignmentLeft = 1, // 左对齐
    UIControlContentHorizontalAlignmentRight = 2, // 右对齐
    UIControlContentHorizontalAlignmentFill = 3, // 分散对齐
    */
    button.contentHorizontalAlignment = UIControlContentHorizontalAlignmentCenter;

    // 修改文字垂直对齐方式
    /*
    UIControlContentVerticalAlignmentCenter = 0, // 居中
    UIControlContentVerticalAlignmentTop = 1, // 上对齐
    UIControlContentVerticalAlignmentBottom = 2, // 下对齐
    UIControlContentVerticalAlignmentFill = 3, // 分散对齐
    */
    button.contentVerticalAlignment = UIControlContentVerticalAlignmentCenter;

    // 设置内部的小图片
    /*
    图片将会以原始比例显示,button 上的图片和文字可以同时添加
    */
    [button setImage:[UIImage imageNamed:@"hehe.png"] forState:UIControlStateNormal];

    // 设置背景图片
    /*
    图片将会填充整个背景
    为了保证高亮状态下的图片正常显示,必须设置按钮的 type 为 custom
    */
    [button setBackgroundImage:[UIImage imageNamed:@"pic1.png"] forState:UIControlStateNormal];

    // 设置图片不变暗
    /*
    在未设置触摸状态图片时,触摸状态或禁用状态下图片会变暗
    */

    // 触摸状态时图标不变暗
    button.adjustsImageWhenHighlighted = NO;

    // 禁用状态时图标不变暗
    button.adjustsImageWhenDisabled = YES;

    // 设置 button 的激活与失效状态
    /*
    YES 激活状态,默认状态,NO 失效状态(不可点击)
    */
    button.enabled = YES;

    // 设置 butotn 的隐藏与显示状态
    /*
    YES 隐藏状态,NO 显示状态,默认状态
    */
    button.hidden = YES;

    // 设置 butotn 的选中状态
    /*
    YES 选中,NO 未选中
    */
    button.selected = YES;

    // 获取 butotn 当前的选中状态
    BOOL selected = button.selected;

    // readonly 只读属性

    NSString *title = button.currentTitle; // 获取按钮当前的标题
    NSAttributedString *attributedTitle = button.currentAttributedTitle; // 获取按钮当前的标题属性
    UIColor *titleColor = button.currentTitleColor; // 获取按钮当前的标题颜色
    UIColor *shadowColor = button.currentTitleShadowColor; // 获取按钮当前的标题阴影颜色
    UIImage *currentImage = button.currentImage; // 获取按钮当前的图片
    UIImage *backgroundImage = button.currentBackgroundImage; // 获取按钮当前的背景图片
    NSString *title1 = [button titleForState:UIControlStateNormal]; // 获取按钮指定状态的文字

    // 获取按钮指定状态的标题属性
    NSAttributedString *attributedTitle1 = [button attributedTitleForState:UIControlStateNormal];

    // 获取按钮指定状态的标题颜色
    UIColor *titleColor1 = [button titleColorForState:UIControlStateNormal];

    // 获取按钮指定状态的标题阴影颜色
    UIColor *shadowColor1 = [button titleShadowColorForState:UIControlStateNormal];

    // 获取按钮指定状态的图片
    UIImage *currentImage1 = [button imageForState:UIControlStateNormal];

    // 获取按钮指定状态的背景图片
    UIImage *backgroundImage1 = [button backgroundImageForState:UIControlStateNormal];

    // 设置 button 点击触发事件
    /*
    UIControlEventTouchDown = 1 << 0, // on all touch downs
    UIControlEventTouchDownRepeat = 1 << 1, // on multiple touchdowns (tap count > 1)
    UIControlEventTouchDragInside = 1 << 2,
    UIControlEventTouchDragOutside = 1 << 3,
    UIControlEventTouchDragEnter = 1 << 4,
    UIControlEventTouchDragExit = 1 << 5,
    UIControlEventTouchUpInside = 1 << 6,
    UIControlEventTouchUpOutside = 1 << 7,
    UIControlEventTouchCancel = 1 << 8,

    UIControlEventValueChanged = 1 << 12, // sliders, etc.
    UIControlEventPrimaryActionTriggered NS_ENUM_AVAILABLE_IOS(9_0) = 1 << 13,
    // semantic action: for buttons, etc.

    UIControlEventEditingDidBegin = 1 << 16, // UITextField
    UIControlEventEditingChanged = 1 << 17,
    UIControlEventEditingDidEnd = 1 << 18,
    UIControlEventEditingDidEndOnExit = 1 << 19, // 'return key' ending editing

    UIControlEventAllTouchEvents = 0x00000FFF, // for touch events
    UIControlEventAllEditingEvents = 0x000F0000, // for UITextField
    UIControlEventApplicationReserved = 0x0F000000, // range available for application use
    UIControlEventSystemReserved = 0xF0000000, // range reserved for internal framework use
    UIControlEventAllEvents = 0xFFFFFFFF
    */
    [button addTarget:self action:@selector(buttonClick:) forControlEvents:UIControlEventTouchUpInside];
  • Swift

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    // 设置 button 类型
    /*
    case Custom // 定制按钮,不带图标(常加载图片),默认文字颜色为白色,无触摸时的高亮效果
    case System // 不带图标,默认文字颜色为蓝色,有触摸时的高亮效果

    case DetailDisclosure // “!” 图标按钮,默认文字颜色为蓝色,有触摸时的高亮效果
    case InfoLight // “!” 图标按钮,默认文字颜色为蓝色,有触摸时的高亮效果
    case InfoDark // “!” 图标按钮,默认文字颜色为蓝色,有触摸时的高亮效果
    case ContactAdd // “+” 图标按钮,默认文字颜色为蓝色,有触摸时的高亮效果

    UIButton() 方式创建的 button 为 Custom 类型。
    StoryBoard 创建的 button 默认为 System 类型。
    */
    let button: UIButton = UIButton(type: .Custom)

    // 设置 frame
    button.frame = CGRectMake(10, 100, 110, 50)

    // 设置内边距大小
    /*
    设置的内边距范围内不会显示内容
    */

    // 内容内边距(标题文字和图片)
    button.contentEdgeInsets = UIEdgeInsetsMake(20, 20, 10, 10)

    // 标题文字内边距
    button.titleEdgeInsets = UIEdgeInsetsMake(40, 20, 10, 10)

    // 图片内边距
    button.imageEdgeInsets = UIEdgeInsetsMake(20, 10, 10, 10)

    // 背景颜色
    /*
    默认为透明色(clearColor)
    */
    button.backgroundColor = UIColor.grayColor()

    // 设置按钮的文字
    /*
    Normal // 普通状态,未选中状态
    Highlighted // used when UIControl isHighlighted is set,高亮状态,点击状态
    Disabled // 禁用状态
    Selected // flag usable by app (see below),选中状态

    @available(iOS 9.0, *)
    Focused // Applicable only when the screen supports focus
    Application // additional flags available for application use
    Reserved // flags reserved for internal framework use
    */
    button.setTitle("普通状态", forState: .Normal)

    // 设置文字颜色
    button.setTitleColor(UIColor.blackColor(), forState: .Normal)

    // 设置文字阴影颜色
    button.setTitleShadowColor(UIColor.yellowColor(), forState: .Normal)

    // 修改文字字体
    button.titleLabel?.font = UIFont.systemFontOfSize(30) // 普通
    button.titleLabel?.font = UIFont.boldSystemFontOfSize(30) // 加粗
    button.titleLabel?.font = UIFont.italicSystemFontOfSize(30) // 斜体(对中文无效)
    button.titleLabel?.font = UIFont(name: "Zapfino", size: 15) // 设置为指定字体类型的文字

    // 修改文字水平对齐方式
    /*
    case Center // 居中
    case Left // 左对齐
    case Right // 右对齐
    case Fill // 分散对齐
    */
    button.contentHorizontalAlignment = .Center

    // 修改文字垂直对齐方式
    /*
    case Center // 居中
    case Top // 上对齐
    case Bottom // 下对齐
    case Fill // 分散对齐
    */
    button.contentVerticalAlignment = .Center

    // 设置内部的小图片
    /*
    图片将会以原始比例显示,button 上的图片和文字可以同时添加
    */
    button.setImage(UIImage(named: "hehe.png"), forState: .Normal)

    // 设置背景图片
    /*
    图片将会填充整个背景
    为了保证高亮状态下的图片正常显示,必须设置按钮的 type 为 custom
    */
    button.setBackgroundImage(UIImage(named: "pic1.png"), forState: .Normal)

    // 设置图片不变暗
    /*
    在未设置触摸状态图片时,触摸状态或禁用状态下图片会变暗
    */

    // 触摸状态时图标不变暗
    button.adjustsImageWhenHighlighted = false

    // 禁用状态时图标不变暗
    button.adjustsImageWhenDisabled = false

    // 设置 button 的激活与失效状态
    /*
    true 激活状态,默认状态,false 失效状态(不可点击)
    */
    button.enabled = true

    // 设置 butotn 的隐藏与显示状态
    /*
    true 隐藏状态,false 显示状态,默认状态
    */
    button.hidden = true

    // 设置 butotn 的选中状态
    /*
    true 选中,false 未选中
    */
    button.selected = true

    // 获取 butotn 当前的选中状态
    let selected:Bool = button.selected

    // readonly 只读属性

    let title: String? = button.currentTitle // 获取按钮当前的标题
    let attributedTitle: NSAttributedString? = button.currentAttributedTitle // 获取按钮当前的标题属性
    let titleColor: UIColor = button.currentTitleColor // 获取按钮当前的标题颜色
    let shadowColor: UIColor? = button.currentTitleShadowColor // 获取按钮当前的标题阴影颜色
    let currentImage: UIImage? = button.currentImage // 获取按钮当前的图片
    let backgroundImage: UIImage? = button.currentBackgroundImage // 获取按钮当前的背景图片

    // 获取按钮指定状态的文字
    let title1: String? = button.titleForState(.Normal)

    // 获取按钮指定状态的标题属性
    let attributedTitle1: NSAttributedString? = button.attributedTitleForState(.Normal)

    // 获取按钮指定状态的标题颜色
    let titleColor1: UIColor? = button.titleColorForState(.Normal)

    // 获取按钮指定状态的标题阴影颜色
    let shadowColor1: UIColor? = button.titleShadowColorForState(.Normal)

    // 获取按钮指定状态的图片
    let currentImage1: UIImage? = button.imageForState(.Normal)

    // 获取按钮指定状态的背景图片
    let backgroundImage1: UIImage? = button.backgroundImageForState(.Normal)

    // 设置 button 点击触发事件
    /*
    TouchDown // on all touch downs
    TouchDownRepeat // on multiple touchdowns (tap count > 1)
    TouchDragInside
    TouchDragOutside
    TouchDragEnter
    TouchDragExit
    TouchUpInside
    TouchUpOutside
    TouchCancel

    ValueChanged // sliders, etc.

    @available(iOS 9.0, *)
    PrimaryActionTriggered // semantic action: for buttons, etc.

    EditingDidBegin // UITextField
    EditingChanged
    EditingDidEnd
    EditingDidEndOnExit // 'return key' ending editing

    AllTouchEvents // for touch events
    AllEditingEvents // for UITextField
    ApplicationReserved // range available for application use
    SystemReserved // range reserved for internal framework use
    AllEvents
    */
    button.addTarget(self, action: #selector(UiButton.buttonClick(_:)), forControlEvents: .TouchUpInside)

3、Storyboard 中设置

  • 在 Storyboard 场景中设置

3.1 Button 设置

Button1

Type 按钮类型
State Config 按钮状态
Title 按钮文字
Font 按钮文字字体
Text Color 按钮文字颜色
Shadow Color 按钮文字阴影颜色
Image 按钮图片
Background 按钮背景图片
Shadow Offset 按钮阴影偏移量
– Reverses On Highlight
Drawing
– Shows Touch On Highlight
– Highlighted Adjusts Image 高亮状态图片不变暗
– Disabled Adjusts Image 禁用状态图片不变暗
Line Break 断行方式
Edge 边距类型设置
Inset 内边距大小设置

3.2 Control 设置

Button2

Alignment 文字对齐方式
Content
– Selected 选中
– Enable 可用
– Highlighted 高亮

4、UIButton、UIImageView、UILabel 的选择

  • 特点:

    • UIButton:

      • 既能显示文字,又能显示图片(能显示 2 张图片,背景图片和内容图片)。
      • 长按高亮的时候可以切换图片\文字。
      • 直接通过 addTarget… 方法监听点击。
    • UIImageView:

      • 能显示图片,不能直接通过 addTarget… 方法监听点击。
    • UILabel:

      • 能显示文字,不能直接通过 addTarget… 方法监听点击。
  • 选择:

    • 仅仅是显示数据,不需要点击

      • 建议选择 UIImageView、UILabel。
    • 不仅显示数据,还需要监听点击

      • 建议选择 UIButton。
        • 其实 UIImageView、UILabel 也可以通过手势识别器来监听。
    • 长按控件后,会改变显示的内容

      • 选择 UIButton
        • 因为 UIButton 有 highlighted 这种状态。
    • 同时显示 2 张图片:背景图片、内容图片

      • 选择 UIButton。

5、UIButton 子控件

  • 1、不要直接拿出按钮内部的子控件,来修改文字、图片属性,按钮内部的子控件设置是有状态的。

    • 直接拿出设置时无法显示

      1
      2
      self.imageView.image = [UIImage imageNamed:@"shop.icon"];
      self.titleLabel.text = shop.name;
    • 带状态设置时才能正常显示

      1
      2
      self setImage:[UIImage imageNamed:shop.icon] forState:UIControlStateNormal];
      [self setTitle:shop.name forState:UIControlStateNormal];
  • 2、子控件 frame 设置

    1
    2
    self.imageView.frame = CGRectMake(0, 0, buttonW, imageH);
    self.titleLabel.frame = CGRectMake(0, imageH, buttonW, buttonH - imageH);
    1
    2
    3
    4
    // 设置按钮中 title 的尺寸
    - (CGRect)titleRectForContentRect:(CGRect)contentRect {
    return CGRectMake(0, 30, 70, 30);
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    // 设置按钮中 imageView 的尺寸
    - (CGRect)imageRectForContentRect:(CGRect)contentRect {

    // 计算 imageView 控件尺寸,contentRect 为按钮的尺寸
    CGFloat W = 40;
    CGFloat H = 46;
    CGFloat X = (contentRect.size.width - W) * 0.5;
    CGFloat Y = 20;

    return CGRectMake(X, Y, W, H);
    }
  • 3、子控件 接收点击事件的区域 设置

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    // 设置按钮接收点击事件的区域
    - (UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event {

    CGFloat btnW = self.bounds.size.width;
    CGFloat btnH = self.bounds.size.height;

    // 计算不接收点击事件的区域
    CGFloat X = 0;
    CGFloat Y = btnH / 2;
    CGFloat W = btnW;
    CGFloat H = Y;
    CGRect rect = CGRectMake(X, Y, W, H);

    if (CGRectContainsPoint(rect, point)) {
    return nil;
    } else {
    return [super hitTest:point withEvent:event];
    }
    }
文章目录
  1. 1. 前言
  2. 2. 1、UIButton 的创建
  3. 3. 2、UIButton 的设置
  4. 4. 3、Storyboard 中设置
    1. 4.1. 3.1 Button 设置
    2. 4.2. 3.2 Control 设置
  5. 5. 4、UIButton、UIImageView、UILabel 的选择
  6. 6. 5、UIButton 子控件
隐藏目录