iOS开发基础5-UIButton

深度解析 UIButton：高阶用法与封装工具类

UIButton 是iOS开发中经常使用的视图控件之一，用于响应用户的触摸操作。它功能强大，支持多种样式和交互方式。在本文中，我们将深入探讨 UIButton 的各项功能、高阶用法，以及如何封装成一个工具类，最后解析它的底层实现逻辑。

UIButton 基础使用

UIButton 是 UIKit 框架中的一个类，继承自 UIControl。 UIButton 提供了四种类型的按钮样式：系统（默认）、自定义、详情披露、信息、联系人添加。

// 创建UIButton
UIButton *button = [UIButton buttonWithType:UIButtonTypeSystem];
button.frame = CGRectMake(50, 100, 200, 50);
[button setTitle:@"Click Me" forState:UIControlStateNormal];
[self.view addSubview:button];

在上面的代码中，我们创建了一个系统类型的按钮，设置了其位置和标题，并将其添加到主视图中。

设置标题和图片

UIButton 可以设置不同状态下的标题、标题颜色、图片等。

// 设置标题与标题颜色
[button setTitle:@"Normal" forState:UIControlStateNormal];
[button setTitle:@"Highlighted" forState:UIControlStateHighlighted];
[button setTitleColor:[UIColor blueColor] forState:UIControlStateNormal];
[button setTitleColor:[UIColor redColor] forState:UIControlStateHighlighted];

// 设置背景图片
[button setBackgroundImage:[UIImage imageNamed:@"button_normal"] forState:UIControlStateNormal];
[button setBackgroundImage:[UIImage imageNamed:@"button_highlighted"] forState:UIControlStateHighlighted];

不同状态包括 UIControlStateNormal, UIControlStateHighlighted, UIControlStateDisabled, UIControlStateSelected 等。

UIButton 高阶用法

1. 自定义按钮样式

通过自定义 UIButton 的 layer 属性，我们可以创建更复杂的按钮样式。

UIButton *customButton = [UIButton buttonWithType:UIButtonTypeCustom];
customButton.frame = CGRectMake(50, 200, 200, 50);
[customButton setTitle:@"Custom Button" forState:UIControlStateNormal];
[customButton setBackgroundColor:[UIColor purpleColor]];

// 设置圆角
customButton.layer.cornerRadius = 10;
customButton.layer.masksToBounds = YES;

// 设置边框
customButton.layer.borderColor = [UIColor whiteColor].CGColor;
customButton.layer.borderWidth = 2.0;

[self.view addSubview:customButton];

2. 设置富文本标题

按钮标题的样式可以更加灵活多样，通过设置富文本标题。

NSMutableAttributedString *attributedTitle = [[NSMutableAttributedString alloc] initWithString:@"Rich Text Button"];
[attributedTitle addAttribute:NSForegroundColorAttributeName value:[UIColor blackColor] range:NSMakeRange(0, 5)];
[attributedTitle addAttribute:NSForegroundColorAttributeName value:[UIColor redColor] range:NSMakeRange(5, 5)];
[attributedTitle addAttribute:NSFontAttributeName value:[UIFont boldSystemFontOfSize:18] range:NSMakeRange(0, 5)];
[attributedTitle addAttribute:NSFontAttributeName value:[UIFont italicSystemFontOfSize:18] range:NSMakeRange(5, 5)];

[customButton setAttributedTitle:attributedTitle forState:UIControlStateNormal];

3. 添加图文按钮

在按钮上同时显示图标和文字，并设置它们的相对位置。

UIButton *imageButton = [UIButton buttonWithType:UIButtonTypeCustom];
imageButton.frame = CGRectMake(50, 300, 200, 50);
[imageButton setTitle:@"Icon Button" forState:UIControlStateNormal];
[imageButton setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
[imageButton setImage:[UIImage imageNamed:@"icon"] forState:UIControlStateNormal];

// 设置图标和标题的偏移
imageButton.imageEdgeInsets = UIEdgeInsetsMake(0, -10, 0, 0);
imageButton.titleEdgeInsets = UIEdgeInsetsMake(0, 10, 0, 0);

[self.view addSubview:imageButton];

封装 UIButton 工具类

为了便于重用和管理 UIButton 的各种高级功能，我们可以将其封装成一个工具类。

ButtonFactory.h

#import <UIKit/UIKit.h>

@interface ButtonFactory : NSObject

+ (UIButton *)createSystemButtonWithTitle:(NSString *)title target:(id)target action:(SEL)action frame:(CGRect)frame;

+ (UIButton *)createCustomButtonWithTitle:(NSString *)title backgroundColor:(UIColor *)color cornerRadius:(CGFloat)cornerRadius target:(id)target action:(SEL)action frame:(CGRect)frame;

+ (UIButton *)createRichTextButtonWithTitle:(NSAttributedString *)attributedTitle backgroundColor:(UIColor *)color target:(id)target action:(SEL)action frame:(CGRect)frame;

+ (UIButton *)createImageButtonWithTitle:(NSString *)title image:(UIImage *)image target:(id)target action:(SEL)action frame:(CGRect)frame;

@end

ButtonFactory.m

#import "ButtonFactory.h"

@implementation ButtonFactory

+ (UIButton *)createSystemButtonWithTitle:(NSString *)title target:(id)target action:(SEL)action frame:(CGRect)frame {
    UIButton *button = [UIButton buttonWithType:UIButtonTypeSystem];
    button.frame = frame;
    [button setTitle:title forState:UIControlStateNormal];
    [button addTarget:target action:action forControlEvents:UIControlEventTouchUpInside];
    return button;
}

+ (UIButton *)createCustomButtonWithTitle:(NSString *)title backgroundColor:(UIColor *)color cornerRadius:(CGFloat)cornerRadius target:(id)target action:(SEL)action frame:(CGRect)frame {
    UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
    button.frame = frame;
    [button setTitle:title forState:UIControlStateNormal];
    [button setBackgroundColor:color];
    button.layer.cornerRadius = cornerRadius;
    button.layer.masksToBounds = YES;
    [button addTarget:target action:action forControlEvents:UIControlEventTouchUpInside];
    return button;
}

+ (UIButton *)createRichTextButtonWithTitle:(NSAttributedString *)attributedTitle backgroundColor:(UIColor *)color target:(id)target action:(SEL)action frame:(CGRect)frame {
    UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
    button.frame = frame;
    [button setAttributedTitle:attributedTitle forState:UIControlStateNormal];
    [button setBackgroundColor:color];
    [button addTarget:target action:action forControlEvents:UIControlEventTouchUpInside];
    return button;
}

+ (UIButton *)createImageButtonWithTitle:(NSString *)title image:(UIImage *)image target:(id)target action:(SEL)action frame:(CGRect)frame {
    UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
    button.frame = frame;
    [button setTitle:title forState:UIControlStateNormal];
    [button setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
    [button setImage:image forState:UIControlStateNormal];
    button.imageEdgeInsets = UIEdgeInsetsMake(0, -10, 0, 0);
    button.titleEdgeInsets = UIEdgeInsetsMake(0, 10, 0, 0);
    [button addTarget:target action:action forControlEvents:UIControlEventTouchUpInside];
    return button;
}

@end

使用封装工具类

// 使用工具类创建按钮
UIButton *systemButton = [ButtonFactory createSystemButtonWithTitle:@"System Button" target:self action:@selector(buttonAction) frame:CGRectMake(50, 400, 200, 50)];
[self.view addSubview:systemButton];

UIButton *customButton = [ButtonFactory createCustomButtonWithTitle:@"Custom Button" backgroundColor:[UIColor purpleColor] cornerRadius:10.0 target:self action:@selector(buttonAction) frame:CGRectMake(50, 500, 200, 50)];
[self.view addSubview:customButton];

按钮点击事件处理

- (void)buttonAction {
    NSLog(@"Button clicked!");
}

UIButton 的底层逻辑

为了深入理解 UIButton，我们需要了解其底层实现逻辑：

1. 继承关系与消息传递

UIButton 是 UIControl 的子类，而 UIControl 又是 UIView 的子类。这意味着 UIButton 继承了所有 UIView 的属性和方法，并且可以响应用户交互。

UIControl 通过目标-动作 (Target-Action) 机制实现用户交互处理。每个触控事件都会触发相应的方法，使用 addTarget:action:forControlEvents: 方法来注册事件处理器。

2. 渲染与布局

UIButton 的渲染和布局通过其内部的 UILabel 和 UIImageView 来实现。我们可以通过按钮的 titleEdgeInsets 和 imageEdgeInsets 属性来调整标题和图像的相对位置。

3. 状态管理

UIButton 支持多个状态（如 Normal，Highlighted，Disabled，Selected）。不同状态下可以设置不同的标题、颜色、背景图片等。Button 内部通过监听触摸事件来改变按钮状态，并进行重新绘制。

4. 性能优化

在加载图片和渲染方面，UIButton 做了大量优化。特别是在处理高频操作（如连点按钮）时，通过内部的缓存机制减少重新绘制的次数，从而提高应用的性能。

总结

UIButton 是一个功能强大且灵活的控件，通过了解其基本用法、高阶用法以及底层实现逻辑，我们可以高效地利用它来构建多种交互效果。同时，封装按钮工具类可以进一步提高代码重用性和开发效率。