iOS開發UI篇—以微博介面為例使用純程式碼自訂cell程式編碼全過程（一）

一、storyboard的處理 直接讓控制器繼承uitableview controller，然後在storyboard中把繼承自uiviewcontroller的控制器幹掉，重新拖一個tableview controller，和主控制器進行連線。項目結構和plist檔案  二、程式邏輯業務的處理第一步，把配圖和plist中拿到項目中，載入plist資料（非png的圖片放到spooding files中）第二步，字典轉模型，完成plist中資料的載入。屬性的注意點（number  vip是bool類型，本質是整型的）kvc會智能的把nsnumber轉換成bool型的。第三步，懶載入。第四步，有了資料之後直接實現資料來源方法（1）一共有幾組（如果有一組的，那麼可以不寫，預設為一組）（2）每組一共有多少行（數組有多少個元素，就有多少組）（3）展示資料1）到緩衝中取cell2）沒有的話就建立3）設定資料4）返回cell三、代碼 視圖部分 YYweiboCell.h檔案 複製代碼 1 // 2 //  YYweiboCell.h 3 //  微博基本資料展示 4 // 5 //  Created by 孔醫己 on 14-6-2. 6 //  Copyright (c) 2014年 itcast. All rights reserved. 7 // 8  9 #import <UIKit/UIKit.h>10 11 @class YYweiboModel;12 @interface YYweiboCell : UITableViewCell13 14 @property(nonatomic,strong)YYweiboModel *weibo;15 @end複製代碼YYweiboCell.m檔案 複製代碼  1 //  2 //  YYweiboCell.m  3 //  微博基本資料展示  4 //  5 //  Created by 孔醫己 on 14-6-2.  6 //  Copyright (c) 2014年 itcast. All rights reserved.  7 //  8   9 #import "YYweiboCell.h" 10 #import "YYweiboModel.h" 11  12 @interface YYweiboCell() 13 /** 14  *  頭像 15  */ 16 @property(nonatomic,weak)UIImageView *iconView; 17 /** 18  *  vip表徵圖 19  */ 20 @property(nonatomic,weak)UIImageView *vipView; 21 /** 22  *  微博暱稱 23  */ 24 @property(nonatomic,weak)UILabel *nameLabel; 25 /** 26  *  配圖 27  */ 28 @property(nonatomic,weak)UIImageView *pictureView; 29 /** 30  *  本文 31  */ 32 @property(nonatomic,weak)UILabel *textLab; 33  34 @end 35  36 @implementation YYweiboCell 37  38 //重寫構造方法，讓自訂的cell一建立出來就有五個子控制項 39 - (id)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier 40 { 41     self = [super initWithStyle:style reuseIdentifier:reuseIdentifier]; 42     if (self) { 43         //1.添加頭像 44         UIImageView *img=[[UIImageView alloc]init]; 45         [self.contentView addSubview:img]; 46         self.iconView=img; 47          48         //2.添加暱稱 49         UILabel *namelab=[[UILabel alloc]init]; 50         [self.contentView addSubview:namelab]; 51         self.nameLabel=namelab; 52          53         //3.vip 54         UIImageView  *vipview=[[UIImageView alloc]init]; 55         [self.contentView addSubview:vipview]; 56         self.vipView=vipview; 57       58         //4.本文 59         UILabel *textlab=[[UILabel alloc]init]; 60         [self.contentView addSubview:textlab]; 61         self.textLab=textlab; 62          63         //5.圖片 64         UIImageView *picture=[[UIImageView alloc]init]; 65         [self.contentView addSubview:picture]; 66         self.pictureView=picture; 67     } 68     return self; 69 } 70  71 /** 72  *  重寫set方法 73  * 74  *  @param weibo 微博 75  */ 76 -(void)setWeibo:(YYweiboModel *)weibo 77 { 78     //不要忘了，記錄傳遞進來的模型 79     _weibo=weibo; 80     //給子控制項賦值資料 81     [self settingData]; 82     //設定子控制項的frame 83     [self settingFrame]; 84 } 85  86 /** 87  *  對子控制項的資料進行設定 88  */ 89 -(void)settingData 90 { 91     //1.設定頭像的資料 92     self.iconView.image=[UIImage imageNamed:_weibo.icon]; 93      94     //2.設定vip表徵圖的資料 95     self.vipView.image=[UIImage imageNamed:@"vip"]; 96      97     //3.設定本文內容的資料 98     self.textLab.text=_weibo.text; 99     100     //4.設定配圖的資料101     self.pictureView.image=[UIImage imageNamed:_weibo.picture];102     103     //5.設定微博暱稱資料104     self.nameLabel.text=_weibo.name;105 }106 107 108 /**109  *  設定子控制項的Frame110  */111 -(void)settingFrame112 {113     //1.設定頭像的frame114     CGFloat padding=10;115     CGFloat iconViewX=padding;116     CGFloat iconViewY=padding;117     CGFloat iconViewW=30;118     CGFloat iconViewH=30;119     120     self.iconView.frame=CGRectMake(iconViewX, iconViewY, iconViewW, iconViewH);121     122     123 #warning 未完成124 }125 @end複製代碼資料模型部分  YYweiboModel.h檔案 複製代碼 1 // 2 //  YYweiboModel.h 3 //  微博基本資料展示 4 // 5 //  Created by 孔醫己 on 14-6-2. 6 //  Copyright (c) 2014年 itcast. All rights reserved. 7 // 8  9 #import <Foundation/Foundation.h>10 11 @interface YYweiboModel : NSObject12 /**13  *  暱稱14  */15 @property(nonatomic,copy)NSString *name;16 /**17  *  本文18  */19 @property(nonatomic,copy)NSString *text;20 /**21  *  頭像22  */23 @property(nonatomic,copy)NSString *icon;24 /**25  *  配圖26  */27 @property(nonatomic,copy)NSString *picture;28 /**29  *  是否是vip30  */31 @property(nonatomic,assign)BOOL vip;32 33 //介面34 -(instancetype)initWithDict:(NSDictionary *)dict;35 +(instancetype)weiboModelWithDict:(NSDictionary *)dict;36 @end複製代碼YYweiboModel.m檔案 複製代碼 1 // 2 //  YYweiboModel.m 3 //  微博基本資料展示 4 // 5 //  Created by 孔醫己 on 14-6-2. 6 //  Copyright (c) 2014年 itcast. All rights reserved. 7 // 8  9 #import "YYweiboModel.h"10 11 @implementation YYweiboModel12 13 -(instancetype)initWithDict:(NSDictionary *)dict14 {15     if (self = [super init]) {16         //使用KVC17         [self setValuesForKeysWithDictionary:dict];18     }19     return self;20 }21 22 /**23  *  Factory 方法24  *25  *  @param dict 字典26  *27  *  @return 模型28  */29 +(instancetype)weiboModelWithDict:(NSDictionary *)dict30 {31     return [[self alloc]initWithDict:dict];32 }33 @end複製代碼主控制器部分 YYViewController.h檔案 #import <UIKit/UIKit.h> @interface YYViewController : UITableViewController @endYYViewController.m檔案 複製代碼 1 // 2 //  YYViewController.m 3 //  微博基本資料展示 4 // 5 //  Created by 孔醫己 on 14-6-2. 6 //  Copyright (c) 2014年 itcast. All rights reserved. 7 // 8  9 #import "YYViewController.h"10 #import "YYweiboModel.h"11 #import "YYweiboCell.h"12 13 @interface YYViewController ()14 @property(nonatomic,strong)NSArray *weibos;15 16 @end17 18 @implementation YYViewController19 20 - (void)viewDidLoad21 {22     [super viewDidLoad];23 }24 25 #pragma mark -懶載入26 -(NSArray *)weibos27 {28     if (_weibos==Nil) {29         NSString *fullpath=[[NSBundle mainBundle]pathForResource:@"statuses.plist" ofType:nil];30         NSArray *arrayM=[NSArray arrayWithContentsOfFile:fullpath];31         32         NSMutableArray *models=[NSMutableArray arrayWithCapacity:arrayM.count];33         for (NSDictionary *dict in arrayM) {34             YYweiboModel *weibomodel=[YYweiboModel weiboModelWithDict:dict];35             [models addObject:weibomodel];36         }37         _weibos=[models copy];38     }39     return _weibos;40 }41 42 #pragma mark- 資料來源方法43 //返回多少組44 //這裡可以不寫，預設返回一組45 -(NSInteger)numberOfSectionsInTableView:(UITableView *)tableView46 {47     return 1;48 }49 //每組多少行50 -(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section51 {52     return self.weibos.count;53 }54 //每組每行的資料-設定cell55 -(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath56 {57     //1.到緩衝中去取cell58     static NSString *ID=@"ID";59      //2.沒有則建立cell60     YYweiboCell *cell=[tableView dequeueReusableCellWithIdentifier:ID];61     if (cell==nil) {62         cell=[[YYweiboCell alloc]initWithStyle:UITableViewCellStyleDefault reuseIdentifier:ID];63     }64    65     //3.設定cell的資料66     cell.weibo=self.weibos[indexPath.row];67     //4.返回cell68     return cell;69     70 }71 72 #pragma mark- 隱藏狀態列73 -(BOOL)prefersStatusBarHidden74 {75     return YES;76 }77 @end複製代碼階段性展示：   四、補充說明 1對於展示資料部分的補充說明： 　　設定資料的時候遇到新的問題：uitableviewcell預設只有一個imageview，一個tabletext和一個詳細三個子控制項可以用，但是這個微博至少有四個。系統提供的cell不能滿足需求，那麼我們就在系統提供的cell的基礎上為它增加一些功能，建立一個類，自訂cell，讓它繼承自uitableviewcell。　　不用系統的，用自己定義的cell,把自訂的cell標頭檔匯入，還是先去緩衝中找，如果找不到就建立一個自訂的cell。建立玩自訂cell後，就應該給cell設定資料，按照封裝的思想，設定資料的時候，你把資料給我，我自己愛怎麼設定就怎麼設定。所以把當前的模型取出來，傳遞給我cell中得一個屬性，我自己重寫set方法完成賦值。在cell裡面應該增加一個屬性，用於接收傳入的模型。　　此時，應該賦值資料，並對系統原有的封裝和操作進行分析。在以前建立的系統的cell一建立的時候預設就有三個子控制項提供給我們使用。自訂的cell按照實際的需求（需要建立5個子控制項），我們也應該以建立出一個cell來就能夠提供五個子控制項供我們使用。　　在哪個地方可以以建立出來就擁有某些東西呢？當然是在initwith初始化方法中完成（構造方法讓我們的對象一建立出來就擁有某些東西），為了讓我自訂的cell一建立出來就有三個imageview兩個label，應該重寫構造。系統自動填好（你很有可能會用到）。在構造方法中，讓自訂的cell和系統的cell一樣，以建立出來就擁有一些子控制項提供給我們使用。 2在自訂cell部分的說明：A.建立控制項，添加並賦值給屬性。1.建立頭像2.建立暱稱3.建立vip4建立本文5.建立配圖 注意點：uiimageview iconview名稱不能寫成是imageview(他的父類叫imageview，那麼不能在子類中定義一個imageview,不然到時候它怎麼知道是要調用哪個？不能和系統內建的重名)。建立好之後，添加到contentview中。可以進入到標頭檔中查看注釋：如果你自訂一個cell，如果要添加view的時候，建議添加到contentview中。當在外部建立一個cell的時候，調用他的初始化構造方法，首先就來到構造方法中，添加5個控制項到cell中。為什麼不設定資料（系統的也沒有設定資料）添加資料，將來設定模型的時候再添加。 B.如何設定資料？在傳遞模型給他的時候，重寫它的set方法，拿到外界傳遞進來的資料，給它設定資料就完了。重寫set方法:在set方法中，應該做兩件事情。（1）設定子控制項的資料（2）設定子控制項的frame，因為如果不設定frame的話，子控制項根本顯示不出來。（不能在init方法中設定控制項的frame）邏輯：因為子控制項的frame高度等是依賴於資料的，需要根據資料來確定，所以只能在拿到資料的時候才能設定子控制項的frame,在下面的set方法中要拿到上面添加的控制項，怎麼拿？是否應該把上面的子控制項通過屬性儲存一下。控制項一般用weak,但是用strong也可以。通過屬性儲存之後，下面才能進行賦值。