UI基础第三天（代码）

项目：应用管理

方法：

• 懒加载
• 测试数据
• 动态生成

实现：

• 在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;
    }
}

• 测试结果