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 方法：
1 - (NSArray *)apps { 2 if (!_apps) { 3 NSString *path = [[NSBundle mainBundle] pathForResource:@"Data" ofType:@"plist"]; 4 _apps = [NSArray arrayWithContentsOfFile:path]; 5 } 6 return _apps; 7 }
修改 viewDidLoad 方法，让其加载视图：
1 - (void)viewDidLoad { 2 [super viewDidLoad]; 3 4 int totalColumn = 3; //3列 5 CGFloat margin = (self.view.frame.size.width - totalColumn*appViewWidth) / (totalColumn + 1); 6 int count = self.apps.count; 7 NSLog(@"%d", count); 8 9 for (int i = 0; i < count; i++) { 10 int row = i/totalColumn; //行号，从0开始 11 int column = i%totalColumn; //列号，从0开始 12 CGFloat appViewX = margin + (margin + appViewWidth) * column; //子视图的X坐标 13 CGFloat appViewY = margin + (margin + appViewHeight) * row; //子视图的Y坐标 14 15 //创建UIView控件 16 UIView *appView = [[UIView alloc] initWithFrame:CGRectMake(appViewX, appViewY, appViewWidth, appViewHeight)]; 17 [self.view addSubview:appView]; 18 //创建上述UIView控件的子视图，创建图像信息 19 UIImageView *appImageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 80, 50)]; 20 UIImage *appImage = [UIImage imageNamed:self.apps[i][@"name"]]; 21 appImageView.image = appImage; 22 [appImageView setContentMode:UIViewContentModeScaleAspectFit]; 23 [appView addSubview:appImageView]; 24 //创建上述UIView控件的子视图，创建UILabel信息描述标签 25 UILabel *appLabel = [[UILabel alloc] initWithFrame:CGRectMake(0, 50, 80, 20)]; 26 [appLabel setText:self.apps[i][@"desc"]]; 27 [appLabel setTextAlignment:NSTextAlignmentCenter]; 28 [appLabel setFont:[UIFont systemFontOfSize:12.0]]; 29 [appLabel setTextColor:[UIColor blueColor]]; 30 [appView addSubview:appLabel]; 31 //创建下载按钮 32 UIButton *appButton = [UIButton buttonWithType:UIButtonTypeCustom]; 33 appButton.frame = CGRectMake(0, 70, 80, 20); 34 [appButton setBackgroundImage:[UIImage imageNamed:@"download"] forState:UIControlStateNormal]; 35 [appButton setBackgroundImage:[UIImage imageNamed:@"downloaded"] forState:UIControlStateHighlighted]; 36 [appButton setTitle:@"下载" forState:UIControlStateNormal]; 37 appButton.titleLabel.font = [UIFont systemFontOfSize:12.0]; 38 [appButton setTitleColor:[UIColor blueColor] forState:UIControlStateNormal]; 39 [appView addSubview:appButton]; 40 [appButton addTarget:self action:@selector(buttonClicked:) forControlEvents:UIControlEventTouchUpInside]; 41 } 42 }
创建下载按钮的响应事件：
1 - (void)buttonClicked:(UIButton *)button { 2 //动画标签 3 UILabel *animaLabel = [[UILabel alloc] initWithFrame:CGRectMake(self.view.center.x-100, self.view.center.y+20, 200, 40)]; 4 [animaLabel setText:@"下载成功"]; 5 [animaLabel setTextAlignment:NSTextAlignmentCenter]; 6 animaLabel.font = [UIFont systemFontOfSize:12.0]; 7 [animaLabel setBackgroundColor:[UIColor brownColor]]; 8 [animaLabel setAlpha:0.0]; 9 [self.view addSubview:animaLabel]; 10 11 [UIView animateWithDuration:4.0 animations:^{ 12 //逐渐显示标签 13 [animaLabel setAlpha:1.0]; 14 } completion:^(BOOL finished) { 15 //动画结束时，移除显示下载完成的标签 16 [animaLabel removeFromSuperview]; 17 //已下载时，改变按钮标题，及背景图片 18 [button setTitle:@"已下载" forState:UIControlStateNormal]; 19 [button setBackgroundImage:[UIImage imageNamed:@"downloaded"] forState:UIControlStateNormal]; 20 //已下载完成的，取消按钮下载触发事件 21 [button removeTarget:self action:@selector(buttonClicked:) forControlEvents:UIControlEventTouchUpInside]; 22 }]; 23 }
实例：
参考博客：iOS开发UI篇—九宫格坐标计算
实例代码：http://pan.baidu.com/s/1qXyZhWK
