UITableView 實(shí)現(xiàn)汽車(chē)品牌（demo）

更新時(shí)間：2015年08月10日 16:30:53 作者：apecoder

UITableView堪稱(chēng)UIKit里面最復(fù)雜的一個(gè)控件了，使用起來(lái)不算難，但是要用好并不容易，當(dāng)使用的時(shí)候我們必須要考慮到后臺(tái)數(shù)據(jù)的設(shè)計(jì)，tableViewCell的設(shè)計(jì)和重用以及tableView的效率等問(wèn)題，下面小編通過(guò)UITableView 實(shí)現(xiàn)汽車(chē)品牌，需要的朋友可以參考下

看TableView的資料其實(shí)已經(jīng)蠻久了，一直想寫(xiě)點(diǎn)兒東西，卻總是因?yàn)楦鞣N原因拖延，今天晚上有時(shí)間靜下心來(lái)記錄一些最近學(xué)習(xí)的TableView的知識(shí)。下面進(jìn)入正題，UITableView堪稱(chēng)UIKit里面最復(fù)雜的一個(gè)控件了，使用起來(lái)不算難，但是要用好并不容易。當(dāng)使用的時(shí)候我們必須要考慮到后臺(tái)數(shù)據(jù)的設(shè)計(jì)，tableViewCell的設(shè)計(jì)和重用以及tableView的效率等問(wèn)題。

上次介紹的UITableView，這里再做一個(gè)UITableView的小程序，汽車(chē)品牌，截圖如下：

1.1創(chuàng)建項(xiàng)目，這里不多講。

1.2 把所有汽車(chē)品牌的圖片放到images.xcassets中，如下圖：

1.3創(chuàng)建 plist數(shù)據(jù)，plist數(shù)據(jù)里面每個(gè)array為一個(gè)汽車(chē)品牌分組，每個(gè)array里面又有一個(gè)array，這里面存放每個(gè)分組下所有的品牌汽車(chē)數(shù)據(jù)，數(shù)據(jù)如下圖。

1.4數(shù)據(jù)創(chuàng)建完之后，然后設(shè)計(jì)頁(yè)面，頁(yè)面很簡(jiǎn)單，直接放一個(gè)UItable View就可以了。

2.1后臺(tái)代碼，第一步導(dǎo)入

<UITableViewDataSource,UITableViewDelegate,UIAlertViewDelegate>

只有導(dǎo)入這UItable View的這幾個(gè)代理，我們才能在后面的代碼中使用UItable View的一些相對(duì)應(yīng)的方法。

2.2 創(chuàng)建UItable View控件的屬性，和創(chuàng)建一個(gè)存儲(chǔ)數(shù)據(jù)的數(shù)組，如下。

@property (weak, nonatomic) IBOutlet UITableView *tableView;
@property(nonatomic,strong)NSArray *carGroups;

2.3 加載數(shù)據(jù)，這邊先要?jiǎng)?chuàng)建兩個(gè)模型類(lèi)來(lái)保存數(shù)據(jù)，國(guó)為我們這里的數(shù)據(jù)都在本地的plist文化中，所以我們要把這個(gè)plist里面的數(shù)據(jù)讀取出來(lái)保存在

創(chuàng)建的carGroups數(shù)組中，而本地的plist文件是一個(gè)array類(lèi)型，而每個(gè)array里面又有一個(gè)array數(shù)組，所以我們要?jiǎng)?chuàng)建兩個(gè)模型類(lèi)來(lái)保存數(shù)據(jù)，一個(gè)模型類(lèi)保存外面的array數(shù)據(jù)，一個(gè)模型類(lèi)來(lái)保存array里面的子array數(shù)據(jù)，然后在模型類(lèi)里面創(chuàng)建和plist里面對(duì)應(yīng)的數(shù)據(jù)的屬性和方法

代碼如下：

#import <Foundation/Foundation.h>
@interface ZKCarModel : NSObject
//頭像
@property(nonatomic,copy)NSString * icon;
//名字
@property(nonatomic,copy)NSString *name;
+(instancetype)CarWithDict:(NSDictionary *)dic;
-(instancetype)initWithDict:(NSDictionary *)dic;
@end

#import "ZKCarModel.h"
@implementation ZKCarModel
-(instancetype)initWithDict:(NSDictionary *)dic
{
 if(self=[super init])
 {
 [self setValuesForKeysWithDictionary:dic];
 }
 return self;
}
+(instancetype)CarWithDict:(NSDictionary *)dic
{
 return [[self alloc] initWithDict:dic];
}
@end
#import <Foundation/Foundation.h>
#import "ZKCarModel.h"
@interface ZKCarGroupModel : NSObject
//題目
@property(nonatomic,copy)NSString *title;
@property(nonatomic,strong)NSArray *cars;
+(instancetype)CarGroupWithDic:(NSDictionary *)dic;
-(instancetype)initWithDict:(NSDictionary *)dic;
@end

#import "ZKCarGroupModel.h"
@implementation ZKCarGroupModel
-(instancetype)initWithDict:(NSDictionary *)dic
{
 if(self=[super init])
 {
 self.title=dic[@"title"];
 NSMutableArray *Array=[NSMutableArray array];
 for (NSDictionary *dict in dic[@"cars"]) {
 ZKCarModel *Car=[ZKCarModel CarWithDict:dict];
 [Array addObject:Car];
 }
 self.cars=Array;
 }
 return self;
}
+(instancetype)CarGroupWithDic:(NSDictionary *)dic
{
 return [[self alloc] initWithDict:dic];
}
@end

2.4，對(duì)應(yīng)數(shù)據(jù)的模型類(lèi)創(chuàng)建好以后，開(kāi)始創(chuàng)建數(shù)組懶加載

代碼如下：

#import <Foundation/Foundation.h>
@interface ZKCarModel : NSObject
//頭像
@property(nonatomic,copy)NSString * icon;
//名字
@property(nonatomic,copy)NSString *name;
+(instancetype)CarWithDict:(NSDictionary *)dic;
-(instancetype)initWithDict:(NSDictionary *)dic;
@end

#import "ZKCarModel.h"
@implementation ZKCarModel
-(instancetype)initWithDict:(NSDictionary *)dic
{
 if(self=[super init])
 {
 [self setValuesForKeysWithDictionary:dic];
 }
 return self;
}
+(instancetype)CarWithDict:(NSDictionary *)dic
{
 return [[self alloc] initWithDict:dic];
}
@end
#import <Foundation/Foundation.h>
#import "ZKCarModel.h"
@interface ZKCarGroupModel : NSObject
//題目
@property(nonatomic,copy)NSString *title;
@property(nonatomic,strong)NSArray *cars;
+(instancetype)CarGroupWithDic:(NSDictionary *)dic;
-(instancetype)initWithDict:(NSDictionary *)dic;
@end

#import "ZKCarGroupModel.h"
@implementation ZKCarGroupModel
-(instancetype)initWithDict:(NSDictionary *)dic
{
 if(self=[super init])
 {
 self.title=dic[@"title"];
 NSMutableArray *Array=[NSMutableArray array];
 for (NSDictionary *dict in dic[@"cars"]) {
 ZKCarModel *Car=[ZKCarModel CarWithDict:dict];
 [Array addObject:Car];
 }
 self.cars=Array;
 }
 return self;
}
+(instancetype)CarGroupWithDic:(NSDictionary *)dic
{
 return [[self alloc] initWithDict:dic];
}
@end

2.5，數(shù)據(jù)加載完以后，然后就要開(kāi)始寫(xiě)UItable View中相對(duì)應(yīng)的代理方法了

代碼如下：

//設(shè)置分區(qū)
-(NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
{
 return self.carGroups.count;
}
//設(shè)置每個(gè)分區(qū)顯示多少行數(shù)據(jù)
-(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
 ZKCarGroupModel *Model=self.carGroups[section];
 return Model.cars.count;
}
//每行顯示的數(shù)據(jù)
-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
 static NSString *ID=@"A";
 //從緩存中讀取cell
 UITableViewCell *cell=[tableView dequeueReusableCellWithIdentifier:ID];
 //如果緩存中沒(méi)有cell，創(chuàng)建一個(gè)新的cell
 if(cell==nil){
 cell=[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:ID];
 }
 //找到當(dāng)前分區(qū)的索引
 ZKCarGroupModel *GroupModel=self.carGroups[indexPath.section];
 //找到當(dāng)前分區(qū)的行
 ZKCarModel *CarModel=GroupModel.cars[indexPath.row];
 //設(shè)置cell顯示的文字
 cell.textLabel.text=CarModel.name;
 //設(shè)置cell顯示的圖片
 cell.imageView.image=[UIImage imageNamed:CarModel.icon];
 return cell;
}

上面3個(gè)代理方法是UItable View中最常用的3個(gè)方法。寫(xiě)完這3個(gè)方法運(yùn)行xcode就可以看到數(shù)據(jù)了。

但這里還有些小問(wèn)題，這里顯示的所有品牌都是從上往下排的，沒(méi)有一個(gè)分組，這樣我們想找哪個(gè)品牌的汽車(chē)并不太好找，所以，我們要把同一個(gè)數(shù)據(jù)的汽車(chē)品牌加一個(gè)字母表示，這怎么做呢，這就要給UItable View的每個(gè)分區(qū)加一個(gè)頭了，使用titleForHeaderInSection代理方法

代碼如下：

//設(shè)置頭樣式
-(NSString *)tableView:(UITableView *)tableView titleForHeaderInSection:(NSInteger)section
{
 //找到當(dāng)前分區(qū)在數(shù)組中的索引
 ZKCarGroupModel *Model=self.carGroups[section];
 
 //返回當(dāng)前分區(qū)的數(shù)據(jù)中的title
 return Model.title;
}

2.6上面的程序中，在屏幕的最右邊還有一個(gè)索引，點(diǎn)這個(gè)索引就找找到相對(duì)應(yīng)的分區(qū)數(shù)據(jù)，其實(shí)這個(gè)也很簡(jiǎn)單，也是調(diào)用一個(gè)

sectionIndexTitlesForTableView的代理方法，這個(gè)方法返回一個(gè)array的數(shù)組。

代碼如下：

//設(shè)置索引
-(NSArray *)sectionIndexTitlesForTableView:(UITableView *)tableView
{
 return [self.carGroups valueForKeyPath:@"title"];
}

2.7，這個(gè)程序中還做了一個(gè)，當(dāng)你點(diǎn)擊屏幕上每個(gè)汽車(chē)品牌的時(shí)候還會(huì)彈出一個(gè)對(duì)話(huà)框，為什么要做這個(gè)呢，因?yàn)楹芏鄷r(shí)候屏幕上的圖片和文字都是可以點(diǎn)擊的，所以光做一個(gè)靜態(tài)顯示好不是很好，雖然這個(gè)對(duì)話(huà)框好像并沒(méi)有什么用，但這里只是講下這個(gè)方法的使用

代碼如下：

//點(diǎn)擊cell時(shí)變化
-(void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
{
 //創(chuàng)建對(duì)話(huà)框
 UIAlertView *alertView=[[UIAlertView alloc] initWithTitle:@"汽車(chē)" message:@"取消" delegate:self cancelButtonTitle:@"確認(rèn)" otherButtonTitles:@"取消", nil];
 //設(shè)置樣式
 alertView.tag=1;
 alertView.alertViewStyle=UITableViewCellStyleSubtitle;
 //[alertView ];
 
 [alertView show];
}

3.1 一個(gè)UITableView做的汽車(chē)品牌就這樣OK了，雖然這并不是一個(gè)APP但，這里已經(jīng)把UITableView的一些常用代理方法都寫(xiě)到了，當(dāng)然UITableView還有很多代表方法，這里并沒(méi)有講，但會(huì)了這些以后，在以后的使用中我們可以再來(lái)查詢(xún)，重要的是思想。

以上是UITableView 實(shí)現(xiàn)汽車(chē)品牌的全部?jī)?nèi)容，希望對(duì)大家有所幫助。

您可能感興趣的文章: