UI基础第三天(代码)
2016-05-23 07:47
435 查看
项目:应用管理
方法:
懒加载测试数据
动态生成
实现:
在ViewController中声明属性data,重写get方法进行懒加载@interface ViewController () //创建存储应用程序数据的数组 @property (nonatomic,strong) NSArray *data; @end //1.懒加载 -(NSArray*) data{ if (_data == nil){ //加载数据 _data = [SSData arrayDate]; } return _data; }
封装数据模型
@interface SSData : NSObject //应用图片 @property (nonatomic,copy) NSString *photo; //应用名字 @property (nonatomic,copy) NSString *name; //对象的构建方法 -(instancetype) initWithDic:(NSDictionary*)dic; //类的构建方法 +(instancetype) dataWithDic:(NSDictionary*)dic; //加载数据 +(NSArray*)arrayDate; @end @implementation SSData //对象的构建方法 -(instancetype) initWithDic:(NSDictionary*)dic{ if (self=[self init]) { self.photo = dic[@"icon"]; self.name = dic[@"name"]; } return self; } //类的构建方法 +(instancetype) dataWithDic:(NSDictionary*)dic{ return [[self alloc] initWithDic:dic]; } //加载数据 +(NSArray*)arrayDate{ NSBundle *bundle = [NSBundle mainBundle]; //1.1获取路径 NSString *path = [bundle pathForResource:@"app" ofType:@"plist"]; //1.2加载数据 NSArray *dataDic = [NSArray arrayWithContentsOfFile:path]; //1.3创建可变数组 NSMutableArray *dataArray = [NSMutableArray array]; //1.4字典转模型 for (NSDictionary *dic in dataDic) { SSData *data = [[SSData alloc] initWithDic:dic]; [dataArray addObject:data]; } return dataArray; } @end
用XIB搭建九宫格的一部分
创建UIView的子类关联XIB
@class SSData; @interface SSView : UIView @property (nonatomic,strong) SSData *data; //新建子View +(instancetype)buildView; @end #import "SSView.h" #import "SSData.h" @interface SSView() @property (weak, nonatomic) IBOutlet UIImageView *imageView; @property (weak, nonatomic) IBOutlet UILabel *nameLabel; //点击事件 - (IBAction)buttonClick:(UIButton*)sender; @end @implementation SSView //新建子View +(instancetype)buildView{ NSBundle *bundle = [NSBundle mainBundle]; SSView *view = [[bundle loadNibNamed:@"SSView" owner:nil options:nil] lastObject]; return view; } //重写setter方法,初始化子控件 -(void)setData:(SSData *)data{ //不要漏掉,漏掉在点击事件时调用就取不到数据 _data = data; //添加应用图片 self.imageView.image = [UIImage imageNamed:data.photo]; //添加应用名称 self.nameLabel.text = data.name; } //点击事件 - (IBAction)buttonClick:(UIButton*)sender { //下载时取消和用户的交互 self.superview.userInteractionEnabled = NO; //提示正在下载 UILabel *tipView = [[UILabel alloc] init]; //self(自定义view).superview(控制器的根view) [self.superview addSubview:tipView]; tipView.text = [NSString stringWithFormat:@"正在下载:%@",self.data.name]; //frame CGFloat tipW = 200; CGFloat tipH = 25; CGFloat tipX = (self.superview.frame.size.width - tipW) / 2; CGFloat tipY = (self.superview.frame.size.height - tipH) / 2; tipView.frame = CGRectMake(tipX, tipY, tipW, tipH); //设置属性 tipView.backgroundColor = [UIColor grayColor]; tipView.textAlignment = NSTextAlignmentCenter; //透明度 tipView.alpha = 0; //圆角 tipView.layer.cornerRadius = 5; tipView.layer.masksToBounds = YES; //剪裁超过bounds的部分 //动画效果 [UIView animateWithDuration:1.0 animations:^{ tipView.alpha = 0.9; } completion:^(BOOL finished) { [UIView animateWithDuration:1.0 delay:3.0 options:UIViewAnimationOptionCurveLinear animations:^{ tipView.alpha = 0; } completion:^(BOOL finished) { //从父view中移除 [tipView removeFromSuperview]; //下载完成后禁用 sender.enabled = NO; //下载完成允许用户交互 self.superview.userInteractionEnabled = YES; }]; }]; } @end
在ViewController中编写动态生成九宫格的方法
- (void)viewDidLoad { [super viewDidLoad]; //2.测试数据 //NSLog(@"%@",self.data); //3.动态生成九宫格 [self buildView]; } //动态生成九宫格 -(void)buildView{ for (int i = 0; i < self.data.count; i++) { //3.1.动态生成九宫格 //3.1.1.创建子view SSView *view = [SSView buildView]; [self.view addSubview: view]; //3.1.2.计算frame //子view的宽 CGFloat viewWidth = 100; //子view的高 CGFloat viewHeight = 100; //子view的横向间距 = (父view的宽度- 3 * 子view的宽度) / 4 CGFloat viewMarginX = ( self.view.frame.size.width - 3 * viewWidth ) / 4; //子view的纵向间距 = 20 CGFloat viewMarginY = 20; //当前子view的行号 = 当前遍历到得索引值 / 总列数 NSInteger viewRow = i / 3; //当前子view的列号 = 当前遍历到得索引值 % 总列数 NSInteger viewColumn = i % 3; //子view横坐标的公式 = 子view的横向间距 + 列号 * (子view的横向间距+ 子view的宽度) CGFloat viewX = viewMarginX + viewColumn * (viewMarginY + viewWidth); //子view纵坐标的公式 = 30 + 行号 * (子view的纵向间距+ 子view的高度) CGFloat viewY = 30 + viewRow * (viewMarginY + viewHeight); //给子view的frame赋值 view.frame = CGRectMake(viewX, viewY, viewWidth, viewHeight); //3.2.获取数据 SSData *data = self.data[i]; //3.3.向九宫格添加数据 view.data = data; } }
测试结果
相关文章推荐
- Gifski:一个跨平台的高质量 GIF 编码器
- 模仿动画的放大缩小容器
- jQuery 1.9.1源码分析系列(十五)动画处理之缓动动画核心Tween
- Android实现定制返回按钮动画效果的方法
- Android中ViewFlipper的使用及设置动画效果实例详解
- jQuery实现美观的多级动画效果菜单代码
- winform异型不规则界面设计的实现方法
- php判断GIF图片是否为动画的方法
- 在ASP.NET 2.0中操作数据之二十:定制数据修改界面
- jQuery实现动画效果circle实例
- HTML5游戏引擎LTweenLite实现的超帅动画效果(附demo源码下载)
- javascript瀑布流式图片懒加载实例
- 浅析JavaScript动画
- js排序动画模拟-插入排序
- javascript+HTML5的Canvas实现Lab单车动画效果
- 基于javascript实现漂亮的页面过渡动画效果附源码下载
- js实现按钮颜色渐变动画效果
- 超赞的jQuery图片滑块动画特效代码汇总
- jQuery实现连续动画效果实例分析
- 利用jquery制作滚动到指定位置触发动画