iOS开发基础-九宫格坐标(1)

一、功能分析

　　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篇—九宫格坐标计算

实例代码：http://pan.baidu.com/s/1qXyZhWK