【封装xib Objective-C语言】

一、我们先把九宫格应用管理的内容再给大家过一下：

1.上一篇文章，咱们实现了一个应用管理这个案例，

我们实现了哪些重要的功能呢：

1）第一个，我们是懒加载这个数组：

//重写apps属性的getter方法，进行懒加载数据

- (NSArray *)apps{

if(_apps == nil){

//1.加载数据，获取app.plist文件在手机上的路径

NSString *path = [[NSBundle mainBundle] pathForResource:@“app.plist” ofType:nil];

//2.根据路径加载数据

NSArray *arrayDict = [NSArray arrayWithContentsOfFile:path];

//3.创建一个可变数组，用来保存一个一个的模型对象

NSMutableArray *arrayModels = [NSMutableArray array];//一个空的可变数组

//4.循环字典数组，把每个字典对象转换成一个模型对象

for(NSDictionary *dict in arrayModels){

//1.创建一个模型

TestApp *model = [TestApp appWithDict:dict];

//2.把模型加到arrayModels中

[arrayModels addObject:model];

}

_apps = arrayModels;

}

return _apps;

}

第一个，我们是懒加载这个数据，懒加载数据的时候，因为数据本身是一个字典的这么一个集合，

我们首先把这个字典，存到一个数组里面以后，接下来，我们把字典转成模型，

2）字典转模型的基本思路就是：

1 > 首先，把数据读到一个字典集合，

2> 第二步，循环字典集合里面的每一个字典，把每一个字典，创建一个对应的模型类，然后把字典存进去，把字典中的每一个键对应的值，赋值给这个模型对应的属性，

3> 第三步，把这个模型加到一个模型数组里面，

4> 第四步，接下来，把模型数组都填满以后，赋值给这个_apps集合，返回这个_apps属性，

然后，当我们这个懒加载值完毕以后，然后这个apps集合当中，就保存了一个一个的模型，一个模型，就对应的是一个字典对象的数据，

然后，为什么要叫它懒加载呢，因为当它只有第一次执行的时候，它的这个_apps == nil ，它是一个nil，等于空的话，才会去加载这些数据，当你第二次再调这个getter方法的时候，它这个_apps就不为空了，就不加载数据了，直接把集合是不是给你返回了，

这是我们这个懒加载数据，

2）有我们这个懒加载数据以后呢，紧接着，我们就在这个viewDidLoad，控制器的这个View，加载完毕以后，接下来，我们在里面通过循环的方式，以这个集合apps当中有多少个元素对象，它就创建多少个view，每个view创建好以后，设置view的一些坐标、frame，

- (void)viewDidLoad{

[super viewDidLoad];

//假设每行的应用的个数=3

int columns = 3;

//获取控制器所管理的view的宽度

CGFloat viewWidth = self.view.frame.size.width;

//设置每个应用的宽和高

CGFloat appW = 75;

CGFloat appH = 90;

CGFloat marginTop = 30;//第一行距离顶部的距离，

CGFloat marginX = (viewWidth - columns * appW) / (columns + 1);

CGFloat marginY = marginX;//假设每行之间的间距与marginX相等

for(int i=0;i<self.apps.count;i++){

//获取当前这个应用的数据

TestApp *appModel = self.apps[i];

//1.创建每个应用（UIView）

UIView *appView = [[UIView alloc] init];

//2.设置appView的属性

//2.1 设置appView的frame属性

//计算每个单元格所在的列的索引

int colIdx = i % columns;

//计算每个单元格所在的行的索引

int rowIdx = i / columns;

CGFloat appX = marginX + colIdx * (marginX + appW);

CGFloat appY = marginTop + rowIdx * (marginY+ appH);

appView.frame = CGRectMake(appX,appY,appW,appH);

//3.将appView加到self.view（控制器所管理的那个view）

[self.view addSubview:appView];

//4.向UIView中增加一些子控件

//4.1 增加一个图片框

UIImageView *imgViewIcon = [[UIImageView alloc] init];

//设置frame

CGFloat iconW = 45;

CGFloat iconH = 45;

CGFloat iconX = (appView.frame.size.width - iconW) * 0.5;

CGFloat iconY = 0;

imgViewIcon.frame = CGRectMake(iconX,iconY,iconW,iconH);

//把图片框添加到appView中

[appView addSubview:imgViewIcon];

//设置图片框的数据

imgViewIcon.image = [UIImage imageNamed:appModel.icon];

//4.2 增加一个Label （标签）

//创建Label

UILabel *lblName = [[UILabel alloc] init];

//设置frame

CGFloat nameW = appView.frame.size.width;

CGFloat nameH = 20;

CGFloat nameX = 0;

CGFloat nameY = CGRectGetMaxY(imgViewIcon.frame);

lblName.frame = CGRectMake(nameX,nameY,nameW,nameH);

//添加到appView中

[appView addSubview:lblName];

//设置Label的数据（标题）

lblName.text = appModel.name;

//设置Label的文字的字体大小

lblName.font = [UIFont systemFontOfSize:12];

//设置文字居中对齐

lblName.textAlignment = NSTextAlignmentCenter;

//4.3 添加按钮

UIButton *btnDownload = [[UIButton alloc] init];

CGFloat btnW = iconW;

CGFloat btnH = 20;

CGFloat btnX = iconX;

CGFloat btnY = CGRectGetMaxY(lblName.frame);

btnDownload.frame = CGRectMake(btnX,btnY,btnW,btnH);

[appView addSubview:btnDownload];

[btnDownload setTitle:@“下载” forState:UIControlStateNormal];

[btnDownload setTitle:@“已安装” forState:UIControlStateDisabled];

[btnDownload setBackgroundImage:[UIImage imageNamed:@buttongreen"] forState:UIControlStateNormal];

[btnDownload setBackgroundImage:[UIImage imageNamed:@“buttongreen_highlighted”] forState:UIControlStateHighlighted];

btnDownload.titleLabel.font = [UIFont systemFontOfSize:14];

[btnDownload addTarget:self action:@selector(btnDownloadClick) forControlEvents:UIControlEventTouchUpInside];

}

}

//按钮单击事件

- (void)btnDownloadClick{

NSLog(@“按钮被点击了…”);

}

@end

子控件增加完毕以后，我们从这个集合这个数组里面TestApp *appModel = self.apps[i];取到当前遍历的这套数据，然后把这套数据里的一些数据里面的内容，赋值给我们子控件的一些属性，这样的话，我们这些控件的数据是不是也就有了吧，

然后呢，当都赋值完毕以后，我们这里给按钮注册了一个单击事件，

然后呢，我们运行完毕以后，就是这样的一个效果：

然后，后面这两个就是没有用的吧：TestQQApp.h和TestQQApp.m，两个文件，

这两个文件是没有任何意义的，就是为了给大家演示字典转模型时把返回值写为“TestApp *”为什么不合适的，因为子类继承时，返回的还是父类的类型，

把这两个给删了吧，

4）然后，我们还有一个，就是计算九宫格的那个坐标，计算九宫格的那个坐标，你下来把它再看一遍，熟练一下那个思路，就可以了，

关键那么几点，就是：

1 > 第一点，先确定每一个View的高和宽，

2 > 第二点，计算View和View之间的间距，水平间距，还有距上方这个间距，以及垂直间距，

3 > 第三点，把这三个间距拿到以后，第三步，计算任何一个View的它所在的列的索引，和它所在的行的索引，把这两个值拿到以后，X和Y就能计算了，也就是我们计算这个坐标，这么几点，大家需要注意的，

二、好，接下来，我们就给大家说，另外一个问题，

是什么问题呢，就是之前我们在动态创建每一个应用的时候，在这里，是不是写了一堆去动态创建子控件的代码，在这里写了一堆，这些代码都是动态去创建每一个View下面那些子控件的代码吧，

这些代码写在这里，非常啰嗦，非常多，

那么我们每次需要实现九宫格的时候，这些代码是不是我们现在都要写一遍，都要写一遍，非常不方便，

我们解决办法就是：通过一个xib，来描述一个界面，

那么，xib是什么，还记得吧，xib实际就是用来描述一个软件界面的这么一个文件，

那么，就是我们通过鼠标拖、拉、拽，能把控件拖上去，就像我们这里的storyboard一样，可以把控件直接拖上来，就能以可视化开发，所见即所得，这个效果，看到的样子，运行起来，就是这么一个效果，

ok，这是我们这么一个xib的作用，那么，之前给大家介绍了一下这个xib和这个storyboard的区别，还记得吗：

1）xib一般用来描述局部的一个界面吧，

而我们storyboard可以描述多个这个UI界面，可以就是让我们多个整个手机界面，可以放多个控制器，每个控制器之间是如何跳转的，那个连线关系，也可以通过storyboard来描述，

但是一般情况下，我们xib只用来描述局部的界面，

我们这里运行起来以后，希望用xib来描述，是不是我们的一个应用啊，

希望用xib描述这一个应用，然后这一个应用，我反复让它加载十几次，这样的话，是不是看到有十几个这个应用界面了，

ok，那么接下来，我们就试着用xib给大家描述一下这个应用，

2.那么首先，我们要用xib，所以我们要新建一个xib

注意，“叉爱必”和xib是不是一回事儿，是一回事儿，

注意看，最右边那一列，最上面有个黄色的01应用管理文件夹，注意，这是一个文件夹吗，这是一个Group ，这叫一个Group ，这是一个组，

这是逻辑上的这么一个组，事实上在磁盘上，有这个文件夹吗，没有，

例如，我们右键点这个蓝色的01应用管理项目名称，选择New Group，再建立新的一个组，建完之后，你选择蓝色的01应用管理项目名称，右键，选择Show in Folder，磁盘上看得到这个文件夹吗，看得到这个新建的组吗，是不是看不到，

所以说，这只是逻辑上的一个文件夹，这样使我们项目看起来更清晰一些吧，这叫一个Group，

好，那我们在这里给它新建一个xib，右键点击黄色的01应用管理这个组，选择New File，

我们说，xib文件，是不是用来描述软件界面的，软件的界面，是不是就是软件和用户打交道的一个接口，所以你这里选择User Interface，

不是选择Storyboard，不是选择View，不是选择Empty，其实这两个差别不大，这个Empty是完完全全的一个空的xib，建好以后里面啥都没有，完全需要自己拖，

View，这是里面有View，

我们就建一个这个Empty，空的xib，里面什么都没有，什么都没有，都需要你自己拖，

那么，给这个xib起个名字，叫什么，还记得我们这个项目的类前缀叫什么吗，叫Test，所以写上Test，

然后这个xib是做什么的呢，是用这个xib来描述一个应用这个界面吧，

一个应用就是一个App，所以叫TestApp.xib，因为用来描述这个应用吧，一个应用就是一个UIView，所以叫TestAppView.xib，

这样的话，这个xib就是用来描述一个应用的View的这个东西，这是我们起名字的一个思路，

之后，点击Create，创建完了xib之后，大家看，这里有什么东西吗，没有，

注意，我们要的这个应用，一个应用就是一个小的View吧，

所以说，我们要的这个xib，描述一个View，所以说，我们就要先在xib上拖一个View出来，

如果你希望xib描述其他东西，你就拖一个其他东西出来，

因为我现在一个应用就是一个UIView：

//1.创建每个应用（UIView）