[UI基础][实现]九宫格之应用程序管理

[目标]

　　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的根据以上的步骤可以完成。全部代码如下

 - (void)viewDidLoad
 {
     [super viewDidLoad];

     // 0.总列数(一行最多3列)
     int totalColumns = ;

     // 1.应用的尺寸
     CGFloat subViewW = ;
     CGFloat subViewH = ;

     // 2.间隙 = (控制器view的宽度 - 3 * 应用宽度) / 4
     CGFloat marginX = (self.view.frame.size.width - totalColumns * subViewW) / (totalColumns + );
     CGFloat marginY = ;

     // 3.根据应用个数创建对应的框框(index 0 ~ 11)
     for (int index = ; index<self.appData.count; index++) {
         // 3.1.创建1小框框
         UIView *subView = [[UIView alloc] init];

         // 3.2.计算框框的位置
         // 计算行号和列号
         int row = index / totalColumns;
         int col = index % totalColumns;
         // 计算x和y
         CGFloat subViewX = marginX + col * (subViewW + marginX);
         CGFloat subViewY =  + row * (subViewH + marginY);
         // 设置frame
         subView.frame = CGRectMake(subViewX, subViewY, subViewW, subViewH);

         // 3.3.添加框框到控制器的view
         [self.view addSubview:subView];

         // 3.4.添加内部的小控件
         // 3.4.0.index位置对应的应用信息
         NSDictionary *appInfo = self.appData[index];

         // 3.4.1.添加图片
         UIImageView *iconView = [[UIImageView alloc] init];
         // 设置位置
         CGFloat iconW = ;
         CGFloat iconH = ;
         CGFloat iconX = (subViewW - iconW) * 0.5;
         CGFloat iconY = ;
         iconView.frame = CGRectMake(iconX, iconY, iconW, iconH);
         // 设置图片
         iconView.image = [UIImage imageNamed:appInfo[@"icon"]];
         [subView addSubview:iconView];

         // 3.4.2.添加名字
         UILabel *nameLabel = [[UILabel alloc] init];
         // 设置位置
         CGFloat nameW = subViewW;
         CGFloat nameH = ;
         CGFloat nameX = ;
         CGFloat nameY = iconY + iconH;
         nameLabel.frame = CGRectMake(nameX, nameY, nameW, nameH);
         // 设置文字
         nameLabel.text = appInfo[@"name"];
         // 设置字体
         nameLabel.font = [UIFont systemFontOfSize:];
         // 设置文字居中对齐
         nameLabel.textAlignment = NSTextAlignmentCenter;
         [subView addSubview:nameLabel];

         // 3.4.3.添加下载按钮
         UIButton *downloadBtn = [[UIButton alloc] init];
         // 设置位置
         CGFloat downloadX = ;
         CGFloat downloadY = nameY + nameH;
         CGFloat downloadW = subViewW -  * downloadX;
         CGFloat downloadH = ;
         downloadBtn.frame = CGRectMake(downloadX, downloadY, downloadW, downloadH);
         // 设置默认的背景
         UIImage *normalImage = [UIImage imageNamed:@"buttongreen"];
         [downloadBtn setBackgroundImage:normalImage forState:UIControlStateNormal];
         // 设置高亮的背景
         UIImage *highImage = [UIImage imageNamed:@"buttongreen_highlighted"];
         [downloadBtn setBackgroundImage:highImage forState:UIControlStateHighlighted];
         // 设置按钮的文字
         [downloadBtn setTitle:@"下载" forState:UIControlStateNormal];
         // 不推荐直接拿到按钮内部的label设置文字
         //        downloadBtn.titleLabel.text = @"5435345345";
         // 设置按钮文字的字体
         downloadBtn.titleLabel.font = [UIFont systemFontOfSize:];
         [subView addSubview:downloadBtn];
     }
 }

 - (NSArray *)appData
 {
     if (_appData == nil) {
         // 初始化

         // 1.获得plist的全路径
         NSString *path = [[NSBundle mainBundle] pathForResource:@"app.plist" ofType:nil];

         // 2.加载数组
         _appData = [NSArray arrayWithContentsOfFile:path];
     }
     return _appData;
 }