不知不觉自学ios已经四个月了,从OC语法到app开发,过程虽然枯燥无味,但是结果还是挺有成就感的,在此分享我的ios开发之路中的小小心得~废话不多说,先上我们今天要实现的效果图:

有过一点做APP经验的都知道,提示框和等待加载框一直是APP首当其中的效果,ios不像android一样,自带toast和progressbarDialog,所以在做ios开发的时候,我首先想到了先封装这两个基础控件~当然网上的资源数不胜数,但是博主抱着一颗自主研究的精神,做出的效果也不错,也已适配了所有iphone型号和版本.望大家多多支持~

YPXToastView实现

接触过安卓开发的ios开发者可能对待toast这么个东西很不陌生,它主要是一种轻量级的提示,代替了复杂的对话框,有的显示在中间,有的显示在屏幕下方,当然,这些都是根据需求而来的.废话不多说,首先清理一下我们实现这个toast的一些必要思路:

1.实现的基础控件------UILabel封装

2.弹出的时间和透明度变化设置

3.显示的位置调整

 一.UILabel的封装

首先我们想要实现一下这个效果,首当其冲的肯定想到UILabel,那么接下来就是对UILabel的封装了,首先我们创建一文件继承UIlabel,然后写好要对外暴露的方法:

  1. @interface YPXToastView : UILabel
  2.  
  3. {
  4. @public
  5. CGFloat screenWidth,screenHeight;
  6. int _corner;
  7. int _duration;
  8. }
  9.  
  10. @property(assign,nonatomic)int corner;
  11. @property(assign,nonatomic)int duration;
  12.  
  13. -(void)showToastViewWithText:(NSString *)text andDuration:(int)duration andParentView:(UIView *)parentView;
  14.  
  15. -(void)showToastViewWithText:(NSString *)text andParentView:(UIView *)parentView;
  16.  
  17. -(void)showToastViewWithText:(NSString *)text andDuration:(int)duration andCorner:(int)corner andParentView:(UIView *)parentView;
  18.  
  19. +(void)showToastViewWithText:(NSString *)text andDuration:(int)duration andParentView:(UIView *)parentView;
  20.  
  21. +(void)showToastViewWithText:(NSString *)text andParentView:(UIView *)parentView;
  22.  
  23. +(void)showToastViewWithText:(NSString *)text andDuration:(int)duration andCorner:(int)corner andParentView:(UIView *)parentView;
  24.  
  25. -(void)setBackgroundWithColor:(UIColor *)color;
  26.  
  27. @end

定义了四个全局变量,两个属性,分别制定了提示框的圆角和时间.方法中定义了三个类方法,和四个实例方法,主要是因为我们在使用时并不想实例化一次我们的提示框,所有的实例方法中抽出了三个类方法方便用户调用.

下面我们来看内部主要方法实现:

  1.  
  2. /**
  3. * 新建UI
  4. *
  5. * @param str 要显示的文本
  6. */
  7. -(void)createUIByText:(NSString *)str{
  8. self.textAlignment = NSTextAlignmentCenter;
  9. self.backgroundColor = [UIColor colorWithRed: green: blue: alpha:0.5];
  10. self.alpha = 0.8;
  11. self.text=str;
  12. self.font = [UIFont systemFontOfSize:];
  13. self.textColor=[UIColor whiteColor];
  14. NSDictionary *attributes = @{NSFontAttributeName:[UIFont systemFontOfSize:self.font.pointSize],};
  15. CGSize textSize = [self.text boundingRectWithSize:CGSizeMake(, ) options:NSStringDrawingTruncatesLastVisibleLine attributes:attributes context:nil].size;;
  16. self.frame=CGRectMake(screenWidth/-(textSize.width*1.7)/, screenHeight*0.5,textSize.width*1.7,
  17. textSize.height*);
  18. self.layer.cornerRadius = _corner;
  19. self.clipsToBounds = YES;
  20. }
  21.  
  22. -(void)setBackgroundWithColor:(UIColor *)color{
  23. self.backgroundColor =color;
  24. }
  25.  
  26. /**
  27. * 初始化测量数据
  28. */
  29. -(void)caculateSize{
  30. screenWidth=[UIScreen mainScreen].bounds.size.width;
  31. screenHeight=[UIScreen mainScreen].bounds.size.height;
  32. }

方法一目了然,指定了UILabel的居中方式和背景,并设置属性让其宽度自适应,涉及到一些简单的frame计算,主要是定位于屏幕中间,宽度设为文本宽度的1.7倍,看起来比较适中.y点主要就是屏幕高度的一半,理应减去文本的高度的一半,但是博主在这偷个懒,并没有计算label的高度,所以就不赘述了~~

 二.弹出的时间和透明度变化设置

原理很简单,就是设定了一个animateWithDuration的block回调,然后设置label的透明度和时间,具体实现如下:

  1. /**
  2. * 显示toast
  3. *
  4. * @param parentView <#parentView description#>
  5. */
  6. -(void)showToastByParentView:(UIView *)parentView{
  7. [parentView addSubview:self];
  8. //animateWithDuration可以控制label显示持续时间
  9. [UIView animateWithDuration:_duration animations:^{
  10. self.alpha = 1.0;
  11. } completion:^(BOOL finished){
  12. [self removeFromSuperview];
  13. }];
  14. }

默认时间为1秒,思路很清晰,先添加进我们的parentView中,然后指定时间后移除.

到此,我们的YPXToastView已经全部完成,其实内部逻辑主要是对UILabel的定制,思路简单,但是对于ios开发之路的封装思想有很大的帮助.调用时只需要一行代码:

  1. [YPXToastView showToastViewWithText:@"已开启" andDuration: andCorner: andParentView:self.view];

调用方便简洁,以后测试就不需要用NSLog了嘿嘿~

YPXLoddingView实现

相信在ios的开发中少不了加载等待框的开发,毕竟原生系统中貌似没有这样的对话框,我们在访问网络或者读取数据时可能需要给用户一个等待回馈,这里就用到了我们的等待加载.上面的gif中提供了两种等待加载框的样式,一种是自定义图片的旋转,顺时针或者逆时针,另一种是使用系统的UIActivityIndicatorView,使用大的加载Loadding.具体开发思路如下:

1.继承UIView通过添加UIImageView和UILabel来组合实现

2.控制UIImageView的旋转以及UIlabel的三个点的动态效果

3.显示和隐藏

一.UIView的封装

通过效果我们可以一目了然的知道,实现这个控件至少需要一个UIImageView(或者UIActivityIndicatorView)和UILabel,一个提供加载图片,一个提供加载文本,组合方式为竖直方向,然后设置背景的透明度.具体.h文件如下:

  1. #import <UIKit/UIKit.h>
  2.  
  3. @interface YPXLoaddingView : UIView
  4.  
  5. {
  6. @public
  7. int num;
  8. CGFloat angle;
  9. BOOL isShowLoadding;
  10. UIImageView * imageView;
  11. UILabel * label;
  12. CGFloat width;
  13. CGFloat x;
  14. CGFloat y,screenWidth,screenHeight;
  15. UIView * _parentView;
  16. NSString * _text;
  17. NSTimer * _timer;
  18. UIActivityIndicatorView * _activityView;
  19. UIView * view;
  20. }
  21.  
  22. @property(retain,nonatomic)NSTimer * timer;
  23. @property(copy,nonatomic) NSString * text;
  24. @property(retain,nonatomic) UIActivityIndicatorView * activityView;
  25.  
  26. -(void)showLoaddingViewWithText:(NSString *) string;
  27.  
  28. -(void)dismissLoaddingView;
  29.  
  30. -(instancetype)initWithParentView:(UIView *) parentView;
  31.  
  32. +(id)initWithParentView:(UIView *) parentView;
  33.  
  34. -(BOOL)isShowing;
  35.  
  36. -(void)showLoaddingView;
  37.  
  38. -(void)showLoaddingViewWithStyle:(int)style;
  39.  
  40. -(void)showLoaddingViewWithText:(NSString * )text andStyle:(int)style;
  41.  
  42. @end

定义了一些必要的属性,包括计时器和显示文本等,主要功能为show开头的方法,style应该是个枚举类型,但是博主目前还没有写过枚举类,所以直接引用0和1来指定使用图片还是系统的菊花加载.看完.h我们来看看具体的UIView代码实现:

  1.  
  2. /**
  3. * 计算一些必要尺寸
  4. *
  5. * @param parentView <#parentView description#>
  6. */
  7. -(void)caculatSizeWithTarget:(UIView *) parentView
  8. {
  9. screenWidth=[UIScreen mainScreen].bounds.size.width;
  10. screenHeight=[UIScreen mainScreen].bounds.size.height;
  11. width=screenWidth*0.3;
  12. x= screenWidth/-width/;
  13. y= screenHeight/-width/;
  14. angle=;
  15. num=;
  16. isShowLoadding=NO;
  17. _parentView=parentView;
  18.  
  19. }
  20.  
  21. /**
  22. * 创建loadding视图
  23. */
  24. -(void)creatLoaddingView
  25. {
  26. view=[[UIView alloc]init];
  27. view.frame=CGRectMake(, , screenWidth, screenHeight);
  28.  
  29. imageView=[[UIImageView alloc]init];
  30. imageView.frame=CGRectMake(width/-width*0.5/,, width*0.5,width*0.4);
  31. imageView.clipsToBounds=YES;
  32. imageView.layer.rasterizationScale=[UIScreen mainScreen].scale;
  33. [imageView setImage:[UIImage imageNamed:@"loadding.png"]];
  34.  
  35. _activityView=[[UIActivityIndicatorView alloc]initWithFrame:CGRectMake(width/-width*0.55/,, width*0.55,width*0.45)];
  36. _activityView.activityIndicatorViewStyle=UIActivityIndicatorViewStyleWhiteLarge;
  37.  
  38. label=[[UILabel alloc]init];
  39. label.textColor=[UIColor whiteColor];
  40. label.font=[UIFont systemFontOfSize:];
  41. int y2=imageView.frame.size.height+(width-imageView.frame.size.height)/;
  42. label.frame=CGRectMake(,y2, width, );
  43. label.textAlignment=NSTextAlignmentCenter;
  44.  
  45. }

手动布局,我们指定了imageview和label的frame,通过一系列计算,把imageview设为UIView中上部,并留出四周的边距,看起来更亲切自然一点.label的位置根据imageview的frame来指定,这样就可以完成适配避免在不同屏幕上显示不同的问题.完场上述代码,一个初步的静态效果已经生成,剩下的就是添加动画;

二.UIImageView旋转动画以及UILabel点点动态展示

imageview的动画添加很简单,因为我们只是涉及一点点的旋转动画,其中并没有加速度变化,读者若是想要添加,可以自己尝试一下.旋转动画的实现方式有两种:

一种是用animateWithDuration来动态的旋转一定角度,然后通过延时来改变旋转的速率,好处是简单,但是缺点也很明显,在5s中动画显得僵硬,并伴随着一点点的卡顿,如下是第一种动画方案的代码:

  1. /**
  2. * 开启loadding动画
  3. */
  4. - (void)startAnimation
  5. {
  6. if(isShowLoadding==YES){
  7. CGAffineTransform endAngle = CGAffineTransformMakeRotation(angle * (M_PI / -180.0f));
  8. [UIView animateWithDuration:0.03f delay: options:UIViewAnimationOptionCurveLinear animations:^{
  9. imageView.transform =endAngle;
  10. } completion:^(BOOL finished) {
  11. if(angle==){
  12. angle=;
  13. }
  14. if(angle==||angle==){
  15. label.text=[_text stringByAppendingString:@"..."];
  16. }else if(angle==){
  17. label.text=_text;
  18. }else if(angle==){
  19. label.text=[_text stringByAppendingString:@"."];
  20. }else if(angle==){
  21. label.text=[_text stringByAppendingString:@".."];
  22. }
  23. angle += ;
  24.  
  25. [self startAnimation];
  26. }];
  27. }
  28.  
  29. }

通过改变imageview的角度来旋转图片的方式,使用block回调中的角度关系,我们可以动态的设置提示文本省略号的动态展示.因为实现效果有点卡顿,所以博主采用了第二种实现方式,代码如下:

  1. /**
  2. * 启动计数定时器
  3. */
  4. -(void)UpdateText
  5. {
  6. num++;
  7. if (num>) {
  8. num=;
  9. }
  10. if(num==||num==){
  11. label.text=[_text stringByAppendingString:@"..."];
  12. }else if(num==){
  13. label.text=_text;
  14. }else if(num==){
  15. label.text=[_text stringByAppendingString:@"."];
  16. }else if(num==){
  17. label.text=[_text stringByAppendingString:@".."];
  18. }
  19.  
  20. }
  21.  
  22. /**
  23. * 给imageView添加动画
  24. *
  25. * @param imageView imageview
  26. *
  27. * @return imageview
  28. */
  29. + (UIImageView *)rotateImageView:(UIImageView *)imageView
  30. {
  31. CABasicAnimation *animation = [ CABasicAnimation
  32. animationWithKeyPath: @"transform" ];
  33. animation.fromValue = [NSValue valueWithCATransform3D:CATransform3DIdentity];
  34.  
  35. //围绕Z轴旋转,垂直与屏幕
  36. animation.toValue = [ NSValue valueWithCATransform3D:
  37. CATransform3DMakeRotation(M_PI, 0.0, 0.0, 1.0) ];
  38. animation.duration = 0.5;
  39. //旋转效果累计,先转180度,接着再旋转180度,从而实现360旋转
  40. animation.cumulative = YES;
  41. animation.repeatCount = ;
  42.  
  43. [imageView.layer addAnimation:animation forKey:nil];
  44. return imageView;
  45. }

采用CABasicAnimation的动画效果可以达到动画流畅度的完美展示,优点就是增加了旋转性能,缺点就是没有像animateWithDuration那样有动画的回调,这样我们就没有办法动态的去改变label的提示文本,所以细心的读者会发现,博主前面的.h文件中已经申明了一个定时器,那么这个定时器的作用是用来干嘛的呢?我们通过启动定时器,来动态的刷新label的提示文本达到一种动态展示的效果,这种思路在安卓里也同样适用.

完成了我们的图片旋转,基本上这个功能已经完成了百分之八十,剩下就是显示和隐藏了;

三.显示和隐藏

前面介绍.h文件申明的时候,已经把本控件的所有调用方法已经列出来了,其中包含了一系列的.show方法,因为loadding这种控件,我们可能需要对其状态进行判断,而且可能在网络请求中调用多次,为了不浪费内存,我们在这里提倡使用单例模式,并初始化一个Loadding在ViewDidLoad中.后期调用只需要show和dismiss即可,下面我们来看具体的show和dismiss的方法实现:

  1. /**
  2. * 显示loadding.默认文本为 "正在加载"
  3. */
  4. -(void)showLoaddingView
  5. {
  6. if(isShowLoadding==YES){
  7. return;
  8. }
  9. if(_text==nil||[_text isEqualToString:@""]){
  10. _text=@"正在加载";
  11. }
  12. label.text=_text;
  13. isShowLoadding=YES;
  14. angle=;
  15. self.hidden=NO;
  16. [self addSubview:imageView];
  17. [self addSubview:label];
  18. [view addSubview:self];
  19. [_parentView addSubview:view];
  20. [YPXLoaddingView rotateImageView:imageView];
  21. _timer=[NSTimer scheduledTimerWithTimeInterval:0.5 target:self selector:@selector(UpdateText) userInfo:nil repeats:YES];
  22.  
  23. }
  24.  
  25. -(void)showLoaddingViewWithStyle:(int)style
  26. {
  27. if(style==){//菊花加载
  28. if(isShowLoadding==YES){
  29. return;
  30. }
  31. if(_text==nil||[_text isEqualToString:@""]){
  32.  
  33. _text=@"正在加载";
  34. }
  35. label.text=_text;
  36. isShowLoadding=YES;
  37. angle=;
  38. self.hidden=NO;
  39. [self addSubview:_activityView];
  40. [self addSubview:label];
  41. [imageView removeFromSuperview];
  42. [_activityView startAnimating];
  43. [view addSubview:self];
  44. [_parentView addSubview:view];
  45. _timer=[NSTimer scheduledTimerWithTimeInterval:0.5 target:self selector:@selector(UpdateText) userInfo:nil repeats:YES];
  46.  
  47. }else{//旋转图片加载
  48. [self showLoaddingView];
  49. }
  50.  
  51. }
  52.  
  53. /**
  54. * 显示loadding
  55. *
  56. * @param string 显示的文本
  57. */
  58. -(void)showLoaddingViewWithText:(NSString *) string
  59. {
  60. _text=string;
  61. [self showLoaddingView];
  62. }
  63.  
  64. -(void)showLoaddingViewWithText:(NSString *)text andStyle:(int)style{
  65. _text=text;
  66. [self showLoaddingViewWithStyle:style];
  67. }
  68.  
  69. /**
  70. * 消失loadding
  71. */
  72. -(void)dismissLoaddingView
  73. {
  74. self.hidden=YES;
  75. isShowLoadding=NO;
  76. [_timer invalidate];
  77. [imageView.layer removeAllAnimations];
  78. [_activityView stopAnimating];
  79. [view removeFromSuperview];
  80. }

总体来说show方法中就是单纯的控制了imageview和_activityView通过style来隐藏和显示,思路很简单,再次不做赘述.dismiss中只需要移除我们的view就好,非常简单,同时不要忘记stop我们的_activityView以及关闭定时器就好.

致此,所有的代码实现已经完成,我们在需要调用的地方首先实例化一次,然后使用show和dismiss即可.

总结

ios开发总体来说还算顺风顺水,因为对安卓有一定的基础,学习oc等面向对象的语法不免要快一点,但是ios中对于控件的方法并不是很多,甚至某些安卓一行代码就能实现的功能,ios需要好多行,这就是一个语言的魅力所在,当然,在自学ios的过程中我会不断的通过写博客的方式来提升自己的水平,在新手开发道路中,希望我能雨你们同行,谢谢读者的支持~~
 
 

下载地址:http://download.csdn.net/detail/qq_16674697/9622230

作者:yangpeixing

QQ:313930500

CSND地址:http://blog.csdn.net/qq_16674697/article/details/53172388

转载请注明出处~谢谢~

ios新手开发——toast提示和旋转图片加载框的更多相关文章

  1. [iOS微博项目 - 1.8] - 各种尺寸图片加载 & 控件不显示研究

    A. 图片的加载:  [UIImage imageNamed:@"home"];  加载png图片    一.非retina屏幕  1.3.5 inch(320 x 480)  * ...

  2. iOS图片加载新框架 - FlyImage

    FlyImage 整合了SDWebImage,FastImageCache,AFNetworking的优点,是一个新的性能高效.接口简单的图片加载框架. 特点 高效 可将多张小图解码后存储到同一张大图 ...

  3. Android常用的图片加载库

     Android常用的图片加载库 前言:图片加载涉及到图片的缓存.图片的处理.图片的显示等.四种常用的图片加载框架,分别是Fresco.ImageLoader. Picasso. Glide. Uni ...

  4. iOS开发——图形编程Swift篇&CAShapeLayer实现圆形图片加载动画

    CAShapeLayer实现圆形图片加载动画 几个星期之前,Michael Villar在Motion试验中创建一个非常有趣的加载动画. 下面的GIF图片展示这个加载动画,它将一个圆形进度指示器和圆形 ...

  5. 自适应文案提示框、无数据图片加载<IOS小组件>

    非常感谢,帮助我的朋友们,谢谢你们. 该组件的编写仅仅用来不到4个小时,包括测试与修改bug.为他起名为AdaptivePromptDialogBox(就是自适应文案提示框): 呆毛地址:链接 < ...

  6. Android开发三种第三方图片加载的框架

    最近在项目中用到了大量图片加载,第三方优秀框架还不错,下面介绍三款榜首的框架用法和问题,做一个记录. 现在项目使用的是Android Studio开发的,现在也没有多少人使用Eclipse了吧. 一. ...

  7. YYWebImage——iOS异步图片加载框架

    本文转载至 http://www.mobile-open.com/2015/86582.html   YYWebImage 是一个异步图片加载框架 (YYKit 组件之一). 其设计目的是试图替代 S ...

  8. iOS图片加载框架-SDWebImage解读

    在iOS的图片加载框架中,SDWebImage可谓是占据大半壁江山.它支持从网络中下载且缓存图片,并设置图片到对应的UIImageView控件或者UIButton控件.在项目中使用SDWebImage ...

  9. iOS 图片加载框架- SDWebImage 解读

    在iOS的图片加载框架中,SDWebImage可谓是占据大半壁江山.它支持从网络中下载且缓存图片,并设置图片到对应的UIImageView控件或者UIButton控件.在项目中使用SDWebImage ...

随机推荐

  1. Configure a bridge interface over a VLAN tagged bonded interface

    SOLUTION VERIFIED February 5 2014 KB340153 Environment Red Hat Enterprise Linux 6 (All Versions) Red ...

  2. Spring MVC注解开发入门

    注解式开发初步 常用的两个注解: @Controller:是SpringMVC中最常用的注解,它可以帮助定义当前类为一个Spring管理的bean,同时指定该类是一个控制器,可以用来接受请求.标识当前 ...

  3. 整理Ajax的点点滴滴

    最近看了下<Javascript高级程序设计>(第三版)关于Ajax部分,做了这篇笔记. 一.常规用法 第一步,创建XHR对象var xhr = new XMLHttpRequest(); ...

  4. 入园记------我的DBA之路

    今天周一拖着疲惫的身躯 11点才离开公司,回到家估计写完这篇博客就要17号了. 一个人走在回家的路上,很黑,突然很多感触,一个人在北京拼搏,不敢停止学习的脚步,因为只要停下来就会感觉到孤独. 回顾一下 ...

  5. ASP.NET Web API 控制器创建过程(二)

    ASP.NET Web API 控制器创建过程(二) 前言 本来这篇随笔应该是在上周就该写出来发布的,由于身体跟不上节奏感冒发烧有心无力,这种天气感冒发烧生不如死,也真正的体会到了什么叫病来如山倒,病 ...

  6. CSharpGL(34)以从零编写一个KleinBottle渲染器为例学习如何使用CSharpGL

    CSharpGL(34)以从零编写一个KleinBottle渲染器为例学习如何使用CSharpGL +BIT祝威+悄悄在此留下版了个权的信息说: 开始 本文用step by step的方式,讲述如何使 ...

  7. C#的泛型的类型参数可以有带参数的构造函数的约束方式吗?

    Review后看到标题让我十分羞愧自己语文功底太差,估计...请见谅......我还特地把这句写回开头了...... 问题 前天遇到的一个问题,所以在MSDN发了个问,刚也丰富了下问题,关于泛型的. ...

  8. Oracle---------sql 中取值两列中值最大的一列

    1.表中有A B C三列,用SQL语句实现:当A列大于B列时选择A列否则选择B列,当B列大于C列时选择B列否则选择C列. select (case when a>b then a else b ...

  9. C#设计模式-中介者模式

    在现实生活中,有很多中介者模式的身影,例如QQ游戏平台,聊天室.QQ群和短信平台,这些都是中介者模式在现实生活中的应用,下面就具体分享下我对中介者模式的理解. 一. 中介者(Mediator)模式 从 ...

  10. 使用Red Gate Sql Compare 数据库同步工具进行SQL Server的两个数据库的结构比较、同步

    将测试版的项目同步(部署)到正式版的时候,两个数据库的结构比较与同步时,如果修改数据库的时候没有记录好修改了那些表,很难将两个数据库进行同步 RedGate Sql Compare使用简介说明: 1. ...