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

標籤：des   style   class   blog   c   code   

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

一、要求

完成下面的布局

 

二、分析

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

三、實現思路

 

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

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

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

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

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

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

四、程式碼範例

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

執行效果：