[iOS基礎(chǔ)控件-4.4]進(jìn)一步封裝"APP列表”，初見(jiàn)MVC模式

2019-11-14 19:49:44

字體：大中小

供稿：網(wǎng)友

A.從ViewController分離View

     之前的代碼中，View的數(shù)據(jù)加載邏輯放在了總的ViewController中，增加了耦合性，應(yīng)該對(duì)控制器ViewController隱藏?cái)?shù)據(jù)加載到View的細(xì)節(jié)。
     封裝View的創(chuàng)建邏輯
     封裝View的數(shù)據(jù)加載邏輯到自定義的UIView中

B.思路

使用xib封裝自定義view的步驟：

1.新建一個(gè)繼承UIView的自定義view，這里的名字是“AppView”，用來(lái)封裝獨(dú)立控件組

每個(gè)AppView封裝了如下圖的控件組

2.新建一個(gè)xib文件來(lái)描述控件結(jié)構(gòu)，就是上圖的控件組

3.在Controller中使用AppView作為每個(gè)獨(dú)立控件組的類(lèi)型單位

4.將控件和View “AppView” 進(jìn)行連線(xiàn)

5.View “AppView” 提供一個(gè)模型屬性

6.重寫(xiě)模型屬性的setter，解析模型數(shù)據(jù)

7.設(shè)置模型數(shù)據(jù)到控件中

8.自定義View “AppView”的構(gòu)造方法，屏蔽讀取xib文件的細(xì)節(jié)

其實(shí)這就是一種簡(jiǎn)單的MVC模式

Model: App.h, App.m

View: AppView.h, AppView.m

Controller: ViewController.h, ViewController.m

Controller連接了View和Model，取得數(shù)據(jù)后加載到Model，然后傳給View進(jìn)行解析并顯示

C.實(shí)現(xiàn)

1.新建UIView類(lèi)”AppView"，繼承自UIView

new file ==>

創(chuàng)建聲明文件”AppView.h”和“AppView.m”

2.設(shè)置xib的class (默認(rèn)是UIView) 為新建的”AppView"

3.在新建的UIView中編寫(xiě)View的數(shù)據(jù)加載邏輯

（1）在”AppView.h”中創(chuàng)建Model成員

1 // 在Controller和View之間傳輸?shù)腗odel數(shù)據(jù)2 @PRoperty(nonatomic, strong) App *appData;

（2）連接控件和”AppView"，創(chuàng)建私有控件成員

（3）在”AppView.m”中解析加載數(shù)據(jù)

1 - (void)setAppData:(App *)appData {2     _appData = appData;3    4     // 1.設(shè)置圖片5     self.iconView.image = [UIImage imageNamed:appData.icon];6     // 2.設(shè)置名字7     self.nameLabel.text = appData.name;8 }

（4）自定義構(gòu)造方法

AppView.h:

1 // 自定義將Model數(shù)據(jù)加載到View的構(gòu)造方法2 - (instancetype) initWithApp:(App *) appData;3 // 自定義構(gòu)造的類(lèi)方法4 + (instancetype) appViewWithApp:(App *) appData;5 // 返回一個(gè)不帶Model數(shù)據(jù)的類(lèi)構(gòu)造方法6 + (instancetype) appView;

AppView.m:

 1 // 自定義將Model數(shù)據(jù)加載到View的構(gòu)造方法 2 - (instancetype) initWithApp:(App *) appData { 3     // 1.從NIB取得控件 4     UINib *nib = [UINib nibWithNibName:@"app" bundle:[NSBundle mainBundle]]; 5     NSArray *viewArray = [nib instantiateWithOwner:nil options:nil]; 6     AppView *appView = [viewArray lastObject]; 7     8     // 2.加載Model 9     appView.appData = appData;10    11     return appView;12 }13 14 // 自定義構(gòu)造的類(lèi)方法15 + (instancetype) appViewWithApp:(App *) appData {16     return [[self alloc] initWithApp:appData];17 }18 19 // 返回一個(gè)不帶Model數(shù)據(jù)的類(lèi)構(gòu)造方法20 + (instancetype) appView {21     return [self appViewWithApp:nil];22 }

（5）在Controller中創(chuàng)建”AppView”并加載數(shù)據(jù)

 1         // 1.創(chuàng)建View 2         AppView *appView = [AppView appViewWithApp:appData]; 3         4         // 2.定義每個(gè)app的位置、尺寸 5         CGFloat appX = marginX + column * (marginX + APP_WIDTH); 6         CGFloat appY = marginY + row * (marginY + APP_HEIGHT); 7         appView.frame = CGRectMake(appX, appY, APP_WIDTH, APP_HEIGHT); 8  9        10         // 3.加入此app信息到總view11         [self.view addSubview:appView];

主要代碼

  1 ViewController.m  2 #import "ViewController.h"  3 #import "App.h"  4 #import "AppView.h"  5   6 #define ICON_KEY @"icon"  7 #define NAME_KEY @"name"  8 #define APP_WIDTH 85  9 #define APP_HEIGHT 90 10 #define MARGIN_HEAD 20 11 #define ICON_WIDTH 50 12 #define ICON_HEIGHT 50 13 #define NAME_WIDTH APP_WIDTH 14 #define NAME_HEIGHT 20 15 #define DOWNLOAD_WIDTH (APP_WIDTH - 20) 16 #define DOWNLOAD_HEIGHT 20 17  18 @interface ViewController () 19  20 /** 存放應(yīng)用信息 */ 21 @property(nonatomic, strong) NSArray *apps; // 應(yīng)用列表 22  23 @end 24  25 @implementation ViewController 26  27 - (void)viewDidLoad { 28     [super viewDidLoad]; 29     // Do any additional setup after loading the view, typically from a nib. 30     31     [self loadApps]; 32 } 33  34 - (void)didReceiveMemoryWarning { 35     [super didReceiveMemoryWarning]; 36     // Dispose of any resources that can be recreated. 37 } 38  39 #pragma mark 取得應(yīng)用列表 40 - (NSArray *) apps { 41     if (nil == _apps) { 42         // 1.獲得plist的全路徑 43         NSString *path = [[NSBundle mainBundle] pathForResource:@"app.plist" ofType:nil]; 44         45         // 2.加載數(shù)據(jù) 46         NSArray *dictArray  = [NSArray arrayWithContentsOfFile:path]; 47         48         // 3.將dictArray里面的所有字典轉(zhuǎn)成模型，放到新數(shù)組中 49         NSMutableArray *appArray = [NSMutableArray array]; 50         for (NSDictionary *dict in dictArray) { 51             // 3.1創(chuàng)建模型對(duì)象 52             App *app = [App appWithDictionary:dict]; 53             54             // 3.2 添加到app數(shù)組中 55             [appArray addObject:app]; 56         } 57         58         _apps = appArray; 59     } 60  61     return _apps; 62 } 63  64 #pragma mark 加載全部應(yīng)用列表 65 - (void) loadApps { 66     int appColumnCount = [self appColumnCount]; 67     int appRowCount = [self appRowCount]; 68     69     CGFloat marginX = (self.view.frame.size.width - APP_WIDTH * appColumnCount) / (appColumnCount + 1); 70     CGFloat marginY = (self.view.frame.size.height - APP_HEIGHT * appRowCount) / (appRowCount + 1) + MARGIN_HEAD; 71     72     int column = 0; 73     int row = 0; 74     for (int index=0; index<self.apps.count; index++) { 75         App *appData = self.apps[index]; 76  77         // 1.創(chuàng)建View 78         AppView *appView = [AppView appViewWithApp:appData]; 79         80         // 2.定義每個(gè)app的位置、尺寸 81         CGFloat appX = marginX + column * (marginX + APP_WIDTH); 82         CGFloat appY = marginY + row * (marginY + APP_HEIGHT); 83         appView.frame = CGRectMake(appX, appY, APP_WIDTH, APP_HEIGHT); 84  85         86         // 3.加入此app信息到總view 87         [self.view addSubview:appView]; 88         89         column++; 90         if (column == appColumnCount) { 91             column = 0; 92             row++; 93         } 94     } 95 } 96  97  98 #pragma mark 計(jì)算列數(shù) 99 - (int) appColumnCount {100     int count = 0;101     count = self.view.frame.size.width / APP_WIDTH;102    103     if ((int)self.view.frame.size.width % (int)APP_WIDTH == 0) {104         count--;105     }106    107     return count;108 }109 110 #pragma mark 計(jì)算行數(shù)111 - (int) appRowCount {112     int count = 0;113     count = (self.view.frame.size.height - MARGIN_HEAD) / APP_HEIGHT;114    115     if ((int)(self.view.frame.size.height - MARGIN_HEAD) % (int)APP_HEIGHT == 0) {116         count--;117     }118    119     return count;120 }121 122 @end

AppView.m:

 1 #import "AppView.h" 2 #import "App.h" 3  4 // 封裝私有屬性 5 @interface AppView() 6  7 // 封裝View中的控件，只允許自己訪(fǎng)問(wèn) 8 @property (weak, nonatomic) IBOutlet UIImageView *iconView; 9 @property (weak, nonatomic) IBOutlet UILabel *nameLabel;10 11 @end12 13 @implementation AppView14 15 - (void)setAppData:(App *)appData {16     // 1.賦值Medel成員17     _appData = appData;18    19     // 2.設(shè)置圖片20     self.iconView.image = [UIImage imageNamed:appData.icon];21     // 3.設(shè)置名字22     self.nameLabel.text = appData.name;23 }24 25 // 自定義將Model數(shù)據(jù)加載到View的構(gòu)造方法26 - (instancetype) initWithApp:(App *) appData {27     // 1.從NIB取得控件28     UINib *nib = [UINib nibWithNibName:@"app" bundle:[NSBundle mainBundle]];29     NSArray *viewArray = [nib instantiateWithOwner:nil options:nil];30     AppView *appView = [viewArray lastObject];31    32     // 2.加載Model33     appView.appData = appData;34    35     return appView;36 }37 38 // 自定義構(gòu)造的類(lèi)方法39 + (instancetype) appViewWithApp:(App *) appData {40     return [[self alloc] initWithApp:appData];41 }42 43 // 返回一個(gè)不帶Model數(shù)據(jù)的類(lèi)構(gòu)造方法44 + (instancetype) appView {45     return [self appViewWithApp:nil];46 }47 48 @end

App.m

 1 #import "App.h" 2  3 #define ICON_KEY @"icon" 4 #define NAME_KEY @"name" 5  6 @implementation App 7  8 - (instancetype) initWithDictionary:(NSDictionary *) dictionary { 9     if (self = [super init]) {10         self.name = dictionary[NAME_KEY];11         self.icon = dictionary[ICON_KEY];12     }13    14     return self;15 }16 17 18 + (instancetype) appWithDictionary:(NSDictionary *) dictionary {19     // 使用self代表類(lèi)名代替真實(shí)類(lèi)名，防止子類(lèi)調(diào)用出錯(cuò)20     return [[self alloc] initWithDictionary:dictionary];21 }22 23 @end