纯代码方式实现九宫格布局

 功能分析:

　　1> 以九宫格的形式展示应用信息

　　2> 点击下载按钮后, 做出相应的操作

 

分析:

　　1> 找出九宫格布局的规律, 设置每个控件的x和y

　　　　- y值: 用行号决定; 取整运算(控件索引/九宫格布局的列数)

　　　　- x值: 用列号决定; 取模运算(控件索引%九宫格布局的列数)

　　2> 每个控件中包含若干子控件, 考虑用view进行包装, 便于计算

　　3> 抽取九宫格布局中的重要数据, 便于布局的修改

 

代码实现:

 

#import "ViewController.h"

@interface ViewController ()

/** 用于存放app信息 */
@property(nonatomic, strong)NSArray *apps;

@end

@implementation ViewController

// 懒加载
- (NSArray *)apps
{
    if (!_apps) {
        // 从plist文件中获取数据
        NSString *path = [[NSBundle mainBundle] pathForResource:@"app.plist" ofType:nil];
        _apps = [NSArray arrayWithContentsOfFile:path];
    }
    return _apps;
}

- (void)viewDidLoad {
    [super viewDidLoad];
    
 
    // 1. 布局九宫格的列数
    NSInteger colsNum = 3;
    
    // 2. 每个app的大小
    CGFloat appW = 80;
    CGFloat appH = 90;
    
    // 3. 设置每列之间的间距 = (控制器view的宽度 - 列数 * app的宽度) / 间隙数
    CGFloat colsMargin = (self.view.frame.size.width - colsNum * appW) / (colsNum + 1);
    // 设置每行之间的间距
    CGFloat rowsMargin = 30;
    
    // 4. 根据应用个数创建
    for (int index = 0; index < self.apps.count; index++) {
        // 4.1 创建app
        UIView *appView = [[UIView alloc] init];

        // 4.2 计算app的位置
        // 4.2.1 计算行号和列号
        int row = index / colsNum;
        int col = index % colsNum;
        
        // 4.2.2 计算x和y(注意: 不要被手机顶部状态栏的高度(20)挡住)
        CGFloat appX = colsMargin + col * (appW + colsMargin);
        CGFloat appY = rowsMargin + row * (appH + rowsMargin);
        
        // 4.2.3 设置app的frame
        appView.frame = CGRectMake(appX, appY, appW, appH);
        
        // 4.3 添加到控制器的view
        [self.view addSubview:appView];
        
        // 4.4 设置app内部控件
        // 4.4.1 index位置对应的应用信息
        NSDictionary *appInfo = self.apps[index];
        
        // 4.4.2 添加图标
        UIImageView *iconView = [[UIImageView alloc] init];
        
        // 4.4.3 设置图标位置
        CGFloat iconW = 45;
        CGFloat iconH = 45;
        CGFloat iconX = (appW - iconW) * 0.5;
        CGFloat iconY = 0;
        iconView.frame = CGRectMake(iconX, iconY, iconW, iconH);
        
        // 4.4.4 设置图片
        iconView.image = [UIImage imageNamed:appInfo[@"icon"]];
        [appView addSubview:iconView];
        
        // 4.4.5 添加文字
        UILabel *nameLabel = [[UILabel alloc] init];
        
        // 4.4.6 设置文字位置
        CGFloat nameW = appW;
        CGFloat nameH = 20;
        CGFloat nameX = 0;
        CGFloat nameY = iconY + iconH;
        nameLabel.frame = CGRectMake(nameX, nameY, nameW, nameH);
        
        // 4.4.7 设置文字
        nameLabel.text = appInfo[@"name"];
        nameLabel.font = [UIFont systemFontOfSize:13];
        nameLabel.textAlignment = NSTextAlignmentCenter;
        [appView addSubview:nameLabel];
        
        // 4.4.8 添加按钮
        UIButton *downloadBtn = [[UIButton alloc] init];
        
        // 4.4.9 设置按钮位置
        CGFloat downloadX = 12;
        CGFloat downloadY = nameY + nameH;
        CGFloat downloadW = appW - 2 * downloadX;
        CGFloat downloadH = 20;
        downloadBtn.frame = CGRectMake(downloadX, downloadY, downloadW, downloadH);
        
        // 4.4.10 设置按钮
        [downloadBtn setBackgroundImage:[UIImage imageNamed:@"buttongreen"] forState:UIControlStateNormal];
        [downloadBtn setBackgroundImage:[UIImage imageNamed:@"buttongreen_highlighted"] forState:UIControlStateHighlighted];
        [downloadBtn setTitle:@"下载" forState:UIControlStateNormal];
        downloadBtn.titleLabel.font = [UIFont systemFontOfSize:13];
        [downloadBtn addTarget:self action:@selector(downloadClick) forControlEvents:UIControlEventTouchUpInside];
        [appView addSubview:downloadBtn];
    }
    
}

- (void)downloadClick
{
    NSLog(@"%s", __func__);
}
@end