zoukankan      html  css  js  c++  java
  • ***iOS学习之Table View的简单使用和DEMO示例(共Plain普通+Grouped分组两种)

    Table View简单描述:

        在iPhone和其他iOS的很多程序中都会看到Table View的出现,除了一般的表格资料展示之外,设置的属性资料往往也用到Table View,Table View主要分为以下两种:

    •  Plain:这是普通的列表风格
    •  Grouped :这是分块风格。
     
    对于UITableView,我們有一些特殊的概念和术语,比如说我们成Table View的一行为Cell,而许多的Cell可以组成Section,每个Section上下又分別有Header和Footer,许多个的Section则组成了整个Table ,当然Table也有Header和Footer,下面看两种图就能明白这几个拗口名词了:
     
     
    现在理论知识了解的差不多了。今天先做一个Plain样式的例子,这样加强对Table view的熟练使用。
     

    1、新建项目

    新建一个Single View Application,命名为TableViewDemo,开发环境是:Xcode 4.3,iPhone 5.1模拟器。
    2、Table View放上控件
    打开ViewController.xib文件,往ViewController.xib界面上拖拽一个Table View控件到现有的View上,
    对齐。
    3、连接新添加的TableView和ViewController。
    选中新添的TableView控件,打开连接检查器(Connection Inspector), 找到delegate和datasource并点中圆圈拉线连接到左边File's Owner图标上,为什么要把这两个连接File's Owner上呢?这是因为iOS使用的MVC设计模式,View和ViewController之间的对应关系,需要一个桥梁来进行连接的(即,对于一个视图,他如何知道自己的界面的操作应该由谁来响应),这个桥梁就是File's Owner。
    4、打开ViewController.h,添加协议和Property (类似与java里的实现接口)
    [cpp] view plaincopy
     
    1. #import <UIKit/UIKit.h>  
    2.   
    3. @interface ViewController : UIViewController<UITableViewDelegate, UITableViewDataSource>  
    4. @property (strong, nonatomic) NSArray *list;  
    5. @end  

    5、打开.m文件,添加:
    [cpp] view plaincopy
     
    1. @synthesize list = _list;  

    这是发现有两个警告,提示未完成的实现,这提示的是UITableViewDelegate, UITableViewDataSource这个两个头文件里的协议的方法未实现。待会我们去实现它。
    6、建立数据
    [cpp] view plaincopy
     
    1. - (void)viewDidLoad  
    2. {  
    3.     [super viewDidLoad];  
    4.     // Do any additional setup after loading the view, typically from a nib.  
    5.     NSArray *array = [[NSArray alloc] initWithObjects:@"美国", @"菲律宾",  
    6.                       @"黄岩岛", @"中国", @"泰国", @"越南", @"老挝",  
    7.                       @"日本" , nil];   
    8.     self.list = array;   
    9. }  
    10.   
    11. - (void)viewDidUnload  
    12. {  
    13.     [super viewDidUnload];  
    14.     // Release any retained subviews of the main view.  
    15.     self.list = nil;  
    16.       
    17. }  

    7、生成row
    关键的步骤来了,实现tableview添加数据源,返回TableView的行数,返回各行cell实例。
    [cpp] view plaincopy
     
    1. - (UITableViewCell *)tableView:(UITableView *)tableView   
    2.          cellForRowAtIndexPath:(NSIndexPath *)indexPath {   
    3.       
    4.     static NSString *TableSampleIdentifier = @"TableSampleIdentifier";   
    5.       
    6.     UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:   
    7.                              TableSampleIdentifier];   
    8.     if (cell == nil) {   
    9.         cell = [[UITableViewCell alloc]   
    10.                 initWithStyle:UITableViewCellStyleDefault   
    11.                 reuseIdentifier:TableSampleIdentifier];   
    12.     }   
    13.       
    14.     NSUInteger row = [indexPath row];   
    15.     cell.textLabel.text = [self.list objectAtIndex:row];   
    16.     return cell;   
    17. }  
    上面的第二个方法中,
    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就弄好看,运行下看效果
    、、
     
    9、添加图片。
    在项目上add files到项目,提交两张小图片,然后在cell返回之前添加如下代码
    [cpp] view plaincopy
     
    1. NSUInteger row = [indexPath row];   
    2.     cell.textLabel.text = [self.list objectAtIndex:row];   
    3.     UIImage *image = [UIImage imageNamed:@"qq"];   
    4.     cell.imageView.image = image;   
    5.     UIImage *highLighedImage = [UIImage imageNamed:@"youdao"];   
    6.     cell.imageView.highlightedImage = highLighedImage;  
    7.     return cell;   

    效果如下:
     
     
    10、设置行的风格
    表示UITableViewCell风格的常量有:

    UITableViewCellStyleDefault
    UITableViewCellStyleSubtle
    UITableViewCellStyleValue1
    UITableViewCellStyleValue2
    可以自己修改看看效果。可以添加一个detail

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

    return cell; 

     
     
    11、选择table里的某一行
     
    在.m文件@end之前编写  -(void)table  这时会自动提示可以实现的方法,
     
    我们选择这个方法

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

    选中是做个提示,提示选中了那个信息,代码实现如下:

     

    [cpp] view plaincopy
     
    1. -(void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath{  
    2.     NSString *rowString = [self.list objectAtIndex:[indexPath row]];  
    3.     UIAlertView * alter = [[UIAlertView alloc] initWithTitle:@"选中的行信息" message:rowString delegate:self cancelButtonTitle:@"确定" otherButtonTitles:nil, nil];  
    4.     [alter show];  
    5. }  

    效果:

     

     
    以上是Plain风格的TableView
     
     
     

     

    简介:上篇做了Table View的一些介绍 ,还做了一个TableView 的Plain样式的例子,这篇我们学习Grouped样式表的例子,还有用到前面读取Plist的知识(见iOS学习之 plist文件的读写),把Plist文件中的数据读取出来,放到Table view里展示出来。这里把全国30多个省份的城市,都列出来了,plist文件里还有城市的行政区,不过这里只列出省份和城市就ok了。效果图如下:

    那么开始吧。

    1、新建项目

    新的一个名称为TableViewGrouped的Single View Application项目,打开项目的xib文件,拖拽TableView控件到xib文件中,摆正位置。

    2、给新建的TableView找到他的归属

    选中新添的TableView ,Connection Inspector,找到delegate和datasource,从它们右边的圆圈拉线到Files Owner图标上,参考上篇的第3步:

    3、设置Table View的属性为Grouped样式

     

    4、导入plist文件

    从其他文件夹导入Provineces.plist文件,这个文件我会传到源代码里,大家都能方便使用了,包括全国30个省份和城市,还有城市的区也有。

     

    5、添加.h .m的实现代码。

    .h文件添加一个property

    [cpp] view plaincopy
     
    1. #import <UIKit/UIKit.h>  
    2.   
    3. @interface ViewController : UIViewController  
    4. @property (strong, nonatomic) NSArray *provinces;  
    5. @end  


    第一步从Plist读取出数据,第二步给Table添加数据。

    在viewDidLoad读取Plist,plist是个array类型的,所以使用Array读取。

    .m文件的实现。

    [cpp] view plaincopy
     
    1. @implementation ViewController  
    2. @synthesize provinces;  
    3.   
    4. - (void)viewDidLoad  
    5. {  
    6.     [super viewDidLoad];  
    7.     // Do any additional setup after loading the view, typically from a nib.  
    8.     NSBundle *bundle = [NSBundle mainBundle];  
    9.     NSString *plistPath = [bundle pathForResource:@"Provineces" ofType:@"plist"];  
    10.     NSMutableArray *array=[[NSMutableArray  alloc] initWithContentsOfFile:plistPath];  
    11.     self.provinces = array;  
    12.   
    13. }  
     

    实现TableView表格部分,下面这些方法看方法名就能大概明白意思。

    •  这个方法用来告诉表格有几个分组
    [cpp] view plaincopy
     
    1. - (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {  
    2.     return [provinces count];  
    3. }  
    • 这个方法告诉表格第section个分段有多少行
    [cpp] view plaincopy
     
    1. - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {  
    2.         NSArray *cities = [[provinces objectAtIndex:section]objectForKey:@"Citys"];  
    3.     return [cities count];  
    4. }  

     

    •    这个方法用来告诉某个分组的某一行是什么数据,返回一个UITableViewCell
    [cpp] view plaincopy
     
    1. - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {  
    2.     NSUInteger section = [indexPath section];   
    3.     NSUInteger row = [indexPath row];   
    4.       
    5.       
    6.     NSArray *cities = [[provinces objectAtIndex:section]objectForKey:@"Citys"] ;  
    7.       
    8.       
    9.     static NSString *GroupedTableIdentifier = @"cell";   
    10.     UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:   
    11.                              GroupedTableIdentifier];   
    12.     if (cell == nil) {   
    13.         cell = [[UITableViewCell alloc]   
    14.                 initWithStyle:UITableViewCellStyleDefault   
    15.                 reuseIdentifier:GroupedTableIdentifier];   
    16.     }   
    17.       
    18.     //给Label附上城市名称  key 为:C_Name  
    19.     cell.textLabel.text = [[cities objectAtIndex:row] objectForKey:@"C_Name"];   
    20.     return cell;   
    21. }  

     

    • 这个方法用来告诉表格第section分组的名称 
    [cpp] view plaincopy
     
    1. - (NSString *)tableView:(UITableView *)tableView titleForHeaderInSection:(NSInteger)section {  
    2.     NSString *provincName = [[provinces objectAtIndex:section] objectForKey:@"p_Name"];  
    3.     return provincName;   
    4. }  

    • 重点介绍下这个方法:
    [cpp] view plaincopy
     
    1. - (NSArray *)sectionIndexTitlesForTableView:(UITableView *)tableView {  
    2.     //返回省份的数组  
    3.     NSMutableArray *array = [NSMutableArray arrayWithCapacity:35];  
    4.     for (NSDictionary *dict in provinces) {  
    5.         [array addObject:[dict objectForKey:@"p_Name"]];  
    6.     }  
    7.     return array;  
    8. }  
    返回所有省份名称的数组 ,通过点击右边的省份名称能快速定位到这个省份的城市,也就是快速定位到这个section。

    OK,运行。效果如下:

    试试改成plain样式的分段TableView看看:

    以上例子的全部

    例子的代码:http://download.csdn.net/detail/totogo2010/4361876

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

  • 相关阅读:
    Codeforces Round #200 (Div. 2) E. Read Time(二分)
    Codeforces Round #160 (Div. 2) D. Maxim and Restaurant(DP)
    TC SRM 593 DIV1 250
    TC SRM 593 DIV2 1000
    HDU 2825 Wireless Password(AC自动机+DP)
    Codeforces Round #203 (Div. 2)
    TC SRM 591 DIV2 1000
    HDU 4758 Walk Through Squares(AC自动机+DP)
    CF 346B. Lucky Common Subsequence(DP+KMP)
    HDU 4753 Fishhead’s Little Game(DFS)
  • 原文地址:https://www.cnblogs.com/kenshinobiy/p/4960358.html
Copyright © 2011-2022 走看看