天天看點

***iOS學習之Table View的簡單使用和DEMO示例(共Plain普通+Grouped分組兩種)

Table View簡單描述:

    在iPhone和其他iOS的很多程式中都會看到Table View的出現,除了一般的表格資料展示之外,設定的屬性資料往往也用到Table View,Table View主要分為以下兩種:

***iOS學習之Table View的簡單使用和DEMO示例(共Plain普通+Grouped分組兩種)

 Plain:這是普通的清單風格

 Grouped :這是分塊風格。

對于UITableView,我們有一些特殊的概念和術語,比如說我們成Table View的一行為Cell,而許多的Cell可以組成Section,每個Section上下又分別有Header和Footer,許多個的Section則組成了整個Table ,當然Table也有Header和Footer,下面看兩種圖就能明白這幾個拗口名詞了:

***iOS學習之Table View的簡單使用和DEMO示例(共Plain普通+Grouped分組兩種)

***iOS學習之Table View的簡單使用和DEMO示例(共Plain普通+Grouped分組兩種)

現在理論知識了解的差不多了。今天先做一個Plain樣式的例子,這樣加強對Table view的熟練使用。

建立一個Single View Application,命名為TableViewDemo,開發環境是:Xcode 4.3,iPhone 5.1模拟器。

2、Table View放上控件

打開ViewController.xib檔案,往ViewController.xib界面上拖拽一個Table View控件到現有的View上,

對齊。

***iOS學習之Table View的簡單使用和DEMO示例(共Plain普通+Grouped分組兩種)

3、連接配接新添加的TableView和ViewController。

選中新添的TableView控件,打開連接配接檢查器(Connection Inspector), 找到delegate和datasource并點中圓圈拉線連接配接到左邊File's Owner圖示上,為什麼要把這兩個連接配接File's Owner上呢?這是因為iOS使用的MVC設計模式,View和ViewController之間的對應關系,需要一個橋梁來進行連接配接的(即,對于一個視圖,他如何知道自己的界面的操作應該由誰來響應),這個橋梁就是File's Owner。

***iOS學習之Table View的簡單使用和DEMO示例(共Plain普通+Grouped分組兩種)

4、打開ViewController.h,添加協定和Property (類似與java裡的實作接口)

#import <UIKit/UIKit.h>  

@interface ViewController : UIViewController<UITableViewDelegate, UITableViewDataSource>  

@property (strong, nonatomic) NSArray *list;  

@end  

5、打開.m檔案,添加:

@synthesize list = _list;  

***iOS學習之Table View的簡單使用和DEMO示例(共Plain普通+Grouped分組兩種)

這是發現有兩個警告,提示未完成的實作,這提示的是UITableViewDelegate, UITableViewDataSource這個兩個頭檔案裡的協定的方法未實作。待會我們去實作它。

6、建立資料

- (void)viewDidLoad  

{  

    [super viewDidLoad];  

    // Do any additional setup after loading the view, typically from a nib.  

    NSArray *array = [[NSArray alloc] initWithObjects:@"美國", @"菲律賓",  

                      @"黃岩島", @"中國", @"泰國", @"越南", @"寮國",  

                      @"日本" , nil];   

    self.list = array;   

}  

- (void)viewDidUnload  

    [super viewDidUnload];  

    // Release any retained subviews of the main view.  

    self.list = nil;  

7、生成row

關鍵的步驟來了,實作tableview添加資料源,傳回TableView的行數,傳回各行cell執行個體。

- (UITableViewCell *)tableView:(UITableView *)tableView   

         cellForRowAtIndexPath:(NSIndexPath *)indexPath {   

    static NSString *TableSampleIdentifier = @"TableSampleIdentifier";   

    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:   

                             TableSampleIdentifier];   

    if (cell == nil) {   

        cell = [[UITableViewCell alloc]   

                initWithStyle:UITableViewCellStyleDefault   

                reuseIdentifier:TableSampleIdentifier];   

    }   

    NSUInteger row = [indexPath row];   

    cell.textLabel.text = [self.list objectAtIndex:row];   

    return cell;   

上面的第二個方法中,

UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier: TableSampleIdentifier];

這個語句根據辨別符TableSampleIdentifier尋找目前可以重用的UITableViewCell。當某行滑出目前可見區域後,我們重用它所對應的UITableViewCell對象,那麼就可以節省記憶體和資源。

這裡UITableViewCellStyleDefault是表示UITableViewCell風格的常數,除此之外,還有其他風格,後面将會用到。

注意參數(NSIndexPath *)indexPath,它将行号row和部分号section合并了,通過[indexPath row];擷取行号。之後給cell設定其文本:

cell.textLabel.text = [self.list objectAtIndex: row];

8、現在一個簡單的TableView就弄好看,運作下看效果

***iOS學習之Table View的簡單使用和DEMO示例(共Plain普通+Grouped分組兩種)

、、

9、添加圖檔。

在項目上add files到項目,送出兩張小圖檔,然後在cell傳回之前添加如下代碼

NSUInteger row = [indexPath row];   

    UIImage *image = [UIImage imageNamed:@"qq"];   

    cell.imageView.image = image;   

    UIImage *highLighedImage = [UIImage imageNamed:@"youdao"];   

    cell.imageView.highlightedImage = highLighedImage;  

效果如下:

***iOS學習之Table View的簡單使用和DEMO示例(共Plain普通+Grouped分組兩種)

10、設定行的風格

表示UITableViewCell風格的常量有:

UITableViewCellStyleDefault

UITableViewCellStyleSubtle

UITableViewCellStyleValue1

UITableViewCellStyleValue2

可以自己修改看看效果。可以添加一個detail

 cell.detailTextLabel.text =@"打打打打";

return cell; 

***iOS學習之Table View的簡單使用和DEMO示例(共Plain普通+Grouped分組兩種)

11、選擇table裡的某一行

在.m檔案@end之前編寫  -(void)table  這時會自動提示可以實作的方法,

***iOS學習之Table View的簡單使用和DEMO示例(共Plain普通+Grouped分組兩種)

我們選擇這個方法

-(void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath

選中是做個提示,提示選中了那個資訊,代碼實作如下:

-(void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath{  

    NSString *rowString = [self.list objectAtIndex:[indexPath row]];  

    UIAlertView * alter = [[UIAlertView alloc] initWithTitle:@"選中的行資訊" message:rowString delegate:self cancelButtonTitle:@"确定" otherButtonTitles:nil, nil];  

    [alter show];  

效果:

***iOS學習之Table View的簡單使用和DEMO示例(共Plain普通+Grouped分組兩種)

以上是Plain風格的TableView

<a href="http://download.csdn.net/detail/totogo2010/4361870">例子代碼:http://download.csdn.net/detail/totogo2010/4361870</a>

<a href="http://blog.csdn.net/totogo2010/article/details/7645693">iOS學習之分段Table View的使用(Grouped樣式表格)</a>

***iOS學習之Table View的簡單使用和DEMO示例(共Plain普通+Grouped分組兩種)

那麼開始吧。

1、建立項目

新的一個名稱為TableViewGrouped的Single View Application項目,打開項目的xib檔案,拖拽TableView控件到xib檔案中,擺正位置。

2、給建立的TableView找到他的歸屬

選中新添的TableView ,Connection Inspector,找到delegate和datasource,從它們右邊的圓圈拉線到Files Owner圖示上,參考上篇的第3步:

***iOS學習之Table View的簡單使用和DEMO示例(共Plain普通+Grouped分組兩種)

3、設定Table View的屬性為Grouped樣式

***iOS學習之Table View的簡單使用和DEMO示例(共Plain普通+Grouped分組兩種)

4、導入plist檔案

從其他檔案夾導入Provineces.plist檔案,這個檔案我會傳到源代碼裡,大家都能友善使用了,包括全國30個省份和城市,還有城市的區也有。

***iOS學習之Table View的簡單使用和DEMO示例(共Plain普通+Grouped分組兩種)
***iOS學習之Table View的簡單使用和DEMO示例(共Plain普通+Grouped分組兩種)

5、添加.h .m的實作代碼。

.h檔案添加一個property

@interface ViewController : UIViewController  

@property (strong, nonatomic) NSArray *provinces;  

第一步從Plist讀取出資料,第二步給Table添加資料。

在viewDidLoad讀取Plist,plist是個array類型的,是以使用Array讀取。

.m檔案的實作。

@implementation ViewController  

@synthesize provinces;  

    NSBundle *bundle = [NSBundle mainBundle];  

    NSString *plistPath = [bundle pathForResource:@"Provineces" ofType:@"plist"];  

    NSMutableArray *array=[[NSMutableArray  alloc] initWithContentsOfFile:plistPath];  

    self.provinces = array;  

實作TableView表格部分,下面這些方法看方法名就能大概明白意思。

 這個方法用來告訴表格有幾個分組

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {  

    return [provinces count];  

這個方法告訴表格第section個分段有多少行

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {  

        NSArray *cities = [[provinces objectAtIndex:section]objectForKey:@"Citys"];  

    return [cities count];  

   這個方法用來告訴某個分組的某一行是什麼資料,傳回一個UITableViewCell

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {  

    NSUInteger section = [indexPath section];   

    NSArray *cities = [[provinces objectAtIndex:section]objectForKey:@"Citys"] ;  

    static NSString *GroupedTableIdentifier = @"cell";   

                             GroupedTableIdentifier];   

                reuseIdentifier:GroupedTableIdentifier];   

    //給Label附上城市名稱  key 為:C_Name  

    cell.textLabel.text = [[cities objectAtIndex:row] objectForKey:@"C_Name"];   

這個方法用來告訴表格第section分組的名稱 

- (NSString *)tableView:(UITableView *)tableView titleForHeaderInSection:(NSInteger)section {  

    NSString *provincName = [[provinces objectAtIndex:section] objectForKey:@"p_Name"];  

    return provincName;   

重點介紹下這個方法:

- (NSArray *)sectionIndexTitlesForTableView:(UITableView *)tableView {  

    //傳回省份的數組  

    NSMutableArray *array = [NSMutableArray arrayWithCapacity:35];  

    for (NSDictionary *dict in provinces) {  

        [array addObject:[dict objectForKey:@"p_Name"]];  

    }  

    return array;  

傳回所有省份名稱的數組 ,通過點選右邊的省份名稱能快速定位到這個省份的城市,也就是快速定位到這個section。

OK,運作。效果如下:

***iOS學習之Table View的簡單使用和DEMO示例(共Plain普通+Grouped分組兩種)

試試改成plain樣式的分段TableView看看:

***iOS學習之Table View的簡單使用和DEMO示例(共Plain普通+Grouped分組兩種)

以上例子的全部

https://github.com/schelling/YcDemo/tree/master/TableViewGrouped

如何聯系我:【萬裡虎】www.bravetiger.cn

【QQ】3396726884 (咨詢問題100元起,幫助解決問題500元起)

【部落格】http://www.cnblogs.com/kenshinobiy/