iOS开发基础9-提示框(UIAlertController)

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

一、文本提示框

实现步骤

  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 之后引入的,用来取代 UIAlertViewUIActionSheet,提供更强大的功能。

示例代码

- (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. 委托模式UIAlertViewUIActionSheet 通过委托模式处理用户的点击事件,提供了简单的调用方式。
  2. 功能增强UIAlertController 集成了前两者的功能,且通过闭包实现事件处理,代码更加简洁和灵活。

三、自定义提示框

实现步骤

  1. 创建覆盖视图:创建覆盖整个屏幕的视图,设置半透明背景。
  2. 添加 UIActivityIndicatorViewUILabel:在覆盖视图上添加菊花和标签以显示加载信息。
  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. 灵活性:自定义提示框可以根据需求调整样式和展示内容,满足各种定制化需求。

结论

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

posted @   Mr.陳  阅读(947)  评论(0编辑  收藏  举报
编辑推荐:
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
阅读排行:
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· NetPad:一个.NET开源、跨平台的C#编辑器
· PowerShell开发游戏 · 打蜜蜂
· 凌晨三点救火实录:Java内存泄漏的七个神坑,你至少踩过三个!
点击右上角即可分享
微信分享提示