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,注意名字不带扩展名
2 NSArray *viewArray = [[NSBundle mainBundle] loadNibNamed:@"app" owner:nil options:nil];
3 UIView *appView = [viewArray lastObject];
b.方法2:
1 UINib *nib = [UINib nibWithNibName:@"app" bundle:[NSBundle mainBundle]];
2 NSArray *viewArray = [nib instantiateWithOwner:nil options:nil];
3 UIView *appView = [viewArray lastObject];
(2)取出View中的元素,设置图片
a.方法1,使用SubView数组:
1 // 3.设置图片
2 UIImageView *iconView = appView.subviews[2];
3 iconView.image = [UIImage imageNamed:appData.icon];
注意:按照教程是按照下图的顺序排列数组元素(imageView应该是subviews[0],但是实际编程发现却不是,所以此方法并不稳定)

b.方法2,使用tag:
1 // 3.设置图片
2 UIImageView *iconView = [appView viewWithTag:1];
3 iconView.image = [UIImage imageNamed:appData.icon];
(3)设置名字
1 // 4.设置名字
2 UILabel *nameLabel = [appView viewWithTag:2];
3 nameLabel.text = appData.name;
(4)下载按钮已经在xib中定义好,不必使用代码
C.实现代码
1 #import "ViewController.h"
2 #import "App.h"
3
4 #define ICON_KEY @"icon"
5 #define NAME_KEY @"name"
6 #define APP_WIDTH 85
7 #define APP_HEIGHT 90
8 #define MARGIN_HEAD 20
9 #define ICON_WIDTH 50
10 #define ICON_HEIGHT 50
11 #define NAME_WIDTH APP_WIDTH
12 #define NAME_HEIGHT 20
13 #define DOWNLOAD_WIDTH (APP_WIDTH - 20)
14 #define DOWNLOAD_HEIGHT 20
15
16 @interface ViewController ()
17
18 /** 存放应用信息 */
19 @PRoperty(nonatomic, strong) NSArray *apps; // 应用列表
20
21 @end
22
23 @implementation ViewController
24
25 - (void)viewDidLoad {
26 [super viewDidLoad];
27 // Do any additional setup after loading the view, typically from a nib.
28
29 [self loadApps];
30 }
31
32 - (void)didReceiveMemoryWarning {
33 [super didReceiveMemoryWarning];
34 // Dispose of any resources that can be recreated.
35 }
36
37 #pragma mark 取得应用列表
38 - (NSArray *) apps {
39 if (nil == _apps) {
40 // 1.获得plist的全路径
41 NSString *path = [[NSBundle mainBundle] pathForResource:@"app.plist" ofType:nil];
42
43 // 2.加载数据
44 NSArray *dictArray = [NSArray arrayWithContentsOfFile:path];
45
46 // 3.将dictArray里面的所有字典转成模型,放到新数组中
47 NSMutableArray *appArray = [NSMutableArray array];
48 for (NSDictionary *dict in dictArray) {
49 // 3.1创建模型对象
50 App *app = [App appWithDictionary:dict];
51
52 // 3.2 添加到app数组中
53 [appArray addObject:app];
54 }
55
56 _apps = appArray;
57 }
58
59 return _apps;
60 }
61
62 #pragma mark 加载全部应用列表
63 - (void) loadApps {
64 int appColumnCount = [self appColumnCount];
65 int appRowCount = [self appRowCount];
66
67 CGFloat marginX = (self.view.frame.size.width - APP_WIDTH * appColumnCount) / (appColumnCount + 1);
68 CGFloat marginY = (self.view.frame.size.height - APP_HEIGHT * appRowCount) / (appRowCount + 1) + MARGIN_HEAD;
69
70 int column = 0;
71 int row = 0;
72 for (int index=0; index<self.apps.count; index++) {
73 App *appData = self.apps[index];
74
75 // 1.获取xib中的view, xib中可以同时定义多个view,注意名字不带扩展名
76 // NSArray *viewArray = [[NSBundle mainBundle] loadNibNamed:@"app" owner:nil options:nil];
77 // UIView *appView = [viewArray lastObject];
78
79 UINib *nib = [UINib nibWithNibName:@"app" bundle:[NSBundle mainBundle]];
80 NSArray *viewArray = [nib instantiateWithOwner:nil options:nil];
81 UIView *appView = [viewArray lastObject];
82
83 // 2.定义每个app的位置、尺寸
84 CGFloat appX = marginX + column * (marginX + APP_WIDTH);
85 CGFloat appY = marginY + row * (marginY + APP_HEIGHT);
86 appView.frame = CGRectMake(appX, appY, APP_WIDTH, APP_HEIGHT);
87
88 // 3.设置图片
89 UIImageView *iconView = [appView viewWithTag:1];
90 iconView.image = [UIImage imageNamed:appData.icon];
91
92 // 4.设置名字
93 UILabel *nameLabel = [appView viewWithTag:2];
94 nameLabel.text = appData.name;
95
96 // 5.加入此app信息到总view
97 [self.view addSubview:appView];
98
99 column++;
100 if (column == appColumnCount) {
101 column = 0;
102 row++;
103 }
104 }
105 }
106
107
108 #pragma mark 计算列数
109 - (int) appColumnCount {
110 int count = 0;
111 count = self.view.frame.size.width / APP_WIDTH;
112
113 if ((int)self.view.frame.size.width % (int)APP_WIDTH == 0) {
114 count--;
115 }
116
117 return count;
118 }
119
120 #pragma mark 计算行数
121 - (int) appRowCount {
122 int count = 0;
123 count = (self.view.frame.size.height - MARGIN_HEAD) / APP_HEIGHT;
124
125 if ((int)(self.view.frame.size.height - MARGIN_HEAD) % (int)APP_HEIGHT == 0) {
126 count--;
127 }
128
129 return count;
130 }
131
132 @end