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];}