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

一、功能分析

　　1）以九宫格展示图片信息，每一个 UIView 包含一个 UIImageView 、一个 UILabel 和一个 UIButton 。

　　2）加载App数据，根据数据长度创建对应的格子数；

　　3）点击下载按钮后，做出相应操作。

二、九宫格信息分析

三、实例代码

　　新建Plist属性文件，并命名为Data，修改属性列表成如下形式：

　　

　　定义每一个 UIview 的宽度和高度：

//ViewController.m
const CGFloat appViewWidth = 80;        //子视图宽度
const CGFloat appViewHeight = 90;       //子视图高度

　　在类扩展中声明 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;        //3列
    CGFloat margin = (self.view.frame.size.width - totalColumn*appViewWidth) / (totalColumn + 1);
    int count = self.apps.count;
    NSLog(@"%d", count);
    
    for (int i = 0; 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(0, 0, 80, 50)];
        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(0, 50, 80, 20)];
        [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(0, 70, 80, 20);
        [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-100, self.view.center.y+20, 200, 40)];
    [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