iOS開發基礎-九宮格座標(1)

1、功能分析

　　1）以九宮格展現圖片信息，每個 UIView 包含一個 UIImageView 、一個 UILabel 和一個 UIButton 。

　　2）加載App數據，根據數據長度建立對應的格子數；

　　3）點擊下載按鈕後，作出相應操做。

2、九宮格信息分析

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