[目标]
1、完成下图所示的View,View中的图片、文字数据从app.list文件读出。
2、思考代码哪里可以进行优化。
[分析]
1、创建控件
整个View分12个部分,其中包含一个 UIImageView、UILabel、UIButton,这三个控件可以作为一个整体
作为subView的子控件。那么先创建12个subView,然后为每个subView添加三个子控件。
view
| ----- subView
| | ---- UIImageView
| | ---- UILabel
| | ---- UIButton
... ...
| ----- subView
| | ---- UIImageView
| | ---- UILabel
| | ---- UIButton
2、为子控件填充数据
控件的图片数据以及文字数据都存储在app.plist文件中,这个文件是存储了字典对象的12个数组,通过mainBundle
获取文件的路径然后创建字典导出数据并加载到相应的控件。
[实现]
1、创建工程,加载必要的素材以及文件到工程。
略
2、创建12个subView
创建一个subView可以分以下几个步骤进行:
//2.1 创建subView
UIView *subView = [[UIView alloc] init];
//2.2 设置subView的frame
subView.frame = CGRectMake(subViewX, subViewY, subViewW, subViewH);
// 3.3.添加subView到控制器的view
[self.view addSubview:subView];
3、为subView加载图片、文字
subView的图片文字属性存储在app.plist文件,首先把这个文件的数据导出到一个数组中。
3.1 添加属性
@interface ViewController ()
/** 存放应用信息 */
@property (nonatomic, strong) NSArray *appData;
@end
3.2 重写appData的getter
- (NSArray *)apps {
if (_apps == nil) {
// 1.获得plist的全路径
NSString *path = [[NSBundle mainBundle] pathForResource:@"app.plist" ofType:nil];
// 2.加载数组
_appData = [NSArray arrayWithContentsOfFile:path];
}
return _appData;
}
现在数据以及导出到appData这个数组中了,而这个数组的元素是字典,根据key分别读出图片文字信息加载到
相应的控件的属性。
3.3 添加图片数据到UIImagView
NSDictionary *appInfo = self.appData[index];
// 3.3.1.添加图片
UIImageView *iconView = [[UIImageView alloc] init];
// 3.3.2 设置frame
iconView.frame = CGRectMake(iconX, iconY, iconW, iconH);
// 3.3.3 设置图片
iconView.image = [UIImage imageNamed:appInfo[@"icon"]];
[subView addSubview:iconView];
3.4 添加Label的文本属性
// 3.4.1 创建Label
UILabel *nameLabel = [[UILabel alloc] init];
// 3.4.2 设置frame
nameLabel.frame = CGRectMake(nameX, nameY, nameW, nameH);
// 设置文字
nameLabel.text = appInfo[@"name"];
// 设置字体
nameLabel.font = [UIFont systemFontOfSize:13];
// 设置文字居中对齐
nameLabel.textAlignment = NSTextAlignmentCenter;
[appView addSubview:nameLabel];
3.4 添加下载按钮
略
至此,整个UI的根据以上的步骤可以完成。全部代码如下
1 - (void)viewDidLoad 2 { 3 [super viewDidLoad]; 4 5 6 // 0.总列数(一行最多3列) 7 int totalColumns = 3; 8 9 // 1.应用的尺寸 10 CGFloat subViewW = 85; 11 CGFloat subViewH = 90; 12 13 // 2.间隙 = (控制器view的宽度 - 3 * 应用宽度) / 4 14 CGFloat marginX = (self.view.frame.size.width - totalColumns * subViewW) / (totalColumns + 1); 15 CGFloat marginY = 15; 16 17 // 3.根据应用个数创建对应的框框(index 0 ~ 11) 18 for (int index = 0; index<self.appData.count; index++) { 19 // 3.1.创建1小框框 20 UIView *subView = [[UIView alloc] init]; 21 22 // 3.2.计算框框的位置 23 // 计算行号和列号 24 int row = index / totalColumns; 25 int col = index % totalColumns; 26 // 计算x和y 27 CGFloat subViewX = marginX + col * (subViewW + marginX); 28 CGFloat subViewY = 30 + row * (subViewH + marginY); 29 // 设置frame 30 subView.frame = CGRectMake(subViewX, subViewY, subViewW, subViewH); 31 32 // 3.3.添加框框到控制器的view 33 [self.view addSubview:subView]; 34 35 // 3.4.添加内部的小控件 36 // 3.4.0.index位置对应的应用信息 37 NSDictionary *appInfo = self.appData[index]; 38 39 // 3.4.1.添加图片 40 UIImageView *iconView = [[UIImageView alloc] init]; 41 // 设置位置 42 CGFloat iconW = 45; 43 CGFloat iconH = 45; 44 CGFloat iconX = (subViewW - iconW) * 0.5; 45 CGFloat iconY = 0; 46 iconView.frame = CGRectMake(iconX, iconY, iconW, iconH); 47 // 设置图片 48 iconView.image = [UIImage imageNamed:appInfo[@"icon"]]; 49 [subView addSubview:iconView]; 50 51 // 3.4.2.添加名字 52 UILabel *nameLabel = [[UILabel alloc] init]; 53 // 设置位置 54 CGFloat nameW = subViewW; 55 CGFloat nameH = 20; 56 CGFloat nameX = 0; 57 CGFloat nameY = iconY + iconH; 58 nameLabel.frame = CGRectMake(nameX, nameY, nameW, nameH); 59 // 设置文字 60 nameLabel.text = appInfo[@"name"]; 61 // 设置字体 62 nameLabel.font = [UIFont systemFontOfSize:13]; 63 // 设置文字居中对齐 64 nameLabel.textAlignment = NSTextAlignmentCenter; 65 [subView addSubview:nameLabel]; 66 67 // 3.4.3.添加下载按钮 68 UIButton *downloadBtn = [[UIButton alloc] init]; 69 // 设置位置 70 CGFloat downloadX = 12; 71 CGFloat downloadY = nameY + nameH; 72 CGFloat downloadW = subViewW - 2 * downloadX; 73 CGFloat downloadH = 20; 74 downloadBtn.frame = CGRectMake(downloadX, downloadY, downloadW, downloadH); 75 // 设置默认的背景 76 UIImage *normalImage = [UIImage imageNamed:@"buttongreen"]; 77 [downloadBtn setBackgroundImage:normalImage forState:UIControlStateNormal]; 78 // 设置高亮的背景 79 UIImage *highImage = [UIImage imageNamed:@"buttongreen_highlighted"]; 80 [downloadBtn setBackgroundImage:highImage forState:UIControlStateHighlighted]; 81 // 设置按钮的文字 82 [downloadBtn setTitle:@"下载" forState:UIControlStateNormal]; 83 // 不推荐直接拿到按钮内部的label设置文字 84 // downloadBtn.titleLabel.text = @"5435345345"; 85 // 设置按钮文字的字体 86 downloadBtn.titleLabel.font = [UIFont systemFontOfSize:13]; 87 [subView addSubview:downloadBtn]; 88 } 89 } 90 91 - (NSArray *)appData 92 { 93 if (_appData == nil) { 94 // 初始化 95 96 // 1.获得plist的全路径 97 NSString *path = [[NSBundle mainBundle] pathForResource:@"app.plist" ofType:nil]; 98 99 // 2.加载数组 100 _appData = [NSArray arrayWithContentsOfFile:path]; 101 } 102 return _appData; 103 }