你好,歡迎來到IOS教程網

 Ios教程網 >> IOS訊息 >> 關於IOS >> iOS開發UI篇―以微博界面為例使用純代碼自定義cell程序編碼全過程(一)

iOS開發UI篇―以微博界面為例使用純代碼自定義cell程序編碼全過程(一)

編輯:關於IOS

一、storyboard的處理

  直接讓控制器繼承uitableview controller,然後在storyboard中把繼承自uiviewcontroller的控制器干掉,重新拖一個tableview controller,和主控制器進行連線。 項目結構和plist文件     二、程序邏輯業務的處理 第一步,把配圖和plist中拿到項目中,加載plist數據(非png的圖片放到spooding files中) 第二步,字典轉模型,完成plist中數據的加載。屬性的注意點(number  vip是bool類型,本質是整型的)kvc會智能的把nsnumber轉換成bool型的。 第三步,懶加載。 第四步,有了數據之後直接實現數據源方法 (1)一共有幾組(如果有一組的,那麼可以不寫,默認為一組) (2)每組一共有多少行(數組有多少個元素,就有多少組) (3)展示數據 1)到緩存中取cell 2)沒有的話就創建 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 : UITableViewCell 13  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  *  設置子控件的Frame 110  */ 111 -(void)settingFrame 112 { 113     //1.設置頭像的frame 114     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 : NSObject 12 /** 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  *  是否是vip 30  */ 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 YYweiboModel 12  13 -(instancetype)initWithDict:(NSDictionary *)dict 14 { 15     if (self = [super init]) { 16         //使用KVC 17         [self setValuesForKeysWithDictionary:dict]; 18     } 19     return self; 20 } 21  22 /** 23  *  工廠方法 24  * 25  *  @param dict 字典 26  * 27  *  @return 模型 28  */ 29 +(instancetype)weiboModelWithDict:(NSDictionary *)dict 30 { 31     return [[self alloc]initWithDict:dict]; 32 } 33 @end 復制代碼 主控制器部分   YYViewController.h文件   #import <UIKit/UIKit.h>   @interface YYViewController : UITableViewController   @end YYViewController.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 @end 17  18 @implementation YYViewController 19  20 - (void)viewDidLoad 21 { 22     [super viewDidLoad]; 23 } 24  25 #pragma mark -懶加載 26 -(NSArray *)weibos 27 { 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 *)tableView 46 { 47     return 1; 48 } 49 //每組多少行 50 -(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section 51 { 52     return self.weibos.count; 53 } 54 //每組每行的數據-設置cell 55 -(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath 56 { 57     //1.到緩存中去取cell 58     static NSString *ID=@"ID"; 59      //2.沒有則創建cell 60     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.返回cell 68     return cell; 69      70 } 71  72 #pragma mark- 隱藏狀態欄 73 -(BOOL)prefersStatusBarHidden 74 { 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.創建vip 4創建正文 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也可以。通過屬性保存之後,下面才能進行賦值。  
  1. 上一頁:
  2. 下一頁:
蘋果刷機越獄教程| IOS教程問題解答| IOS技巧綜合| IOS7技巧| IOS8教程
Copyright © Ios教程網 All Rights Reserved