iOS开发基础9-提示框（UIAlertController）

在 iOS 开发中，提示框（HUD）是为用户提供即时反馈的一种关键UI元素。本文将详细介绍文本提示框、系统自带的提示框（如 UIAlertView 和 UIActionSheet）、自定义提示框等内容，深入分析其实现原理及底层逻辑。

一、文本提示框

实现步骤

1. 创建提示框控件：在视图中添加一个 UILabel 用于显示提示信息。
2. 控制其显示与隐藏：通过透明度和动画控制提示框的显示与隐藏效果。

示例代码

#import "ViewController.h"

@interface ViewController ()
- (IBAction)add;
- (IBAction)remove;
@property (weak, nonatomic) IBOutlet UIView *shopsView;
@property (weak, nonatomic) IBOutlet UIButton *removeBtn;
@property (weak, nonatomic) IBOutlet UIButton *addBtn;
@property (weak, nonatomic) IBOutlet UILabel *hudLabel;
@property (nonatomic, strong) NSMutableArray *shops;
@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];

    // 一开始就让提示框隐藏
    self.hudLabel.alpha = 0.0;
}

- (IBAction)add {
    // 计算商品控件的X和Y值并创建新的商品视图
    CGFloat shopWidth = 70;
    CGFloat shopHeight = 100;
    CGFloat ColMargin = (self.shopsView.frame.size.width - (3 * shopWidth)) / 2;
    CGFloat RowMargin = ColMargin;
    
    NSUInteger index = self.shopsView.subviews.count;
    int row = index / 3;
    CGFloat shopY = row * (shopHeight + RowMargin);
    int col = index % 3;
    CGFloat shopX = col * (shopWidth + ColMargin);

    XMGShopView *shopView = [XMGShopView shopView];
    shopView.frame = CGRectMake(shopX, shopY, shopWidth, shopHeight);
    shopView.shop = self.shops[index];
    [self.shopsView addSubview:shopView];

    self.removeBtn.enabled = YES;
    self.addBtn.enabled = self.shopsView.subviews.count < self.shops.count;

    if (!self.addBtn.enabled) {
        [self showHUDWithText:@"商品柜已经满了, 不要再买买买了..."];
    }
}

- (IBAction)remove {
    UIView *subView = self.shopsView.subviews.lastObject;
    [subView removeFromSuperview];

    self.removeBtn.enabled = self.shopsView.subviews.count > 0;
    self.addBtn.enabled = YES;

    if (!self.removeBtn.enabled) {
        [self showHUDWithText:@"商品柜已经空了, 继续买买买..."];
    }
}

- (void)showHUDWithText:(NSString *)text {
    self.hudLabel.text = text;
    [UIView animateWithDuration:1.0 animations:^{
        self.hudLabel.alpha = 1.0;
    } completion:^(BOOL finished) {
        [UIView animateWithDuration:1.0 delay:2.0 options:kNilOptions animations:^{
            self.hudLabel.alpha = 0.0;
        } completion:nil];
    }];
}

- (NSMutableArray *)shops {
    if (!_shops) {
        NSString *path = [[NSBundle mainBundle] pathForResource:@"shops.plist" ofType:nil];
        NSArray *tempArr = [NSArray arrayWithContentsOfFile:path];
        _shops = [NSMutableArray array];
        for (NSDictionary *dict in tempArr) {
            NJShop *shop = [[NJShop alloc] init];
            shop.name = dict[@"name"];
            shop.icon = dict[@"icon"];
            [_shops addObject:shop];
        }
    }
    return _shops;
}

@end

底层逻辑分析

1. 透明度控制：通过透明度来实现提示框的显示和隐藏，结合动画效果使过渡更为流畅。
2. 动画：使用 UIView 的动画方法来控制提示框的淡入淡出，以改善用户体验。

二、系统自带的提示框

1. UIAlertView

UIAlertView 是一种简单的提示框，适用于需要用户立即注意的信息。

示例代码

- (void)useAlert {
    UIAlertView *alert = [[UIAlertView alloc] initWithTitle:@"哥是标题" message:@"姐是正文..." delegate:self cancelButtonTitle:@"取消" otherButtonTitles:@"确定", nil];
    alert.alertViewStyle =  UIAlertViewStyleLoginAndPasswordInput;
    [alert show];
}

#pragma mark - UIAlertViewDelegate
- (void)alertView:(UIAlertView *)alertView clickedButtonAtIndex:(NSInteger)buttonIndex {
    switch (buttonIndex) {
        case 0:
            NSLog(@"点击了取消");
            break;
        case 1:
            NSLog(@"点击了确定");
            break;
        default:
            break;
    }
}

2. UIActionSheet

UIActionSheet 通常用于多个选择操作。

示例代码

- (void)useActionSheet {
    UIActionSheet *sheet = [[UIActionSheet alloc] initWithTitle:@"哥是标题" delegate:self cancelButtonTitle:@"取消" destructiveButtonTitle:@"确定" otherButtonTitles:@"其它", @"Other", nil];
    [sheet showInView:self.view];
}

#pragma mark - UIActionSheetDelegate
- (void)actionSheet:(UIActionSheet *)actionSheet clickedButtonAtIndex:(NSInteger)buttonIndex {
    NSLog(@"%ld", (long)buttonIndex);
}

3. UIAlertController

UIAlertController 是 iOS 8 之后引入的，用来取代 UIAlertView 和 UIActionSheet，提供更强大的功能。

示例代码

- (void)useAlertControllerAlert {
    UIAlertController *alertVc = [UIAlertController alertControllerWithTitle:@"哥是标题" message:@"姐是正文..." preferredStyle:UIAlertControllerStyleAlert];
    
    UIAlertAction *action1 = [UIAlertAction actionWithTitle:@"确定" style:UIAlertActionStyleDestructive handler:^(UIAlertAction *action) {
        NSLog(@"点击了确定按钮");
    }];
    UIAlertAction *action2 = [UIAlertAction actionWithTitle:@"取消" style:UIAlertActionStyleCancel handler:^(UIAlertAction *action) {
        NSLog(@"点击了取消按钮");
    }];
    
    [alertVc addAction:action1];
    [alertVc addAction:action2];
    
    [alertVc addTextFieldWithConfigurationHandler:^(UITextField *textField) {
        textField.text = @"用户名";
    }];
    [alertVc addTextFieldWithConfigurationHandler:^(UITextField *textField) {
        textField.secureTextEntry = YES;
    }];
    
    [self presentViewController:alertVc animated:YES completion:nil];
}

底层逻辑分析

1. 委托模式：UIAlertView 和 UIActionSheet 通过委托模式处理用户的点击事件，提供了简单的调用方式。
2. 功能增强：UIAlertController 集成了前两者的功能，且通过闭包实现事件处理，代码更加简洁和灵活。

三、自定义提示框

实现步骤

1. 创建覆盖视图：创建覆盖整个屏幕的视图，设置半透明背景。
2. 添加 UIActivityIndicatorView 和 UILabel：在覆盖视图上添加菊花和标签以显示加载信息。
3. 显示和移除：将覆盖视图添加到主视图，并在操作完成后移除。

示例代码

- (void)useCustomHUD {
    UIView *cover = [[UIView alloc] init];
    cover.backgroundColor = [UIColor colorWithRed:0 green:0 blue:0 alpha:0.5];
    cover.frame = CGRectMake(0, 0, 150, 150);
    cover.center = self.view.center;
    cover.layer.cornerRadius = 10;
    [self.view addSubview:cover];
    
    UIActivityIndicatorView *activity = [[UIActivityIndicatorView alloc] initWithActivityIndicatorStyle:UIActivityIndicatorViewStyleWhiteLarge];
    activity.center = CGPointMake(cover.frame.size.width * 0.5, 50);
    [activity startAnimating];
    [cover addSubview:activity];
    
    UILabel *label = [[UILabel alloc] init];
    label.textAlignment = NSTextAlignmentCenter;
    label.text = @"正在拼命加载中...";
    label.frame = CGRectMake(0, cover.frame.size.height - 80, cover.frame.size.width, 80);
    [cover addSubview:label];
}

底层逻辑分析

1. 覆盖视图：为提示框提供一个独立的、半透明的背景，突出重要信息。
2. 菊花和标签：模拟加载动画和提示信息，增强用户体验。
3. 灵活性：自定义提示框可以根据需求调整样式和展示内容，满足各种定制化需求。

结论

本文详细介绍了多种提示框的实现方式，包括文本提示框、系统自带提示框（如 UIAlertView、UIActionSheet 和 UIAlertController）以及自定义提示框。不同的提示框适用于不同的场景，通过理解其实现机制和底层逻辑，开发者可以根据实际需求选择合适的提示框，提高应用的用户体验。