A.storyboard和xib
1.storyboard: 相对xib较重量级，控制整个应用的所有界面
2.xib: 轻量级，一般用来描述局部界面
B.使用
1.新建xib文件
New File ==> User Interface ==> Empty
2.打开新建的xib文件，出现可视化窗口
（1）拖入一个UIView （不是UIViewController）
（2）设置大小：开启可自定义尺寸 ==> 定义尺寸
（3）拖入图标图片、名字、下载按钮，调整设置
3.在代码中获取xib中的view，并设置数据
（1）从xib获取view
a.方法1:
1//1.获取xib中的view, xib中可以同时定义多个view，注意名字不带扩展名2NSArray *viewArray = [[NSBundle mainBundle] loadNibNamed:@"app"owner:nil options:nil];3UIView *appView = [viewArray lastObject];
b.方法2:
1UINib *nib = [UINib nibWithNibName:@"app"bundle:[NSBundle mainBundle]];2NSArray *viewArray =[nib instantiateWithOwner:nil options:nil];3UIView *appView = [viewArray lastObject];
（2）取出View中的元素，设置图片
a.方法1，使用SubView数组：
1//3.设置图片2UIImageView *iconView = appView.subviews[2];3iconView.image = [UIImage imageNamed:appData.icon];
注意：按照教程是按照下图的顺序排列数组元素（imageView应该是subviews[0]，但是实际编程发现却不是，所以此方法并不稳定）
b.方法2，使用tag：
1//3.设置图片2UIImageView *iconView = [appView viewWithTag:1];3iconView.image = [UIImage imageNamed:appData.icon];
（3）设置名字
1//4.设置名字2UILabel *nameLabel = [appView viewWithTag:2];3nameLabel.text = appData.name;
（4）下载按钮已经在xib中定义好，不必使用代码
C.实现代码
1#import"ViewController.h"2#import"App.h"34#defineICON_KEY @"icon"5#defineNAME_KEY @"name"6#defineAPP_WIDTH 857#defineAPP_HEIGHT 908#defineMARGIN_HEAD 209#defineICON_WIDTH 5010#defineICON_HEIGHT 5011#defineNAME_WIDTH APP_WIDTH12#defineNAME_HEIGHT 2013#defineDOWNLOAD_WIDTH (APP_WIDTH - 20)14#defineDOWNLOAD_HEIGHT 201516@interfaceViewController ()1718/** 存放应用信息*/19@PRoperty(nonatomic, strong) NSArray *apps;//应用列表2021@end2223@implementationViewController2425- (void)viewDidLoad {26[super viewDidLoad];27//Do any additional setup after loading the view, typically from a nib.2829[self loadApps];30}3132- (void)didReceiveMemoryWarning {33[super didReceiveMemoryWarning];34//Dispose of any resources that can be recreated.35}3637#pragmamark 取得应用列表38- (NSArray *) apps {39if(nil ==_apps) {40//1.获得plist的全路径41NSString *path = [[NSBundle mainBundle] pathForResource:@"app.plist"ofType:nil];4243//2.加载数据44NSArray *dictArray =[NSArray arrayWithContentsOfFile:path];4546//3.将dictArray里面的所有字典转成模型，放到新数组中47NSMutableArray *appArray =[NSMutableArray array];48for(NSDictionary *dictindictArray) {49//3.1创建模型对象50App *app =[App appWithDictionary:dict];5152//3.2 添加到app数组中53[appArray addObject:app];54}5556_apps =appArray;57}5859return_apps;60}6162#pragmamark 加载全部应用列表63- (void) loadApps {64intappColumnCount =[self appColumnCount];65intappRowCount =[self appRowCount];6667CGFloat marginX = (self.view.frame.size.width - APP_WIDTH * appColumnCount) / (appColumnCount +1);68CGFloat marginY = (self.view.frame.size.height - APP_HEIGHT * appRowCount) / (appRowCount +1) +MARGIN_HEAD;6970intcolumn =0;71introw =0;72for(intindex=0; index<self.apps.count; index++) {73App *appData =self.apps[index];7475//1.获取xib中的view, xib中可以同时定义多个view，注意名字不带扩展名76//NSArray *viewArray = [[NSBundle mainBundle] loadNibNamed:@"app" owner:nil options:nil];77//UIView *appView = [viewArray lastObject];7879UINib *nib = [UINib nibWithNibName:@"app"bundle:[NSBundle mainBundle]];80NSArray *viewArray =[nib instantiateWithOwner:nil options:nil];81UIView *appView =[viewArray lastObject];8283//2.定义每个app的位置、尺寸84CGFloat appX = marginX + column * (marginX +APP_WIDTH);85CGFloat appY = marginY + row * (marginY +APP_HEIGHT);86appView.frame =CGRectMake(appX, appY, APP_WIDTH, APP_HEIGHT);8788//3.设置图片89UIImageView *iconView = [appView viewWithTag:1];90iconView.image =[UIImage imageNamed:appData.icon];9192//4.设置名字93UILabel *nameLabel = [appView viewWithTag:2];94nameLabel.text =appData.name;9596//5.加入此app信息到总view97[self.view addSubview:appView];9899column++;100if(column ==appColumnCount) {101column =0;102row++;103}104}105}106107108#pragmamark 计算列数109- (int) appColumnCount {110intcount =0;111count = self.view.frame.size.width /APP_WIDTH;112113if((int)self.view.frame.size.width % (int)APP_WIDTH ==0) {114count--;115}116117returncount;118}119120#pragmamark 计算行数121- (int) appRowCount {122intcount =0;123count = (self.view.frame.size.height - MARGIN_HEAD) /APP_HEIGHT;124125if((int)(self.view.frame.size.height - MARGIN_HEAD) % (int)APP_HEIGHT ==0) {126count--;127}128129returncount;130}131132@end