一 要求
完成下面的布局
二 分析
寻找规律,每一个UIView的x坐标和y坐标
三 实现思路
(1) 明确每一块用得是什么View;
(2) 明确每个View之间的父子关系,每个视图都只有一个父视图,拥有很多的子视图;
(3) 可以先尝试逐个的添加格子,最后考虑使用for循环,完成所有的UIView创建;
(4) 加载app数据,根据数据长度创建对应个数的格子;
(5) 添加格子内部的子控件
(6) 给内部的子控件装配数据
四 代码示例
//
// RootViewController.m
// 九宫格坐标计算
//
// Created by lovestarfish on 15/11/1.
// Copyright © 2015年 S&G. All rights reserved.
// #import "RootViewController.h" @interface RootViewController ()
//* 数据源数组 /
@property (nonatomic,retain) NSArray *apps; @end @implementation RootViewController - (NSArray *)apps {
//1. 加载数据
if (!_apps) {
NSString *filePath = [[NSBundle mainBundle] pathForResource:@"app" ofType:@"plist"];
NSDictionary *dic = [NSDictionary dictionaryWithContentsOfFile:filePath];
self.apps = dic[@"app"];
}
return _apps;
} - (void)viewDidLoad {
[super viewDidLoad]; self.title = @"九宫格展示"; //2. 完成布局设计
//三列
int totalloc = ;
CGFloat appViewWidth = ;
CGFloat appViewHeight = ;
CGFloat margin = (self.view.frame.size.width- totalloc * appViewWidth) / (totalloc + );
int appCount = (int)self.apps.count;
for (int i = ; i < appCount; i++) {
int row = i / totalloc;//行号
int loc = i % totalloc;//列号
CGFloat appViewX = margin + (margin + appViewWidth) * loc;
CGFloat appViewY = margin + (margin + appViewHeight) * row;
//创建UIView控件
UIView *appView = [[UIView alloc] initWithFrame:CGRectMake(appViewX, appViewY + , appViewWidth, appViewHeight)];
[self.view addSubview:appView];
[appView release]; //创建UIView控件中的子视图
UIImageView *appImageView = [[UIImageView alloc] initWithFrame:CGRectMake(, , , )];
appImageView.image = [UIImage imageNamed:self.apps[i][@"image"]];
appImageView.contentMode = UIViewContentModeScaleAspectFit;
[appView addSubview:appImageView];
[appImageView release]; //创建文本标签
UILabel *appLabel = [[UILabel alloc] initWithFrame:CGRectMake(, , , )];
appLabel.text = self.apps[i][@"name"];
appLabel.textAlignment = NSTextAlignmentCenter;
appLabel.font = [UIFont systemFontOfSize:];
[appView addSubview:appLabel];
[appLabel release]; //创建按钮
UIButton *appButton = [UIButton buttonWithType:UIButtonTypeSystem];
appButton.frame = CGRectMake(, , , );
[appButton setTitle:@"下载" forState:UIControlStateNormal];
appButton.backgroundColor = [UIColor greenColor];
appButton.titleLabel.font = [UIFont systemFontOfSize:];
[appButton setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];
[appView addSubview:appButton];
[appButton addTarget:self action:@selector(click) forControlEvents:UIControlEventTouchUpInside];
}
} /**
* 下载按钮的响应事件
*/
- (void)click {
//动画标签
UILabel *animaLabel = [[UILabel alloc] initWithFrame:CGRectMake(self.view.center.x - , self.view.center.y - + , , )];
animaLabel.text = @"下载成功";
animaLabel.font = [UIFont systemFontOfSize:];
animaLabel.textAlignment = NSTextAlignmentCenter;
animaLabel.backgroundColor = [UIColor brownColor];
animaLabel.alpha = ;
[self.view addSubview:animaLabel];
[animaLabel release]; //执行完之后,还得把这给删除了,推荐使用block动画
[UIView animateWithDuration:4.0 animations:^{
animaLabel.alpha = 1.0;
} completion:^(BOOL finished) {
[animaLabel removeFromSuperview];
}]; } - (void)didReceiveMemoryWarning {
[super didReceiveMemoryWarning];
} @end
五 执行效果