OCUI界面设计：弹出框

引言

• 弹出框的使用在iOS开发中非常广泛，合理弹出框使用可极大增强用户体验。

效果展示

弹出框

表单

实现方式

iOS8以前

弹出框

• 初始化

- (void)respondsToLoginButton:(UIButton *)sender {

    /**
     *  弹出框
     *
     *  @param title             弹出框标题
     *  @param message           弹出框详情信息
     *  @param delegate          代理
     *  @param cancelButtonTitle 取消按钮
     *  @param otherButtonTitles 其他按钮

     */
    UIAlertView *alertView = [[UIAlertView alloc] initWithTitle:@"温馨提示"
                                                        message:@"登陆成功!"
                                                       delegate:self
                                              cancelButtonTitle:@"取消"
                                              otherButtonTitles:@"确定", nil];
    // 显示弹出框
    [alertView show];
}

• 处理弹出框上的按钮逻辑需遵守协议 ，并实现协议方法clickedButtonAtIndex

#pragma mark - responds <UIAlertViewDelegate>
- (void)alertView:(UIAlertView *)alertView clickedButtonAtIndex:(NSInteger)buttonIndex {
    // 此处根据buttonIndex参数获取当前点击的是哪一个按钮，处理相应的逻辑。
}

表单

• 初始化

- (void)respondsShareButton:(UIButton *)sender {

    /**
     *  表单
     *
     *  @param title                  标题
     *  @param delegate               代理
     *  @param cancelButtonTitle      取消按钮
     *  @param destructiveButtonTitle 注销按钮
     *  @param otherButtonTitles      其他按钮
     */
    UIActionSheet *actionSheet = [[UIActionSheet alloc] initWithTitle:@"分享到"
                                                             delegate:self
                                                    cancelButtonTitle:@"退出"
                                               destructiveButtonTitle:@"注销"
                                                    otherButtonTitles:@"新浪微博", @"腾讯微博", nil];
    // 显示表单
    [actionSheet showInView:self.view];
}

• 处理表单上的按钮逻辑需遵守协议 ，并实现协议方法clickedButtonAtIndex

#pragma mark - responds <UIActionSheetDelegate>
- (void)alertView:(UIAlertView *)alertView clickedButtonAtIndex:(NSInteger)buttonIndex {
    // 此处根据buttonIndex参数获取当前点击的是哪一个按钮，处理相应的逻辑。
}

iOS8以后

• iOS8以后，表单与弹出框集成到UIAlertController中，通过UIAlertController可直接实现弹出框和表单效果，建议使用UIAlertController实现弹出框和表单效果。

UIAlertController

• 初始化

+ (instancetype)alertControllerWithTitle:(NSString *)title message:(NSString *)message preferredStyle:(UIAlertControllerStyle)preferredStyle;

• UIAlertControllerStyle

// 表单样式
UIAlertControllerStyleActionSheet

// 弹出框样式
UIAlertControllerStyleAlert

• 添加按钮行为

- (void)addAction:(UIAlertAction *)action;

• 添加文本输入框

- (void)addTextFieldWithConfigurationHandler:(void (^)(UITextField *textField))configurationHandler;

• 模态切换跳转至alertController

- (void)presentViewController:(UIViewController *)viewControllerToPresent animated: (BOOL)flag completion:(void (^)(void))completion。

tips：UIAlertController默认点击弹出框或表单上按钮释放UIAlertController。

UIAlertAction

• 初始化

+ (instancetype)actionWithTitle:(NSString *)title style:(UIAlertActionStyle)style handler:(void (^)(UIAlertAction *action))handler;

• UIAlertActionStyle

// 1、默认样式
UIAlertActionStyleDefault

// 2、取消样式
UIAlertActionStyleCancel

// 3、异常样式
UIAlertActionStyleDestructive

弹出框完整实现

- (void)respondsButton:(UIButton *)sender {

    // 1、初始化
    UIAlertController *alertController = [UIAlertController alertControllerWithTitle:@"温馨提示"
                                                                             message:@"输入您要添加的用户名"
                                                                      preferredStyle:UIAlertControllerStyleAlert];


    // 2、添加文本输入框
    [alertController addTextFieldWithConfigurationHandler:^(UITextField *textField) {
        // 此处设置文本输入框常用属性配置
    }];



    // 3、添加取消按钮
    [alertController addAction:[UIAlertAction actionWithTitle:@"取消"
                                                        style:UIAlertActionStyleDefault
                                                      handler:^(UIAlertAction *action) {
        // 此处处理点击取消按钮逻辑
    }]];


    // 4、添加确定按钮
    [alertController addAction:[UIAlertAction actionWithTitle:@"确定"
                                                        style:UIAlertActionStyleDefault
                                                      handler:^(UIAlertAction *action) {
        // 此处处理点击确定按钮逻辑

        // 根据下标（文本输入框下标从0开始，根据添加先后顺序计算）获取文本输入框
        UITextField *textField = alertController.textFields[0];

        // 获取文本输入框上的文本
        NSString *text = textField.text;

        // 接着其他处理逻辑...
    }]];

    // 5、模态切换显示弹出框
    [self presentViewController:alertController
                       animated:YES
                     completion:nil];
}

表单完整实现

- (void)respondsButton:(UIButton *)sender {

    // 1、初始化
    UIAlertController *alertController = [UIAlertController alertControllerWithTitle:@"温馨提示"
                                                                             message:@"分享到"
                                                                      preferredStyle:UIAlertControllerStyleAlert];



    // 2、添加注销按钮
    [alertController addAction:[UIAlertAction actionWithTitle:@"注销"
                                                        style:UIAlertActionStyleCancel
                                                      handler:^(UIAlertAction *action) {
        // 此处处理点击注销按钮逻辑
    }]];


    // 3、添加新浪微博按钮
    [alertController addAction:[UIAlertAction actionWithTitle:@"新浪微博"
                                                        style:UIAlertActionStyleDefault
                                                      handler:^(UIAlertAction *action) {
                                                          // 此处处理点击新浪微博按钮逻辑

    }]];

    // 4、添加腾讯微博按钮
    [alertController addAction:[UIAlertAction actionWithTitle:@"腾讯微博"
                                                        style:UIAlertActionStyleDefault
                                                      handler:^(UIAlertAction *action) {
                                                          // 此处处理点击腾讯微博按钮逻辑

                                                      }]];

    // 4、添加退出按钮
    [alertController addAction:[UIAlertAction actionWithTitle:@"退出"
                                                        style:UIAlertActionStyleDestructive
                                                      handler:^(UIAlertAction *action) {
                                                          // 此处处理点击退出按钮逻辑

                                                      }]];

    // 5、模态切换显示表单
    [self presentViewController:alertController
                       animated:YES
                     completion:nil];
}