iOS開發UI篇—使用xib自訂UItableviewcell實現一個簡單的團購應用介面布局

標籤：

iOS開發UI篇—使用xib自訂UItableviewcell實現一個簡單的團購應用介面布局

一、專案檔結構和plist檔案

 

二、實現效果

三、程式碼範例

1.沒有使用配套的類，而是直接使用xib檔案控制項tag值操作

資料模型部分：

YYtg.h檔案

 1 // 2 //  YYtg.h 3 //  01-團購資料顯示（沒有配套的類） 4 // 5 //  Created by apple on 14-5-29. 6 //  Copyright (c) 2014年 itcase. All rights reserved. 7 // 8  9 #import <Foundation/Foundation.h>10 #import "Global.h"11 12 @interface YYtg : NSObject13 @property(nonatomic,copy)NSString *buyCount;14 @property(nonatomic,copy)NSString *icon;15 @property(nonatomic,copy)NSString *price;16 @property(nonatomic,copy)NSString *title;17 YYinitH(tg)18 @end

YYtg.m檔案

 1 // 2 //  YYtg.m 3 //  01-團購資料顯示（沒有配套的類） 4 // 5 //  Created by apple on 14-5-29. 6 //  Copyright (c) 2014年 itcase. All rights reserved. 7 // 8  9 #import "YYtg.h"10 11 @implementation YYtg12 YYinitM(tg)13 @end

主控制器

YYViewController.m檔案

 1 // 2 //  YYViewController.m 3 //  01-團購資料顯示（沒有配套的類） 4 // 5 //  Created by apple on 14-5-29. 6 //  Copyright (c) 2014年 itcase. All rights reserved. 7 // 8  9 #import "YYViewController.h"10 #import "YYtg.h"11 12 @interface YYViewController ()<UITableViewDataSource>13 @property(nonatomic,strong)NSArray *tg;14 @property (strong, nonatomic) IBOutlet UITableView *tableview;15 16 @end17 18 @implementation YYViewController19 20 - (void)viewDidLoad21 {22     [super viewDidLoad];23     self.tableview.rowHeight=100;24     25 }26 27 #pragma mark-  懶載入28 -(NSArray *)tg29 {30     if (_tg==nil) {31         NSString *fullpath=[[NSBundle mainBundle]pathForResource:@"tgs.plist" ofType:nil];32         NSArray *temparray=[NSArray arrayWithContentsOfFile:fullpath];33         34         NSMutableArray *arrayM=[NSMutableArray arrayWithCapacity:temparray.count];35         for (NSDictionary *dict in temparray) {36             YYtg *tg=[YYtg tgWithDict:dict];37             [arrayM addObject:tg];38         }39         _tg=[arrayM mutableCopy];40     }41     return _tg;42 }43 44 #pragma mark-資料顯示45 -(NSInteger)numberOfSectionsInTableView:(UITableView *)tableView46 {47     return 1;48 }49 -(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section50 {51     return self.tg.count;52 }53 -(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath54 {55     //讀取xib中的資料56 //    NSArray *arrayM=[[NSBundle mainBundle]loadNibNamed:@"tgcell" owner:nil options:nil];57 //    UITableViewCell *cell=[arrayM firstObject];58     static NSString *[email protected]"tg";59     UITableViewCell *cell=[tableView dequeueReusableCellWithIdentifier:identifier];60     if (cell==nil) {61        // cell=[[UITableViewCell alloc]initWithStyle:UITableViewCellStyleDefault reuseIdentifier:identifier];62         cell= [[[NSBundle mainBundle]loadNibNamed:@"tgcell" owner:nil options:nil] firstObject];63     }64     65     YYtg *tg=self.tg[indexPath.row];66     //設定資料67     //使用tag68     UIImageView *imgv=(UIImageView *)[cell viewWithTag:1];69     imgv.image=[UIImage imageNamed:tg.icon];70     UILabel *buyCount=(UILabel *)[cell viewWithTag:4];71     buyCount.text=[NSString stringWithFormat:@"已有%@人購買",tg.buyCount];72     UILabel *title=(UILabel *)[cell viewWithTag:2];73     title.text=tg.title;74     UILabel *price=(UILabel *)[cell viewWithTag:3];75     price.text=[NSString stringWithFormat:@"$%@",tg.price];76     77     78     //返回cell79     return cell;80 }81 82 //隱藏狀態列83 -(BOOL)prefersStatusBarHidden84 {85     return YES;86 }87 @end

使用xib自訂的UItableviewcell

程式碼分析：

上面的代碼通過使用xib檔案中各個控制項的tag值，完成對每個部分資料的賦值和重新整理。但是，作為主控制器，它應該知道xib檔案中各個控制項的tag值，它知道的是不是太多了呢？

為瞭解決上面的問題，我們可以為自訂的cell設定一個配套的類，讓這個類來操作這個xib，對外提供介面，至於內部的資料處理，外界不需要關心，也不用關心。

改造後的代碼如下：

 

2.使用xib和對應的類完成自訂cell的資料展示

建立一個類，用來管理對應的xib檔案

注意類的繼承類，並把該類和xib檔案進行關聯

YYtgcell.h檔案代碼：

 1 // 2 //  YYtgcell.h 3 //  02-團購（使用xib和類完成資料展示） 4 // 5 //  Created by apple on 14-5-29. 6 //  Copyright (c) 2014年 itcase. All rights reserved. 7 // 8  9 #import <UIKit/UIKit.h>10 #import "YYtg.h"11 12 @interface YYtgcell : UITableViewCell13 @property(nonatomic,strong)YYtg *yytg;14 15 @end

 YYtgcell.m檔案

 1 // 2 //  YYtgcell.m 3 //  02-團購（使用xib和類完成資料展示） 4 // 5 //  Created by apple on 14-5-29. 6 //  Copyright (c) 2014年 itcase. All rights reserved. 7 // 8  9 #import "YYtgcell.h"10 //私人擴充11 @interface YYtgcell()12 @property (strong, nonatomic) IBOutlet UIImageView *img;13 @property (strong, nonatomic) IBOutlet UILabel *titlelab;14 @property (strong, nonatomic) IBOutlet UILabel *pricelab;15 @property (strong, nonatomic) IBOutlet UILabel *buycountlab;16 @end17 @implementation YYtgcell18 19 #pragma mark 重寫set方法，完成資料的賦值操作20 -(void)setYytg:(YYtg *)yytg21 {22     _yytg=yytg;23     self.img.image=[UIImage imageNamed:yytg.icon];24     self.titlelab.text=yytg.title;25     self.pricelab.text=[NSString stringWithFormat:@"$%@",yytg.price];26     self.buycountlab.text=[NSString stringWithFormat:@"已有%@人購買",yytg.buyCount];27 }28 @end

主控制器

YYViewController.m檔案

 1 // 2 //  YYViewController.m 3 //  02-團購（使用xib和類完成資料展示） 4 // 5 //  Created by apple on 14-5-29. 6 //  Copyright (c) 2014年 itcase. All rights reserved. 7 // 8  9 #import "YYViewController.h"10 #import "YYtg.h"11 #import "YYtgcell.h"12 13 @interface YYViewController ()<UITableViewDataSource,UITableViewDelegate>14 @property (strong, nonatomic) IBOutlet UITableView *tableview;15 16 @property(strong,nonatomic)NSArray *tg;17 @end18 19 @implementation YYViewController20 21 - (void)viewDidLoad22 {23     [super viewDidLoad];24     self.tableview.rowHeight=80.f;25 }26 #pragma mark-  懶載入27 -(NSArray *)tg28 {29     if (_tg==nil) {30         NSString *fullpath=[[NSBundle mainBundle]pathForResource:@"tgs.plist" ofType:nil];31         NSArray *temparray=[NSArray arrayWithContentsOfFile:fullpath];32         33         NSMutableArray *arrayM=[NSMutableArray arrayWithCapacity:temparray.count];34         for (NSDictionary *dict in temparray) {35             YYtg *tg=[YYtg tgWithDict:dict];36             [arrayM addObject:tg];37         }38         _tg=[arrayM mutableCopy];39     }40     return _tg;41 }42 43 44 #pragma mark- xib建立cell資料處理45 #pragma mark 多少組46 -(NSInteger)numberOfSectionsInTableView:(UITableView *)tableView47 {48     return 1;49 }50 #pragma mark多少行51 -(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section52 {53     return self.tg.count;54 }55 #pragma mark設定每組每行56 -(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath57 {58     static NSString *identifier= @"tg";59     YYtgcell *cell=[tableView dequeueReusableCellWithIdentifier:identifier];60     if (cell==nil) {61         //如何讓建立的cell加個戳62         //對於載入的xib檔案，可以到xib視圖的屬性選取器中進行設定63         cell=[[[NSBundle mainBundle]loadNibNamed:@"tgcell" owner:nil options:nil]firstObject];64         NSLog(@"建立了一個cell");65     }66     67     //設定cell的資料68     //擷取當前行的模型69     YYtg *tg=self.tg[indexPath.row];70     cell.yytg=tg;71     return cell;72 }73 74 -(BOOL)prefersStatusBarHidden75 {76     return YES;77 }78 79 @end

3.對上述代碼進行進一步的最佳化和調整（MVC）

最佳化如下：

（1）把主控制器中建立cell的過程抽取到YYtgcell中完成，並對外提供一個介面。

YYtgcell.h檔案（提供介面）

1 #import <UIKit/UIKit.h>2 #import "YYtgModel.h"3 4 @interface YYtgcell : UITableViewCell5 @property(nonatomic,strong)YYtgModel *yytg;6 7 //把載入資料（使用xib建立cell的內部細節進行封裝）8 +(instancetype)tgcellWithTableView:(UITableView *)tableView;9 @end

YYtgcell.m檔案（把建立自訂cell的部分進行封裝）

 1 // 2 //  YYtgcell.m 3 //  02-團購（使用xib和類完成資料展示） 4 // 5 //  Created by apple on 14-5-29. 6 //  Copyright (c) 2014年 itcase. All rights reserved. 7 // 8  9 #import "YYtgcell.h"10 //私人擴充11 @interface YYtgcell()12 @property (strong, nonatomic) IBOutlet UIImageView *img;13 @property (strong, nonatomic) IBOutlet UILabel *titlelab;14 @property (strong, nonatomic) IBOutlet UILabel *pricelab;15 @property (strong, nonatomic) IBOutlet UILabel *buycountlab;16 @end17 @implementation YYtgcell18 19 #pragma mark 重寫set方法，完成資料的賦值操作20 -(void)setYytg:(YYtgModel *)yytg21 {22     _yytg=yytg;23     self.img.image=[UIImage imageNamed:yytg.icon];24     self.titlelab.text=yytg.title;25     self.pricelab.text=[NSString stringWithFormat:@"$%@",yytg.price];26     self.buycountlab.text=[NSString stringWithFormat:@"已有%@人購買",yytg.buyCount];27 }28 29 +(instancetype)tgcellWithTableView:(UITableView *)tableView30 {31     static NSString *identifier= @"tg";32     YYtgcell *cell=[tableView dequeueReusableCellWithIdentifier:identifier];33     if (cell==nil) {34         //如何讓建立的cell加個戳35         //對於載入的xib檔案，可以到xib視圖的屬性選取器中進行設定36         cell=[[[NSBundle mainBundle]loadNibNamed:@"tgcell" owner:nil options:nil]firstObject];37         NSLog(@"建立了一個cell");38     }39     return cell;40 }41 42 @end

主控器中的商務邏輯更加清晰，YYViewController.m檔案代碼如下

 1 // 2 //  YYViewController.m 3 //  02-團購（使用xib和類完成資料展示） 4 // 5 //  Created by apple on 14-5-29. 6 //  Copyright (c) 2014年 itcase. All rights reserved. 7 // 8  9 #import "YYViewController.h"10 #import "YYtgModel.h"11 #import "YYtgcell.h"12 13 @interface YYViewController ()<UITableViewDataSource,UITableViewDelegate>14 @property (strong, nonatomic) IBOutlet UITableView *tableview;15 16 @property(strong,nonatomic)NSArray *tg;17 @end18 19 @implementation YYViewController20 21 - (void)viewDidLoad22 {23     [super viewDidLoad];24     self.tableview.rowHeight=80.f;25 }26 #pragma mark-  懶載入27 -(NSArray *)tg28 {29     if (_tg==nil) {30         NSString *fullpath=[[NSBundle mainBundle]pathForResource:@"tgs.plist" ofType:nil];31         NSArray *temparray=[NSArray arrayWithContentsOfFile:fullpath];32         33         NSMutableArray *arrayM=[NSMutableArray arrayWithCapacity:temparray.count];34         for (NSDictionary *dict in temparray) {35             YYtgModel *tg=[YYtgModel tgWithDict:dict];36             [arrayM addObject:tg];37         }38         _tg=[arrayM mutableCopy];39     }40     return _tg;41 }42 43 44 #pragma mark- xib建立cell資料處理45 46 #pragma mark 多少組47 -(NSInteger)numberOfSectionsInTableView:(UITableView *)tableView48 {49     return 1;50 }51 52 #pragma mark多少行53 -(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section54 {55     return self.tg.count;56 }57 58 #pragma mark設定每組每行59 -(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath60 {61     //1.建立cell62     YYtgcell *cell=[YYtgcell tgcellWithTableView:tableView];63    64     //2.擷取當前行的模型,設定cell的資料65     YYtgModel *tg=self.tg[indexPath.row];66     cell.yytg=tg;67     68     //3.返回cell69     return cell;70 }71 72 #pragma mark- 隱藏狀態列73 -(BOOL)prefersStatusBarHidden74 {75     return YES;76 }77 78 @end

四、推薦調整的專案檔結構

這是調整後的檔案結構，完整的MVC架構。

注意：注意檔案的命名規範。

提示技巧：批量改名，操作如下：

 

修改為想要的名稱：

 

iOS開發UI篇—使用xib自訂UItableviewcell實現一個簡單的團購應用介面布局