一、功能分析
1）以九宫格展示图片信息，每一个 UIView 包含一个 UIImageView 、一个 UILabel 和一个 UIButton 。
2）加载App数据，根据数据长度创建对应的格子数；
3）点击下载按钮后，做出相应操作。
二、九宫格信息分析
三、实例代码
新建Plist属性文件，并命名为Data，修改属性列表成如下形式：
定义每一个 UIview 的宽度和高度：
//ViewController.m
const CGFloat appViewWidth = ; //子视图宽度
const CGFloat appViewHeight = ; //子视图高度
在类扩展中声明 NSArray 属性，用于存放属性列表中的数据：
@interface ViewController ()
@property (nonatomic, weak) NSArray *apps;
@end
懒加载 apps 属性，即重写 getter 方法：
- (NSArray *)apps {
if (!_apps) {
NSString *path = [[NSBundle mainBundle] pathForResource:@"Data" ofType:@"plist"];
_apps = [NSArray arrayWithContentsOfFile:path];
}
return _apps;
}
修改 viewDidLoad 方法，让其加载视图：
- (void)viewDidLoad {
[super viewDidLoad];
int totalColumn = ; //3列
CGFloat margin = (self.view.frame.size.width - totalColumn*appViewWidth) / (totalColumn + );
int count = self.apps.count;
NSLog(@"%d", count);
for (int i = ; i < count; i++) {
int row = i/totalColumn; //行号，从0开始
int column = i%totalColumn; //列号，从0开始
CGFloat appViewX = margin + (margin + appViewWidth) * column; //子视图的X坐标
CGFloat appViewY = margin + (margin + appViewHeight) * row; //子视图的Y坐标
//创建UIView控件
UIView *appView = [[UIView alloc] initWithFrame:CGRectMake(appViewX, appViewY, appViewWidth, appViewHeight)];
[self.view addSubview:appView];
//创建上述UIView控件的子视图，创建图像信息
UIImageView *appImageView = [[UIImageView alloc] initWithFrame:CGRectMake(, , , )];
UIImage *appImage = [UIImage imageNamed:self.apps[i][@"name"]];
appImageView.image = appImage;
[appImageView setContentMode:UIViewContentModeScaleAspectFit];
[appView addSubview:appImageView];
//创建上述UIView控件的子视图，创建UILabel信息描述标签
UILabel *appLabel = [[UILabel alloc] initWithFrame:CGRectMake(, , , )];
[appLabel setText:self.apps[i][@"desc"]];
[appLabel setTextAlignment:NSTextAlignmentCenter];
[appLabel setFont:[UIFont systemFontOfSize:12.0]];
[appLabel setTextColor:[UIColor blueColor]];
[appView addSubview:appLabel];
//创建下载按钮
UIButton *appButton = [UIButton buttonWithType:UIButtonTypeCustom];
appButton.frame = CGRectMake(, , , );
[appButton setBackgroundImage:[UIImage imageNamed:@"download"] forState:UIControlStateNormal];
[appButton setBackgroundImage:[UIImage imageNamed:@"downloaded"] forState:UIControlStateHighlighted];
[appButton setTitle:@"下载" forState:UIControlStateNormal];
appButton.titleLabel.font = [UIFont systemFontOfSize:12.0];
[appButton setTitleColor:[UIColor blueColor] forState:UIControlStateNormal];
[appView addSubview:appButton];
[appButton addTarget:self action:@selector(buttonClicked:) forControlEvents:UIControlEventTouchUpInside];
}
}
创建下载按钮的响应事件：
- (void)buttonClicked:(UIButton *)button {
//动画标签
UILabel *animaLabel = [[UILabel alloc] initWithFrame:CGRectMake(self.view.center.x-, self.view.center.y+, , )];
[animaLabel setText:@"下载成功"];
[animaLabel setTextAlignment:NSTextAlignmentCenter];
animaLabel.font = [UIFont systemFontOfSize:12.0];
[animaLabel setBackgroundColor:[UIColor brownColor]];
[animaLabel setAlpha:0.0];
[self.view addSubview:animaLabel];
[UIView animateWithDuration:4.0 animations:^{
//逐渐显示标签
[animaLabel setAlpha:1.0];
} completion:^(BOOL finished) {
//动画结束时，移除显示下载完成的标签
[animaLabel removeFromSuperview];
//已下载时，改变按钮标题，及背景图片
[button setTitle:@"已下载" forState:UIControlStateNormal];
[button setBackgroundImage:[UIImage imageNamed:@"downloaded"] forState:UIControlStateNormal];
//已下载完成的，取消按钮下载触发事件
[button removeTarget:self action:@selector(buttonClicked:) forControlEvents:UIControlEventTouchUpInside];
}];
}
实例：
参考博客：iOS开发UI篇—九宫格坐标计算