ios基礎控制項 九宮格view

標籤：

知識準備：

1 使用xib封裝一個自訂view的步驟

1> 建立一個繼承UIView的自訂view,假設類名叫做(KAppView)
2> 建立一個KAppView.xib檔案來描述KAppView內部的結構
3> 修改UIView的類型為KAppView真實類型
4> 將內部的子控制項跟KAppView進行屬性連線
5> KAppView提供一個模型屬性
6> 重寫模型屬性的set方法,因為在set方法中可以拿到外界傳遞的模型資料
7> 把模型資料拆開,分別設定資料到對應的子控制項中
8> 補充:提供一個建立KAppView的類方法,將讀取xib檔案的代碼屏蔽起來

 

2 用模型取代字典的好處

使用字典的壞處 一般情況下，設定資料和取出資料都使用“字串類型的key”，編寫這些key時，編譯器不會有任何友善提示，需要手敲

dict[@"name"] = @"Jack";

NSString *name = dict[@"name"];

手敲字串key，key容易寫錯

Key如果寫錯了，編譯器不會有任何警告和報錯，造成設錯資料或者取錯資料

使用模型的好處

所謂模型，其實就是資料模型，專門用來存放資料的對象，用它來表示資料會更加專業

模型設定資料和取出資料都是通過它的屬性，屬性名稱如果寫錯了，編譯器會馬上報錯，因此，保證了資料的正確性

使用模型訪問屬性時，編譯器會提供一系列的提示，提高編碼效率 app.name = @"Jack”;

NSString *name = app.name;

本項目字典轉模型：

 

3 xib檔案的使用

Xib檔案可以用來描述某一塊局部的UI介面

Xib檔案的載入

方法1 NSArray *objs = [[NSBundle mainBundle] loadNibNamed:@"MJAppView" owner:nil options:nil];

這個方法會建立xib中的所有對象，並且將對象按順序放到objs數組中 （如果xib，那麼objs數組中依次會有3個對象：1個UIView、1個UIButton、1個UISwitch）

方法2 bundle參數可以為nil，預設就是main bundle UINib *nib = [UINib nibWithNibName:@"MJAppView" bundle:[NSBundle mainBundle]];

NSArray *objs = [nib instantiateWithOwner:nil options:nil];

在開發階段,面向開發人員的是xib檔案; 當把應用裝到手機上時,xib檔案就會轉為nib檔案

 

功能分析

以九宮格的形式展示應用資訊

點擊下載按鈕後，做出相應的操作

步驟分析

載入應用資訊

根據應用的個數建立對應的view

監聽下載按鈕點擊

 

程式實現

////  MJViewController.m//  01-應用管理////  Created by apple on 14-3-26.//  Copyright (c) 2014年 itcast. All rights reserved.//控制器#import "MJViewController.h"#import "MJApp.h"#import "MJAppView.h"@interface MJViewController ()/** 存放應用資訊 */@property (nonatomic, strong) NSArray *apps;@end@implementation MJViewController- (void)viewDidLoad{    [super viewDidLoad];        // 添加應用資訊        // 0.總列數(一行最多3列)    int totalColumns = 3;        // 1.應用的尺寸    CGFloat appW = 85;    CGFloat appH = 90;        // 2.間隙 = (控制器view的寬度 - 3 * 應用寬度) / 4    CGFloat marginX = (self.view.frame.size.width - totalColumns * appW) / (totalColumns + 1);    CGFloat marginY = 15;        // 3.根據應用個數建立對應的框框(index 0 ~ 11)    for (int index = 0; index<self.apps.count; index++) {        // 3.1.建立view        MJAppView *appView = [MJAppView appViewWithApp:self.apps[index]];                // 3.2.添加view        [self.view addSubview:appView];                // 3.3.設定frame        int row = index / totalColumns;        int col = index % totalColumns;        // 計算x和y        CGFloat appX = marginX + col * (appW + marginX);        CGFloat appY = 30 + row * (appH + marginY);        appView.frame = CGRectMake(appX, appY, appW, appH);                // 3.4.設定資料//        appView.app = self.apps[index];    }}- (NSArray *)apps{    if (_apps == nil) {        // 初始化                // 1.獲得plist的全路徑        NSString *path = [[NSBundle mainBundle] pathForResource:@"app.plist" ofType:nil];                // 2.載入數組        NSArray *dictArray = [NSArray arrayWithContentsOfFile:path];                // 3.將dictArray裡面的所有字典轉成模型對象,放到新的數組中        NSMutableArray *appArray = [NSMutableArray array];        for (NSDictionary *dict in dictArray) {            // 3.1.建立模型對象            MJApp *app = [MJApp appWithDict:dict];                        // 3.2.添加模型對象到數組中            [appArray addObject:app];        }                // 4.賦值        _apps = appArray;    }    return _apps;}@end

////  MJApp.m//  01-應用管理////  Created by apple on 14-3-26.//  Copyright (c) 2014年 itcast. All rights reserved.//  資料模型#import "MJApp.h"@implementation MJApp- (instancetype)initWithDict:(NSDictionary *)dict{    if (self = [super init]) {        self.name = dict[@"name"];        self.icon = dict[@"icon"];    }    return self;}+ (instancetype)appWithDict:(NSDictionary *)dict{    return [[self alloc] initWithDict:dict];}@end////  MJAppView.m// 01-應用管理

//// Created by apple on 14-3-26.// Copyright (c) 2014年 itcast. All rights reserved.// 
  如果一個view內部的子控制項比較多，一般會考慮自訂一個view，把它內部子控制項的建立屏蔽起來，不讓外界關心 
  外界可以傳入對應的模型資料給view，view拿到模型資料後給內部的子控制項設定對應的資料

#import "MJAppView.h"#import "MJApp.h"@interface MJAppView()@property (weak, nonatomic) IBOutlet UIImageView *iconView;@property (weak, nonatomic) IBOutlet UILabel *nameLabel;@end@implementation MJAppView//+ (instancetype)appView//{// NSBundle *bundle = [NSBundle mainBundle];// // 讀取xib檔案(會建立xib中的描述的所有對象,並且按順序放到數組中返回)// NSArray *objs = [bundle loadNibNamed:@"MJAppView" owner:nil options:nil];// return [objs lastObject];//}////+ (instancetype)appViewWithApp:(MJApp *)app//{// MJAppView *appView = [self appView];// appView.app = app;// return appView;//}+ (instancetype)appViewWithApp:(MJApp *)app{ NSBundle *bundle = [NSBundle mainBundle]; // 讀取xib檔案(會建立xib中的描述的所有對象,並且按順序放到數組中返回) NSArray *objs = [bundle loadNibNamed:@"MJAppView" owner:nil options:nil]; MJAppView *appView = [objs lastObject]; appView.app = app; return appView;}+ (instancetype)appView{ return [self appViewWithApp:nil];}- (void)setApp:(MJApp *)app{ _app = app; // 1.設定表徵圖 self.iconView.image = [UIImage imageNamed:app.icon]; // 2.設定名稱 self.nameLabel.text = app.name;}@end

 

ios基礎控制項 九宮格view