iOS UI-九宫格

第一节课:
1.复习
2.运行App应用管理,简单界面分析
3.一个应用为一个整体,直接创建一个appView然后计算frame
4.说明弊端,应该根据数据的个数来for循环创建

第二节课:
5.加载plist文件字典转模型
6.分析计算frame 宽高固定,x,y动态去计算
6.1.  行号 row = i / columnCount
6.2 列号 col = i % columnCount
leftMargin = (屏幕的宽 - (appW * columnCount) - appColMagrin * (columnCount - 1)) * 0.5;
appX = leftMargin + (appW + appColMagrin) * col;
appY = topMargin + (appY + appRowMagrin) * row

第三节:
6.3创建appView内部三个字控件,iconView, nameLabel , downloadBtn
6.4 先创建设置背景色,计算frame添加到appView中
6.5 给子控件设置数据,设置label字体和文字对齐方法
注意点:给按钮设置图片或文字还有文字颜色时,要用set方法指定不同状态的文字或图片,不能直接访问titleLabel去给按钮设置文字
7.分析懒加载代码中的问题封装字典转模型细节,


instancetype 是和id
1、相同点
都可以作为方法的返回类型

2、不同点
 1> instancetype可以返回和方法所在类相同类型的对象，id只能返回未知类型的对象；

 2> instancetype只能作为返回值，不能像id那样作为参数，和声明属性

id是个万能指针编译时不确定真实类型,只有在运行时才知道真实的类型
instancetype在编译时就可以确定真实类型,类型一般为所在类的对象类型

下午:

第一节课:

7.1 自定义构造方法,并提供一个类方法
7.2 自定义构造方法时的方法命名规范,注意点
7.3 代码进一步优化,引出xib
8.xib和storyboard的区别及开发中如何去选择
9.MVC概念的引入
9.1用xib去封装appView,并创建一个继承至UIView的类,和xib的类型关联
9.2把xib中的控件连线到自定义类的.h中可以在外面直接访问去给子控件设置数据
9.3.弊端,把模型变成属性引入到自定义view类,当控制器为自定义view类的模型属性赋值时会调用模型属性的set方法,如果我们重写了属性得set方法就会调用我们重写得set方法,在此方法中给appView中的子控件设置数据

第二节课:
10.添加下载按钮点击事件
10.1 点击下载按钮弹出提示标签,并加入动画

第三节课:
11.回顾用xib自定义view的步骤
1.创建一个xib文件,在xib文件中布局好子控件,并设置好对应控件的属性
2.创建一个和xib文件相同的类,此类继承至那个类,取决于xib文件中最顶层控件的类型,
3.指定xib文件的类型为我们自定义的类,然后把需要修改的控件拖线到所关联类的.m文件中
4.自定义类,定义模型属性,并重写模型属性的set方法,在此方法给子控件设置数据
5.在自定义类提供一个可供外部访问的类方法,把加载xib创建appView的过程封装到自定义类中








***********  UIViewAnimationOption(动画选项,默认为匀速) ********
常规动画属性设置（可以同时选择多个进行设置）

UIViewAnimationOptionLayoutSubviews：动画过程中保证子视图跟随运动。

UIViewAnimationOptionAllowUserInteraction：动画过程中允许用户交互。

UIViewAnimationOptionBeginFromCurrentState：所有视图从当前状态开始运行。

UIViewAnimationOptionRepeat：重复运行动画。

UIViewAnimationOptionAutoreverse ：动画运行到结束点后仍然以动画方式回到初始点。

UIViewAnimationOptionOverrideInheritedDuration：忽略嵌套动画时间设置。

UIViewAnimationOptionOverrideInheritedCurve：忽略嵌套动画速度设置。

UIViewAnimationOptionAllowAnimatedContent：动画过程中重绘视图（注意仅仅适用于转场动画）。

UIViewAnimationOptionShowHideTransitionViews：视图切换时直接隐藏旧视图、显示新视图，而不是将旧视图从父视图移除（仅仅适用于转场动画）
UIViewAnimationOptionOverrideInheritedOptions ：不继承父动画设置或动画类型。

2.动画速度控制（可从其中选择一个设置）

UIViewAnimationOptionCurveEaseInOut：动画先缓慢，然后逐渐加速。

UIViewAnimationOptionCurveEaseIn ：动画逐渐变慢。

UIViewAnimationOptionCurveEaseOut：动画逐渐加速。

UIViewAnimationOptionCurveLinear ：动画匀速执行，默认值。

3.转场类型（仅适用于转场动画设置，可以从中选择一个进行设置，基本动画、关键帧动画不需要设置）

UIViewAnimationOptionTransitionNone：没有转场动画效果。

UIViewAnimationOptionTransitionFlipFromLeft ：从左侧翻转效果。

UIViewAnimationOptionTransitionFlipFromRight：从右侧翻转效果。

UIViewAnimationOptionTransitionCurlUp：向后翻页的动画过渡效果。

UIViewAnimationOptionTransitionCurlDown ：向前翻页的动画过渡效果。

UIViewAnimationOptionTransitionCrossDissolve：旧视图溶解消失显示下一个新视图的效果。

UIViewAnimationOptionTransitionFlipFromTop ：从上方翻转效果。

UIViewAnimationOptionTransitionFlipFromBottom：从底部翻转效果。

一、创建九宫格 

实现思路

(1)明确每一块用得是什么view

(2)明确每个view之间的父子关系，每个视图都只有一个父视图，拥有很多的子视图。

(3)可以先尝试逐个的添加格子，最后考虑使用for循环，完成所有uiview的创建

(4)加载app数据，根据数据长度创建对应个数的格子

(5)添加格子内部的子控件

(6)给内部的子控件装配数据

#import "ViewController.h"

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    
    // 设置每行应用的个数
    int clumns = 3;
    // 获取控制器所管理的view的宽度
    CGFloat viewWidth = self.view.frame.size.width;
    
    // 每个应用的宽和高
    CGFloat appW = 75;
    CGFloat appH = 90;
    CGFloat marginTop = 30;//第一行距顶部的距离
    CGFloat marginX = (viewWidth - appW*clumns)/(clumns+1);
    CGFloat marginY = marginX;//设每行之间的间距与marginX相等
    
    for (int i=0; i<9; i++) {
        //1.创建每个应用（UIView）
        UIView *appView = [[UIView alloc] init];
        
        //2.设置appView的属性
        
        //2.1设置appView的背景色
        appView.backgroundColor = [UIColor orangeColor];
        //2.2设置appView的frame属性
        
        //计算每个单元格的列索引
        int colIdx = i%clumns;
        //计算每个单元格的行索引
        int rowIdy = i/clumns;
        
        CGFloat appX = marginX+(appW+marginX)*colIdx;
        CGFloat appY = marginTop+(appH+marginY)*rowIdy;
        
        appView.frame = CGRectMake(appX, appY, appW, appH);
        
        //3.将appView加到self.view
        [self.view addSubview:appView];
        
    }
}

二、向九宫格内加控件

#import "ViewController.h"

@interface ViewController ()
/**
 *  用来存放所有数据的数组
 */
@property (nonatomic, strong) NSArray *appes;
@end

@implementation ViewController

/**
 *  控制器的view加载完成之后就会调用此方法
 */
- (void)viewDidLoad {
    [super viewDidLoad];
    // 格子之间的间距
    CGFloat margin = 20;
    // 格子的宽
    CGFloat appViewW = 100;
    // 格子的高
    CGFloat appViewH = 120;
    // 一行中用三个格子
    NSInteger column = 3;
    // 最左边的间距  =  (控制器view的宽 - 一行中所有格子的宽 - 格子间的间距 * (一行中格子的个数 - 1)) * 0.5
    CGFloat leftMargin = (self.view.bounds.size.width - appViewW * column - (column - 1) *margin) * 0.5;
    CGFloat topMargin = leftMargin;
    // 根据数据的个数来动画创建每一个应用
    for (NSInteger i = 0; i < self.appes.count; i++) {
        
        // 0>  先取出每一个应该的数据
        NSDictionary *dict = self.appes[i];
        
        // 1.创建appView 用来装里面的子控件
        UIView *appView = [[UIView alloc] init];
        // 2.设置背景色
//        appView.backgroundColor = [UIColor blueColor];
        
        // 计算列号
        NSInteger col = i % column;
        // 计算行号
        NSInteger row = i / column;
        // 3.设置frame
        // 计算appViewX = 左边间距  + (appView宽 + 格子间距) *当前格子是在当前行中的第几个
        CGFloat appViewX = leftMargin + (appViewW + margin) * col;
        // appViewY = 顶部间距  + (appViewH + margin) * 当前格子在当前列中是第几个
        CGFloat appViewY = topMargin + (appViewH + margin) * row;
        
        appView.frame = CGRectMake(appViewX, appViewY, appViewW, appViewH);
        
        // 4.添加到控制器的view中
        [self.view addSubview:appView];
        
        // 5.创建应用图片
        UIImageView *iconView = [[UIImageView alloc] init];
        // 设置背景色
//        iconView.backgroundColor = [UIColor purpleColor];
        CGFloat iconW = 70;
        CGFloat iconH = iconW;
        CGFloat iconX = (appViewW - iconW) * 0.5;
        CGFloat iconY = 0;
        iconView.frame = CGRectMake(iconX, iconY, iconW, iconH);
        [appView addSubview:iconView];
        
        // 设置应用图片
        iconView.image = [UIImage imageNamed:dict[@"icon"]];
        
        // 6.应用的名称
        UILabel *nameLabel = [[UILabel alloc] init];
        // 设置背景色
//        nameLabel.backgroundColor = [UIColor yellowColor];
        CGFloat nameX = 0;
        //        CGFloat nameY = iconY + iconH;
        CGFloat nameY = CGRectGetMaxY(iconView.frame);
        CGFloat nameW = appViewW;
        CGFloat nameH = 21;
        // 设置frame
        nameLabel.frame = CGRectMake(nameX, nameY, nameW, nameH);
        // 把名称标签添加到父控件中
        [appView addSubview:nameLabel];
        
        // 设置应用名称
        nameLabel.text = dict[@"name"];
        // 设置字体大小
        nameLabel.font = [UIFont systemFontOfSize:13.0];
        // 设置文字居中
        nameLabel.textAlignment = NSTextAlignmentCenter;
        
        // 7.下载按钮
        UIButton *downloadBtn = [[UIButton alloc] init];
//        downloadBtn.backgroundColor = [UIColor redColor];
        CGFloat downloadX = iconX;
        CGFloat downloadY = CGRectGetMaxY(nameLabel.frame);
        CGFloat downlaodW = iconW;
        CGFloat downlaodH = 30;
        downloadBtn.frame = CGRectMake(downloadX, downloadY, downlaodW, downlaodH);
        [appView addSubview:downloadBtn];
        
        // 设置按钮背景图片
        [downloadBtn setBackgroundImage:[UIImage imageNamed:@"buttongreen"] forState:UIControlStateNormal];
        [downloadBtn setBackgroundImage:[UIImage imageNamed:@"buttongreen_highlighted"] forState:UIControlStateDisabled];
        // 设置按钮的文字
        [downloadBtn setTitle:@"下载" forState:UIControlStateNormal];
        [downloadBtn setTitle:@"已下载" forState:UIControlStateDisabled];
        
        downloadBtn.titleLabel.font = [UIFont systemFontOfSize:15];
    }
}


#pragma mark - 懒加载
- (NSArray *)appes {
    // 1.判断当前的数组属性是否为空,如果为空的时候再去加载数据
    if (_appes == nil) {
        // 2.获取plist文件路径
        NSString *path = [[NSBundle mainBundle] pathForResource:@"app.plist" ofType:nil];
        // 3.加载plist文件
        NSArray *dictArr = [NSArray arrayWithContentsOfFile:path];
        _appes = dictArr;
        
    }
    
    return _appes;
    
}

@end

三、向九宫格内加数据

#import "ViewController.h"

@interface ViewController ()
/**
 *  用来存放所有数据的数组
 */
@property (nonatomic, strong) NSArray *appes;
@end

@implementation ViewController

/**
 *  控制器的view加载完成之后就会调用此方法
 */
- (void)viewDidLoad {
    [super viewDidLoad];
    // 格子之间的间距
    CGFloat margin = 20;
    // 格子的宽
    CGFloat appViewW = 100;
    // 格子的高
    CGFloat appViewH = 120;
    // 一行中用三个格子
    NSInteger column = 3;
    // 最左边的间距  =  (控制器view的宽 - 一行中所有格子的宽 - 格子间的间距 * (一行中格子的个数 - 1)) * 0.5
    CGFloat leftMargin = (self.view.bounds.size.width - appViewW * column - (column - 1) *margin) * 0.5;
    CGFloat topMargin = leftMargin;
    // 根据数据的个数来动画创建每一个应用
    for (NSInteger i = 0; i < self.appes.count; i++) {
        
        // 0>  先取出每一个应该的数据
        NSDictionary *dict = self.appes[i];
        
        // 1.创建appView 用来装里面的子控件
        UIView *appView = [[UIView alloc] init];
        // 2.设置背景色
//        appView.backgroundColor = [UIColor blueColor];
        
        // 计算列号
        NSInteger col = i % column;
        // 计算行号
        NSInteger row = i / column;
        // 3.设置frame
        // 计算appViewX = 左边间距  + (appView宽 + 格子间距) *当前格子是在当前行中的第几个
        CGFloat appViewX = leftMargin + (appViewW + margin) * col;
        // appViewY = 顶部间距  + (appViewH + margin) * 当前格子在当前列中是第几个
        CGFloat appViewY = topMargin + (appViewH + margin) * row;
        
        appView.frame = CGRectMake(appViewX, appViewY, appViewW, appViewH);
        
        // 4.添加到控制器的view中
        [self.view addSubview:appView];
        
        // 5.创建应用图片
        UIImageView *iconView = [[UIImageView alloc] init];
        // 设置背景色
//        iconView.backgroundColor = [UIColor purpleColor];
        CGFloat iconW = 70;
        CGFloat iconH = iconW;
        CGFloat iconX = (appViewW - iconW) * 0.5;
        CGFloat iconY = 0;
        iconView.frame = CGRectMake(iconX, iconY, iconW, iconH);
        [appView addSubview:iconView];
        
        // 设置应用图片
        iconView.image = [UIImage imageNamed:dict[@"icon"]];
        
        // 6.应用的名称
        UILabel *nameLabel = [[UILabel alloc] init];
        // 设置背景色
//        nameLabel.backgroundColor = [UIColor yellowColor];
        CGFloat nameX = 0;
        //        CGFloat nameY = iconY + iconH;
        CGFloat nameY = CGRectGetMaxY(iconView.frame);
        CGFloat nameW = appViewW;
        CGFloat nameH = 21;
        // 设置frame
        nameLabel.frame = CGRectMake(nameX, nameY, nameW, nameH);
        // 把名称标签添加到父控件中
        [appView addSubview:nameLabel];
        
        // 设置应用名称
        nameLabel.text = dict[@"name"];
        // 设置字体大小
        nameLabel.font = [UIFont systemFontOfSize:13.0];
        // 设置文字居中
        nameLabel.textAlignment = NSTextAlignmentCenter;
        
        // 7.下载按钮
        UIButton *downloadBtn = [[UIButton alloc] init];
//        downloadBtn.backgroundColor = [UIColor redColor];
        CGFloat downloadX = iconX;
        CGFloat downloadY = CGRectGetMaxY(nameLabel.frame);
        CGFloat downlaodW = iconW;
        CGFloat downlaodH = 30;
        downloadBtn.frame = CGRectMake(downloadX, downloadY, downlaodW, downlaodH);
        [appView addSubview:downloadBtn];
        
        // 设置按钮背景图片
        [downloadBtn setBackgroundImage:[UIImage imageNamed:@"buttongreen"] forState:UIControlStateNormal];
        [downloadBtn setBackgroundImage:[UIImage imageNamed:@"buttongreen_highlighted"] forState:UIControlStateDisabled];
        // 设置按钮的文字
        [downloadBtn setTitle:@"下载" forState:UIControlStateNormal];
        [downloadBtn setTitle:@"已下载" forState:UIControlStateDisabled];
        
        downloadBtn.titleLabel.font = [UIFont systemFontOfSize:15];
    }
}


#pragma mark - 懒加载
- (NSArray *)appes {
    // 1.判断当前的数组属性是否为空,如果为空的时候再去加载数据
    if (_appes == nil) {
        // 2.获取plist文件路径
        NSString *path = [[NSBundle mainBundle] pathForResource:@"app.plist" ofType:nil];
        // 3.加载plist文件
        NSArray *dictArr = [NSArray arrayWithContentsOfFile:path];
        _appes = dictArr;
        
    }
    
    return _appes;
    
}

代码问题

我们是直接通过字典的键名获取plist中的数据信息，在viewController中需要直接和数据打交道，如果需要多次使用可能会因为不小心把键名写错，而程序并不报错。鉴于此，可以考虑把字典数据转换成一个模型，把数据封装到一个模型中去，让viewController不再直接和数据打交道，而是和模型交互。

一般情况下，设置数据和取出数据都使用“字符串类型的key”，编写这些key时，编辑器没有智能提示，需要手敲。如：

dict[@"name"] = @"Jack";

NSString *name = dict[@"name"];

手敲字符串key，key容易写错

Key如果写错了，编译器不会有任何警告和报错，造成设错数据或者取错数据

四、字典转模型

字典转模型的好处：

（1）降低代码的耦合度

（2）所有字典转模型部分的代码统一集中在一处处理，降低代码出错的几率

（3）在程序中直接使用模型的属性操作，提高编码效率 

（4）调用方不用关心模型内部的任何处理细节

字典转模型的注意点：

模型应该提供一个可以传入字典参数的构造方法

- (instancetype)initWithDict:(NSDictionary *)dict;

+ (instancetype)xxxWithDict:(NSDictionary *)dict;

提示：在模型中合理地使用只读属性，可以进一步降低代码的耦合度。

#import <Foundation/Foundation.h>
/** NSString block用copy
 除了字符串和 block 控件 其它基本OC对象都用strong
 weak  控件最好都用
 assgin 基本数据类型
 */
@interface HMApp : NSObject
/** 应用图片 */
@property (nonatomic, copy) NSString *icon;
/** 应用名称 */
@property (nonatomic, copy) NSString *name;

// id他instancetype有什么区别
// 1.相同点:他们都可以当方法的返回值
// 2.不同点:id可以来声明变量,id可以当参数类型,
// id是一个万能指针,他在编译的时候不会确定真实的类型,只有在运行时候才知道真实类型
// instancetype在编译的时候就能确定他的返回值真实类型,这种更安全
//clang 3.5

/**  */

- (instancetype)initWithDict:(NSDictionary *)dict;//用字典实例化对象的成员方法
+ (instancetype)appWithDict:(NSDictionary *)dict;//用字典实例化对象的类方法，又称工厂方法
@end

#import "HMApp.h"

@implementation HMApp
- (instancetype)initWithDict:(NSDictionary *)dict {
    if (self = [super init]) {
        self.icon = dict[@"icon"];
        self.name = dict[@"name"];

        [self setValuesForKeysWithDictionary:dict];//加载所有属性

    }
    
    return self;
}

+ (instancetype)appWithDict:(NSDictionary *)dict {
    return [[self alloc] initWithDict:dict];
}
@end

/**
 xib和stroyboard的区别
 1.相同点:都可以用来我们软件界面
 2.不同点:在storyboard可以用来搭建整个应用的所有界面,最少也是一个界面
 xib可以用来描述一个界面中的某一个部分,或一个应用的一个界面,及整个界面
 */
#import "ViewController.h"
#import "HMApp.h"

@interface ViewController ()
/**
 *  用来存放所有数据的数组
 */
@property (nonatomic, strong) NSArray *appes;
@end

@implementation ViewController

/**
 *  控制器的view加载完成之后就会调用此方法
 */
- (void)viewDidLoad {
    [super viewDidLoad];
    // 格子之间的间距
    CGFloat margin = 20;
    // 格子的宽
    CGFloat appViewW = 100;
    // 格子的高
    CGFloat appViewH = 120;
    // 一行中用三个格子
    NSInteger column = 3;
    // 最左边的间距  =  (控制器view的宽 - 一行中所有格子的宽 - 格子间的间距 * (一行中格子的个数 - 1)) * 0.5
    CGFloat leftMargin = (self.view.bounds.size.width - appViewW * column - (column - 1) *margin) * 0.5;
    CGFloat topMargin = leftMargin;
    // 根据数据的个数来动画创建每一个应用
    for (NSInteger i = 0; i < self.appes.count; i++) {
        
        
  
        // 0>  先取出每一个应该的数据
//        NSDictionary *dict = self.appes[i];
        // 取数组中每一个用来表示数据的模型对象
        HMApp *app = self.appes[i];
        
        // 1.创建appView 用来装里面的子控件
        UIView *appView = [[UIView alloc] init];
        // 2.设置背景色
//        appView.backgroundColor = [UIColor blueColor];
        
        // 计算列号
        NSInteger col = i % column;
        // 计算行号
        NSInteger row = i / column;
        // 3.设置frame
        // 计算appViewX = 左边间距  + (appView宽 + 格子间距) *当前格子是在当前行中的第几个
        CGFloat appViewX = leftMargin + (appViewW + margin) * col;
        // appViewY = 顶部间距  + (appViewH + margin) * 当前格子在当前列中是第几个
        CGFloat appViewY = topMargin + (appViewH + margin) * row;
        
        appView.frame = CGRectMake(appViewX, appViewY, appViewW, appViewH);
        
        // 4.添加到控制器的view中
        [self.view addSubview:appView];
        
        // 5.创建应用图片
        UIImageView *iconView = [[UIImageView alloc] init];
        // 设置背景色
//        iconView.backgroundColor = [UIColor purpleColor];
        CGFloat iconW = 70;
        CGFloat iconH = iconW;
        CGFloat iconX = (appViewW - iconW) * 0.5;
        CGFloat iconY = 0;
        iconView.frame = CGRectMake(iconX, iconY, iconW, iconH);
        [appView addSubview:iconView];
        
        // 设置应用图片
        iconView.image = [UIImage imageNamed:app.icon];
        
        // 6.应用的名称
        UILabel *nameLabel = [[UILabel alloc] init];
        // 设置背景色
//        nameLabel.backgroundColor = [UIColor yellowColor];
        CGFloat nameX = 0;
        //        CGFloat nameY = iconY + iconH;
        CGFloat nameY = CGRectGetMaxY(iconView.frame);
        CGFloat nameW = appViewW;
        CGFloat nameH = 21;
        // 设置frame
        nameLabel.frame = CGRectMake(nameX, nameY, nameW, nameH);
        // 把名称标签添加到父控件中
        [appView addSubview:nameLabel];
        
        // 设置应用名称
        nameLabel.text = app.name;
        // 设置字体大小
        nameLabel.font = [UIFont systemFontOfSize:13.0];
        // 设置文字居中
        nameLabel.textAlignment = NSTextAlignmentCenter;
        
        // 7.下载按钮
        UIButton *downloadBtn = [[UIButton alloc] init];
//        downloadBtn.backgroundColor = [UIColor redColor];
        CGFloat downloadX = iconX;
        CGFloat downloadY = CGRectGetMaxY(nameLabel.frame);
        CGFloat downlaodW = iconW;
        CGFloat downlaodH = 30;
        downloadBtn.frame = CGRectMake(downloadX, downloadY, downlaodW, downlaodH);
        [appView addSubview:downloadBtn];
        
        // 设置按钮背景图片
        [downloadBtn setBackgroundImage:[UIImage imageNamed:@"buttongreen"] forState:UIControlStateNormal];
        [downloadBtn setBackgroundImage:[UIImage imageNamed:@"buttongreen_highlighted"] forState:UIControlStateDisabled];
        // 设置按钮的文字
        [downloadBtn setTitle:@"下载" forState:UIControlStateNormal];
        [downloadBtn setTitle:@"已下载" forState:UIControlStateDisabled];
        
        downloadBtn.titleLabel.font = [UIFont systemFontOfSize:15];
    }
}


#pragma mark - 懒加载
- (NSArray *)appes {
    // 1.判断当前的数组属性是否为空,如果为空的时候再去加载数据
    if (_appes == nil) {
        // 2.获取plist文件路径
        NSString *path = [[NSBundle mainBundle] pathForResource:@"app.plist" ofType:nil];
        // 3.加载plist文件
        NSArray *dictArr = [NSArray arrayWithContentsOfFile:path];

        // 创建一个可变数据用来保存每一个模型对象(创建可变数组时并给其分配好容量)
        NSMutableArray *arrM = [NSMutableArray arrayWithCapacity:dictArr.count];
        // 遍历字典数组把每一个字典转换成一个模型对象
        for (NSDictionary *dict in dictArr) {
            // 创建模型对象
//            HMApp *app = [[HMApp alloc] initWithDict:dict];
            HMApp *app = [HMApp appWithDict:dict];
            // 给模型对象中的属性赋值
//            app.icon = dict[@"icon"];
//            app.name = dict[@"name"];
            // 把模型添加到数组
            [arrM addObject:app];
        }
        // 把装有所有模型的数组赋值给我们的数组属性
        _appes = arrM;
        
    }
    
    return _appes;
    
}
@end

五、用xib自定义view

HMAppView.xib文件

/*--------------------Model-------------------*/

#import <Foundation/Foundation.h>
/** NSString block用copy
 除了字符串和 block 控件 其它基本OC对象都用strong
 weak  控件最好都用
 assgin 基本数据类型
 */
@interface HMApp : NSObject
/** 应用图片 */
@property (nonatomic, copy) NSString *icon;
/** 应用名称 */
@property (nonatomic, copy) NSString *name;

// id他instancetype有什么区别
// 1.相同点:他们都可以当方法的返回值
// 2.不同点:id可以来声明变量,id可以当参数类型,
// id是一个万能指针,他在编译的时候不会确定真实的类型,只有在运行时候才知道真实类型
// instancetype在编译的时候就能确定他的返回值真实类型,这种更安全
//clang 3.5
- (instancetype)initWithDict:(NSDictionary *)dict;
+ (instancetype)appWithDict:(NSDictionary *)dict;
@end



#import "HMApp.h"

@implementation HMApp
- (instancetype)initWithDict:(NSDictionary *)dict {
    if (self = [super init]) {
        self.icon = dict[@"icon"];
        self.name = dict[@"name"];
    }
    
    return self;
}

+ (instancetype)appWithDict:(NSDictionary *)dict {
    return [[self alloc] initWithDict:dict];
}
@end

/*-----------------View---------------------*/
#import <UIKit/UIKit.h>
@class HMApp;
@interface HMAppView : UIView
// 把模型变成一个属性引用到自定义视图中
@property (nonatomic, strong) HMApp *app;

+ (instancetype)appView;
@end



#import "HMAppView.h"
#import "HMApp.h"

@interface HMAppView ()
/** 应用的图片 */
@property (weak, nonatomic) IBOutlet UIImageView *iconView;
/** 应用的名称 */
@property (weak, nonatomic) IBOutlet UILabel *nameLabel;
@end

@implementation HMAppView
// 当点击下载按钮之后调用的方法
- (IBAction)downloadBtnClick:(UIButton *)downBtn {
    NSLog(@"%ld----%@", self.tag ,self);
    // 1.把按钮设置为禁用状态
    downBtn.enabled = NO;
    // 2.创建一个label
    UILabel *downLabel = [[UILabel alloc] init];
    downLabel.text = [NSString stringWithFormat:@"%@下载完成", self.app.name];
    // 设置字体
    downLabel.font = [UIFont systemFontOfSize:13.0];
    // 设置文字居中
    downLabel.textAlignment = NSTextAlignmentCenter;
    // 设置label的文字颜色
    downLabel.textColor = [UIColor redColor];
    // 设置背景色
    downLabel.backgroundColor = [UIColor blackColor];
    // 设置bounds
    downLabel.bounds = CGRectMake(0, 0, 200, 21);
    // 设置标签的位置在屏幕的中心
    downLabel.center = self.superview.center;
    // 把提示标签添加在控制器的view上
    [self.superview addSubview:downLabel];
    // 设置label透明度
    downLabel.alpha = 0.0;
    // 设置圆角半径
    downLabel.layer.cornerRadius = 5;
    // 把超出边界的部分裁剪掉
    downLabel.clipsToBounds = YES;
//    downLabel.layer.masksToBounds = YES;
    
    //执行一个两秒中的动画,让标签慢慢的显示
    [UIView animateWithDuration:2.0 animations:^{ // 表示要执行的动画代码
        // 设置label的透明度
        downLabel.alpha = 0.7;
    } completion:^(BOOL finished) { // 表示动画执行完成之后要做得事情
        // 上面的动画执行完成之后推迟2秒之后执行一个2秒的一个动画
        [UIView animateWithDuration:2.0 delay:2.0 options:UIViewAnimationOptionCurveLinear animations:^{
            // 设置label透明度
            downLabel.alpha = 0.0;
        } completion:^(BOOL finished) { // 动画执行完成之后把label从父控件中移除
            // 把这个label从它的父控件中移除掉
            [downLabel removeFromSuperview];
        }];
    }];
}


+ (instancetype)appView {
    return [[[NSBundle mainBundle] loadNibNamed:@"HMAppView" owner:nil options:nil]lastObject];
}
// 重写模型属性的set方法,当外部给自定义视图的模型属性赋值时就会调用此方法,
- (void)setApp:(HMApp *)app {
#warning mark - 重写set方法一定要注意给属性下划线的成员变量赋值
    _app = app;
    // 1.设置应用图片
    self.iconView.image = [UIImage imageNamed:app.icon];
    // 2.设置应用名称
    self.nameLabel.text = app.name;
    

}


@end

/*-------------------Controller--------------*/
/**
 xib和stroyboard的区别
 1.相同点:都可以用来我们软件界面
 2.不同点:在storyboard可以用来搭建整个应用的所有界面,最少也是一个界面
 xib可以用来描述一个界面中的某一个部分,或一个应用的一个界面,及整个界面
 */
#import "ViewController.h"
#import "HMApp.h"
#import "HMAppView.h"

@interface ViewController ()
/**
 *  用来存放所有数据的数组
 */
@property (nonatomic, strong) NSArray *appes;
@end

@implementation ViewController

/**
 *  控制器的view加载完成之后就会调用此方法
 */
- (void)viewDidLoad {
    [super viewDidLoad];
    // 格子之间的间距
    CGFloat margin = 20;
//    // 格子的宽
//    CGFloat appViewW = 100;
//    // 格子的高
//    CGFloat appViewH = 120;
    // 一行中用三个格子
    NSInteger column = 3;
    // 根据数据的个数来动画创建每一个应用
    for (NSInteger i = 0; i < self.appes.count; i++) {
        
        // 1.创建appView
        HMAppView *appView = [HMAppView appView];
        appView.tag = i;
        // 2.取数组中每一个用来表示数据的模型对象
        HMApp *app = self.appes[i];
        // 3.给自定义视图传递模型
        appView.app = app;
        // 自定义视图的大小应该根据xib中的视图的大小来动态的设置而不应该直接固定死
        // 4.拿到xib中appView的宽
        CGFloat appViewW = appView.frame.size.width;
        // xib中appView的高来表示我们一个视图的高
        CGFloat appViewH = appView.frame.size.height;
        // 最左边的间距  =  (控制器view的宽 - 一行中所有格子的宽 - 格子间的间距 * (一行中格子的个数 - 1)) * 0.5
        CGFloat leftMargin = (self.view.bounds.size.width - appViewW * column - (column - 1) *margin) * 0.5;
        // 头部间距
        CGFloat topMargin = leftMargin;
        // 计算列号
        NSInteger col = i % column;
        // 计算行号
        NSInteger row = i / column;
        // 3.设置frame
        // 计算appViewX = 左边间距  + (appView宽 + 格子间距) *当前格子是在当前行中的第几个
        CGFloat appViewX = leftMargin + (appViewW + margin) * col;
        // appViewY = 顶部间距  + (appViewH + margin) * 当前格子在当前列中是第几个
        CGFloat appViewY = topMargin + (appViewH + margin) * row;
        
        appView.frame = CGRectMake(appViewX, appViewY, appViewW, appViewH);
        
        // 4.添加到控制器的view中
        [self.view addSubview:appView];
        
    }
}


#pragma mark - 懒加载
- (NSArray *)appes {
    // 1.判断当前的数组属性是否为空,如果为空的时候再去加载数据
    if (_appes == nil) {
        // 2.获取plist文件路径
        NSString *path = [[NSBundle mainBundle] pathForResource:@"app.plist" ofType:nil];
        // 3.加载plist文件
        NSArray *dictArr = [NSArray arrayWithContentsOfFile:path];
        
        // 创建一个可变数据用来保存每一个模型对象(创建可变数组时并给其分配好容量)
        NSMutableArray *arrM = [NSMutableArray arrayWithCapacity:dictArr.count];
        // 遍历字典数组把每一个字典转换成一个模型对象
        for (NSDictionary *dict in dictArr) {
            // 创建模型对象
            //            HMApp *app = [[HMApp alloc] initWithDict:dict];
            HMApp *app = [HMApp appWithDict:dict];
            // 给模型对象中的属性赋值
            //            app.icon = dict[@"icon"];
            //            app.name = dict[@"name"];
            // 把模型添加到数组
            [arrM addObject:app];
        }
        // 把装有所有模型的数组赋值给我们的数组属性
        _appes = arrM;
        
    }
    
    return _appes;
    
}


/** 用xib来自定义一个视图的步骤
1.创建一个xib文件用来描述我们局部界面(并在里面摆放好所有的子控件,并设置好它们的属性)
2.创建一个类来和我们的xib文件进行关联(这个类也是用来管理我们的xib文件,创建的自定义类的类名最好和我们xib的文件名称一样)(创建的类它要继承至什么类,取决于xib文件中最顶层控件的类型)
3.指定xib中class类型,如果不指定创建出来的xib和我们的自定义类没有任何关系
 4.把需要修改或需要设置的控件连线到我们自定义类.m中
 5.在自定义view类的.h文件引入模型,就是把模型当成一个属性定义在我们的自定义view类中
 6.重写模型属性set方法,当外部给这个模型属性赋值的时候就会调用模型属性的set方法,我们在重写的模型属性的set方法中给自定义视图的子控件去设置数据
 
*/

@end

补充说明

 View的封装思路

（1） 如果一个view内部的子控件比较多，一般会考虑自定义一个view，把它内部子控件的创建屏蔽起来，不让外界关心

（2） 外界可以传入对应的模型数据给view，view拿到模型数据后给内部的子控件设置对应的数据

mvc机制简单说明

说明：

（1）在开发过程中，作为控制器处理的量级应该很轻，不该操心的不操心。协调好模型和视图就ok了，要学会当一个好老板。

（2）三个部分各司其职，数据模型只负责数据的处理，视图部分只负责把拿到的数据进行显示，两个部分都是被动的，等待着大管家控制器的调遣。

（3）在OC中，如果视图和数据模型之间有通道，那控制器是否处于失控状态呢？

1.MVC是一种设计思想，贯穿于整个iOS开发中，需要积累一定的项目经验，才能深刻体会其中的含义和好处

  MVC中的三个角色

  M：Model，模型数据

  V：View，视图（界面）

  C：Control，控制中心

 

2.MVC的几个明显的特征和体现：

 View上面显示什么东西，取决于Model

 只要Model数据改了，View的显示状态会跟着更改

 Control负责初始化Model，并将Model传递给View去解析展示