[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 = 3;
    
    // 1.应用的尺寸
    CGFloat subViewW = 85;
    CGFloat subViewH = 90;
    
    // 2.间隙 = (控制器view的宽度 - 3 * 应用宽度) / 4
    CGFloat marginX = (self.view.frame.size.width - totalColumns * subViewW) / (totalColumns + 1);
    CGFloat marginY = 15;
    
    // 3.根据应用个数创建对应的框框(index 0 ~ 11)
    for (int index = 0; 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 = 30 + 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 = 45;
        CGFloat iconH = 45;
        CGFloat iconX = (subViewW - iconW) * 0.5;
        CGFloat iconY = 0;
        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 = 20;
        CGFloat nameX = 0;
        CGFloat nameY = iconY + iconH;
        nameLabel.frame = CGRectMake(nameX, nameY, nameW, nameH);
        // 设置文字
        nameLabel.text = appInfo[@"name"];
        // 设置字体
        nameLabel.font = [UIFont systemFontOfSize:13];
        // 设置文字居中对齐
        nameLabel.textAlignment = NSTextAlignmentCenter;
        [subView addSubview:nameLabel];
        
        // 3.4.3.添加下载按钮
        UIButton *downloadBtn = [[UIButton alloc] init];
        // 设置位置
        CGFloat downloadX = 12;
        CGFloat downloadY = nameY + nameH;
        CGFloat downloadW = subViewW - 2 * downloadX;
        CGFloat downloadH = 20;
        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:13];
        [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;
}