iOS開發UI篇—九宮格座標計算

標籤：

一、要求

完成下面的布局

 

二、分析

尋找左邊的規律，每一個uiview的x座標和y座標。

三、實現思路

 

(1)明確每一塊用得是什麼view

(2)明確每個view之間的父子關係，每個視圖都只有一個父視圖，擁有很多的子視圖。

(3)可以先嘗試逐個的添加格子，最後考慮使用for迴圈，完成所有uiview的建立

(4)載入app資料，根據資料長度建立對應個數的格子

(5)添加格子內部的子控制項

(6)給內部的子控制項裝配資料

四、程式碼範例

  1 //  2 //  SLViewController.m  3 //  九宮格練習  4 //  5 //  Created by apple on 14-5-21.  6 //  Copyright (c) 2014年 itcase. All rights reserved.  7 //  8   9 #import "SLViewController.h" 10  11 @interface SLViewController () 12 @property(nonatomic,strong)NSArray *apps; 13 @end 14  15 @implementation SLViewController 16  17  18 // 1.載入資料 19 - (NSArray *)apps 20 { 21     if (!_apps) { 22         NSString *path = [[NSBundle mainBundle]pathForResource:@"app.plist" ofType:nil]; 23         _apps = [NSArray arrayWithContentsOfFile:path]; 24     } 25     return _apps; 26 } 27  28 - (void)viewDidLoad 29 { 30     [super viewDidLoad]; 31     NSLog(@"%ld",self.apps.count); 32      33     // 2.完成布局設計 34     // 三列 35     int totalloc = 3; 36     CGFloat appvieww = 80; 37     CGFloat appviewh = 90; 38      39     CGFloat margin = (self.view.frame.size.width-totalloc * appvieww) / (totalloc + 1); 40     int count = self.apps.count; 41     for (int i = 0; i < count; i++) { 42         int row = i / totalloc;// 行號 43         // 1/3 = 0,2/3 = 0,3/3 = 1; 44         int loc = i % totalloc;// 列號 45          46         CGFloat appviewx = margin + (margin + appvieww) * loc; 47         CGFloat appviewy = margin + (margin + appviewh) * row; 48          49         // 建立uiview控制項 50         UIView *appview = [[UIView alloc]initWithFrame:CGRectMake(appviewx, appviewy, appvieww, appviewh)]; 51         // [appview setBackgroundColor:[UIColor purpleColor]]; 52         [self.view addSubview:appview]; 53          54          55         // 建立uiview控制項中的子視圖 56         UIImageView *appimageview = [[UIImageView alloc]initWithFrame:CGRectMake(0, 0, 80, 50)]; 57         UIImage *appimage = [UIImage imageNamed:self.apps[i][@"icon"]]; 58         appimageview.image = appimage; 59         [appimageview setContentMode:UIViewContentModeScaleAspectFit]; 60         //  NSLog(@"%@",self.apps[i][@"icon"]); 61         [appview addSubview:appimageview]; 62          63         // 建立文字標籤 64         UILabel *applable = [[UILabel alloc]initWithFrame:CGRectMake(0, 50, 80, 20)]; 65         [applable setText:self.apps[i][@"name"]]; 66         [applable setTextAlignment:NSTextAlignmentCenter]; 67         [applable setFont:[UIFont systemFontOfSize:12.0]]; 68         [appview addSubview:applable]; 69          70         // 建立按鈕 71         UIButton *appbtn = [UIButton buttonWithType:UIButtonTypeCustom]; 72         appbtn.frame =  CGRectMake(10, 70, 60, 20); 73         [appbtn setBackgroundImage:[UIImage imageNamed:@"buttongreen"] forState:UIControlStateNormal]; 74         [appbtn setBackgroundImage:[UIImage imageNamed:@"buttongreen_highlighted"] forState:UIControlStateHighlighted]; 75         [appbtn setTitle:@"下載" forState:UIControlStateNormal]; 76         appbtn.titleLabel.font = [UIFont systemFontOfSize:12.0]; 77         [appview addSubview:appbtn]; 78          79         [appbtn addTarget:self action:@selector(click) forControlEvents:UIControlEventTouchUpInside]; 80     } 81      82 } 83  84 -(void)click 85 { 86     // 動畫標籤 87     UILabel *animalab = [[UILabel alloc]initWithFrame:CGRectMake(self.view.center.x-100, self.view.center.y+20, 200, 40)]; 88     [animalab setText:@"下載成功"]; 89     animalab.font = [UIFont systemFontOfSize:12.0]; 90     [animalab setBackgroundColor:[UIColor brownColor]]; 91     [animalab setAlpha:0]; 92     [self.view addSubview:animalab]; 93      94     /* 95     [UIView beginAnimations:Nil context:Nil]; 96     [animalab setAlpha:1]; 97     [UIView setAnimationDuration:4.0]; 98     [UIView commitAnimations]; 99     */100     101     // 執行完之後，還得把這給刪除了，推薦使用block動畫102     [UIView animateWithDuration:4.0 animations:^{103         [animalab setAlpha:1];104     } completion:^(BOOL finished) {105 //         [self.view removeFromSuperview];106     }];107 }108 109 @end

 

執行效果：

 

iOS開發UI篇—九宮格座標計算