iOS开发——UI篇&提示效果

时间:2023-03-09 06:57:55
iOS开发——UI篇&提示效果

提示效果

关于iOS开发提示效果是一个很常见的技术,比如我们平时点击一个按钮,实现回馈,或者发送网络请求的时候!

技术点:

一:View

UIAlertView

UIActionSheet

二:控制器

UIAlertController

三:第三方库

SVProgressHUD

MBProgressHUD

下面是主界面:

iOS开发——UI篇&提示效果

首先我们来看看系统自带的一些提示框(View)

一::UIAlertView

1:创建UIalertView(这里只说纯代码创建的方式)

 UIAlertView *alert = [[UIAlertView alloc] initWithTitle:@"提示框" message:@"请选择" delegate:self cancelButtonTitle:@"确定" otherButtonTitles:@"取消", nil];
     [alert show];

当我们点击对应地方就会弹出一个提示框

iOS开发——UI篇&提示效果

如果我们需要实现监听点击那一个按钮就需要遵守协议,并且实现相应的代理方法:

遵守的协议:  UIAlertViewDelegate

实现代理方法,这里我们只实现了一个点击相应按钮的代理监听方法,平时开发中也只需要实现这一个方法,除非有特别的需求

 -(void)alertView:(UIAlertView *)alertView clickedButtonAtIndex:(NSInteger)buttonIndex
 {
     NSLog(@"UIAlertView被点击");
 }

二:UIActionSheet

步骤同样和上面一样

:创建UIActionSheet(这里显示他使用的不是show是showInView)

 UIActionSheet *action = [[UIActionSheet alloc] initWithTitle:@"提示框" delegate:self cancelButtonTitle:@"删除" destructiveButtonTitle:@"更多" otherButtonTitles:@"确定", nil];
     [action showInView:self.view];

遵守的协议:  UIActionSheetDelegate

实现响应的代理方法:

 -(void)actionSheet:(UIActionSheet *)actionSheet clickedButtonAtIndex:(NSInteger)buttonIndex
 {
     NSLog(@"UIActionSheet被点击");
 }

实现之后显示的界面如下

iOS开发——UI篇&提示效果

三:UIAlertController

在ios中新增了一个控制器,用来替代前面两个提示框的,不过前面两个是View,而这个是控制器,使用方法更加简单,而且可以包含前面两种。

1:创建UIAlertController着方法有两种

方法一:

 UIAlertController *alt = [[UIAlertController alloc] init];
     [alt addAction:[[UIAlertAction alloc] init]];
     [alt addAction:[UIAlertAction actionWithTitle:@"title" style:UIAlertActionStyleDestructive handler:^(UIAlertAction *action) {
         NSLog(@"iCocos");
     }]];
     alt.title = @"klasdhgk";
     alt.message = @"alukngm";

     [self presentViewController:alt animated:YES completion:^{
         NSLog(@"iCocos");
     }];

方法二:

     UIAlertController *al = [UIAlertController alertControllerWithTitle:@"lakdhsg" message:@"adsfgh" preferredStyle:UIAlertControllerStyleAlert];

     [self presentViewController:al animated:YES completion:nil];

上面有两个地方需要注意的,

1)方法一种使用Addaction添加我们需要的项

2)presentViewController:animated:completion方法适用于弹出控制器的,在后面做项目的时候会经常用到,所以这里需要留意

四:第三方库SVProgressHUD

使用这个库之前我们需要在github上面下载这个Demo,并且将里面的需要的文件拖到我们的项目中

iOS开发——UI篇&提示效果

然后就可以直接使用了,在相应的代码处直接使用类调用久可以:

 - (IBAction)S1:(id)sender {    //直接显示
     [SVProgressHUD show];
 }

 - (IBAction)s2:(id)sender {    //显示文字(错误)
     [SVProgressHUD showErrorWithStatus:@"iCocos"];
 }

 - (IBAction)s3:(id)sender {
     //显示进度条
     [SVProgressHUD showProgress:1.0];
 }

 - (IBAction)s4:(id)sender {    //显示图片
     [SVProgressHUD showImage:[UIImage imageNamed:@"37x-Checkmark.png"] status:@"成功"];
 }

简便方法显示和隐藏

     /*
 //    [SVProgressHUD show];
 //    [SVProgressHUD showWithStatus:@"正在拼命加载"];
 //    [SVProgressHUD dismiss];

 //    [SVProgressHUD showErrorWithStatus:@"错误"];
 //    [SVProgressHUD showSuccessWithStatus:@"正确"];

     [SVProgressHUD showWithStatus:@"正在拼命加载" maskType:SVProgressHUDMaskTypeBlack];
      */

这个框架使用非常简单,但是功能不够完善,下面就介绍一个更加好用的框架MBProgressHUD

五:MBProgressHUD

这个框架相对SVPMBProgressHUD使用起来没有那么简单,但是也不会有多难,不过特可以实现更多的功能,而且如果有需要我们可以直接修改他的文件来得到我们想要的效果

在github上面下载好了之后导入这个框架

iOS开发——UI篇&提示效果

 - (IBAction)h1:(id)sender {
     //直接在View上面显示(类方法)
     [MBProgressHUD showHUDAddedTo:self.view animated:YES];
 }

 - (IBAction)h2:(id)sender {
     //实例方法,直接显示
     [[MBProgressHUD alloc] show:YES];
 //    [[MBProgressHUD alloc] hide:YES];
 }

 - (IBAction)h3:(id)sender {
     //显示并且执行我们想要的代码
     [[MBProgressHUD alloc] showWhileExecuting:@selector(Runing) onTarget:self withObject:nil animated:YES];
 }
 -(void)Runing
 {
     NSLog(@"showing");
 }

我们一般实现的就是上面的几个方法,当然如果你想更加深入的学习可以直接查看文档,如果你真的闲的蛋疼的话可以自己写一套来用,也可以装装逼不是吗?

笔者简单的实现了一下(不是因为蛋疼噢)

 // 1.创建父控件
     UIView *cover = [[UIView alloc] init];
     cover.backgroundColor = [UIColor colorWithRed: green: blue: alpha:0.5];
     cover.frame = CGRectMake(, , , );
     cover.center = self.view.center;

     // 修改父控件为圆角
     cover.layer.cornerRadius = ;
     [self.view addSubview:cover];

     // 2.创建菊花
     // 菊花有默认的尺寸
     // 注意: 虽然有默认的尺寸, 但是要想显示必须让菊花转起来
     UIActivityIndicatorView *activity = [[UIActivityIndicatorView alloc] initWithActivityIndicatorStyle:UIActivityIndicatorViewStyleWhiteLarge];
     activity.center = CGPointMake(cover.frame.size.width * );
     [activity startAnimating];

     [cover addSubview:activity];
     // 3.创建UILabel
     UILabel *label = [[UILabel alloc] init];
     //    label.backgroundColor = [UIColor purpleColor];
     label.textAlignment = NSTextAlignmentCenter;
     label.text = @"正在拼命加载中...";
     label.frame = CGRectMake(, cover.frame.size.height - , cover.frame.size.width, );
     [cover addSubview:label];

/********************************Swift************************************/

笔者在做完任务之后也会偶尔写写swift,毕竟想成为大神这个必须会的,下面就是上面功能的swift实现

 /**************************UIAlertView***********************************/

     @IBAction func alert() {
         var alert:UIAlertView = UIAlertView(title: "AlertView", message: "请点击", delegate: self, cancelButtonTitle: "取消", otherButtonTitles: "确定", "其他")
         alert.show()
     }

     func alertView(alertView: UIAlertView, clickedButtonAtIndex buttonIndex: Int) {

     }

     /**************************UIActionSheet**********************************/

     @IBAction func action() {
         var action:UIActionSheet = UIActionSheet(title: "AlertView", delegate: self, cancelButtonTitle: "取消", destructiveButtonTitle: "删除")
         action.showInView(self.view)
     }

     func actionSheet(actionSheet: UIActionSheet, clickedButtonAtIndex buttonIndex: Int) {

     }

     /*************************************************************/

     @IBAction func alertController1() {
         var alertController:UIAlertController = UIAlertController()

         var alacition:UIAlertAction = UIAlertAction(title: "ios", style: UIAlertActionStyle.Default, handler: nil)
         alertController.addAction(alacition)

         alertController.title = "asdgasdfg"
         alertController.message = "asdgdfsg"

         self.presentViewController(alertController, animated: true, completion: nil)

     }

     @IBAction func alertController() {
         var alertController:UIAlertController = UIAlertController(title: "laksdhfkj", message: "aslkdhfksd", preferredStyle: UIAlertControllerStyle.Alert)
         self.presentViewController(alertController, animated: true, completion: nil)
     }

注:如果你想使用更傻逼的方法也是可以的,比如使用一个控件,再用动画来控制它的出现可隐藏,不过一看就更大神差太远。。。。哈哈哈哈