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

功能分析:

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

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

分析:

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

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

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

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

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

代码实现:

  1 #import "ViewController.h"
  2
  3 @interface ViewController ()
  4
  5 /** 用于存放app信息 */
  6 @property(nonatomic, strong)NSArray *apps;
  7
  8 @end
  9
 10 @implementation ViewController
 11
 12 // 懒加载
 13 - (NSArray *)apps
 14 {
 15     if (!_apps) {
 16         // 从plist文件中获取数据
 17         NSString *path = [[NSBundle mainBundle] pathForResource:@"app.plist" ofType:nil];
 18         _apps = [NSArray arrayWithContentsOfFile:path];
 19     }
 20     return _apps;
 21 }
 22
 23 - (void)viewDidLoad {
 24     [super viewDidLoad];
 25
 26
 27     // 1. 布局九宫格的列数
 28     NSInteger colsNum = 3;
 29
 30     // 2. 每个app的大小
 31     CGFloat appW = 80;
 32     CGFloat appH = 90;
 33
 34     // 3. 设置每列之间的间距 = (控制器view的宽度 - 列数 * app的宽度) / 间隙数
 35     CGFloat colsMargin = (self.view.frame.size.width - colsNum * appW) / (colsNum + 1);
 36     // 设置每行之间的间距
 37     CGFloat rowsMargin = 30;
 38
 39     // 4. 根据应用个数创建
 40     for (int index = 0; index < self.apps.count; index++) {
 41         // 4.1 创建app
 42         UIView *appView = [[UIView alloc] init];
 43
 44         // 4.2 计算app的位置
 45         // 4.2.1 计算行号和列号
 46         int row = index / colsNum;
 47         int col = index % colsNum;
 48
 49         // 4.2.2 计算x和y(注意: 不要被手机顶部状态栏的高度(20)挡住)
 50         CGFloat appX = colsMargin + col * (appW + colsMargin);
 51         CGFloat appY = rowsMargin + row * (appH + rowsMargin);
 52
 53         // 4.2.3 设置app的frame
 54         appView.frame = CGRectMake(appX, appY, appW, appH);
 55
 56         // 4.3 添加到控制器的view
 57         [self.view addSubview:appView];
 58
 59         // 4.4 设置app内部控件
 60         // 4.4.1 index位置对应的应用信息
 61         NSDictionary *appInfo = self.apps[index];
 62
 63         // 4.4.2 添加图标
 64         UIImageView *iconView = [[UIImageView alloc] init];
 65
 66         // 4.4.3 设置图标位置
 67         CGFloat iconW = 45;
 68         CGFloat iconH = 45;
 69         CGFloat iconX = (appW - iconW) * 0.5;
 70         CGFloat iconY = 0;
 71         iconView.frame = CGRectMake(iconX, iconY, iconW, iconH);
 72
 73         // 4.4.4 设置图片
 74         iconView.image = [UIImage imageNamed:appInfo[@"icon"]];
 75         [appView addSubview:iconView];
 76
 77         // 4.4.5 添加文字
 78         UILabel *nameLabel = [[UILabel alloc] init];
 79
 80         // 4.4.6 设置文字位置
 81         CGFloat nameW = appW;
 82         CGFloat nameH = 20;
 83         CGFloat nameX = 0;
 84         CGFloat nameY = iconY + iconH;
 85         nameLabel.frame = CGRectMake(nameX, nameY, nameW, nameH);
 86
 87         // 4.4.7 设置文字
 88         nameLabel.text = appInfo[@"name"];
 89         nameLabel.font = [UIFont systemFontOfSize:13];
 90         nameLabel.textAlignment = NSTextAlignmentCenter;
 91         [appView addSubview:nameLabel];
 92
 93         // 4.4.8 添加按钮
 94         UIButton *downloadBtn = [[UIButton alloc] init];
 95
 96         // 4.4.9 设置按钮位置
 97         CGFloat downloadX = 12;
 98         CGFloat downloadY = nameY + nameH;
 99         CGFloat downloadW = appW - 2 * downloadX;
100         CGFloat downloadH = 20;
101         downloadBtn.frame = CGRectMake(downloadX, downloadY, downloadW, downloadH);
102
103         // 4.4.10 设置按钮
104         [downloadBtn setBackgroundImage:[UIImage imageNamed:@"buttongreen"] forState:UIControlStateNormal];
105         [downloadBtn setBackgroundImage:[UIImage imageNamed:@"buttongreen_highlighted"] forState:UIControlStateHighlighted];
106         [downloadBtn setTitle:@"下载" forState:UIControlStateNormal];
107         downloadBtn.titleLabel.font = [UIFont systemFontOfSize:13];
108         [downloadBtn addTarget:self action:@selector(downloadClick) forControlEvents:UIControlEventTouchUpInside];
109         [appView addSubview:downloadBtn];
110     }
111
112 }
113
114 - (void)downloadClick
115 {
116     NSLog(@"%s", __func__);
117 }
118 @end