iOS学习之分段Table View的使用(Grouped样式表格)

旧城等待， 2022-08-07 05:54 191阅读 0赞

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

![1339168526_9126.png][]

那么开始吧。

**1、新建项目**

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

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

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

![1339172564_4457.png][]

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

![1339171108_1061.png][]

**4、导入plist文件**

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

![1339169458_6485.png][] ![1339169541_7109.png][]

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

**.h文件添加一个property**

**\[cpp\]** [view plain][] [copy][view plain]

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 plain][] [copy][view plain]

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 plain][] [copy][view plain]

1.  \- (NSInteger)numberOfSectionsInTableView:(UITableView \*)tableView \{ 
2.  **return** \[provinces count\]; 
3.  \}

*  这个方法告诉表格第section个分段有多少行

**\[cpp\]** [view plain][] [copy][view plain]

1.  \- (NSInteger)tableView:(UITableView \*)tableView numberOfRowsInSection:(NSInteger)section \{ 
2.   NSArray \*cities = \[\[provinces objectAtIndex:section\]objectForKey:@"Citys"\]; 
3.  **return** \[cities count\]; 
4.  \}

*  这个方法用来告诉某个分组的某一行是什么数据，返回一个UITableViewCell

**\[cpp\]** [view plain][] [copy][view plain]

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 plain][] [copy][view plain]

1.  \- (NSString \*)tableView:(UITableView \*)tableView titleForHeaderInSection:(NSInteger)section \{ 
2.   NSString \*provincName = \[\[provinces objectAtIndex:section\] objectForKey:@"p\_Name"\]; 
3.  **return** provincName; 
4.  \}

*  重点介绍下这个方法：

**\[cpp\]** [view plain][] [copy][view plain]

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,运行。效果如下：

![1339172748_6569.png][]

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

![1339172790_1431.png][]

以上例子的全部

例子的代码：[http://download.csdn.net/detail/totogo2010/4361876][http_download.csdn.net_detail_totogo2010_4361876]

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

著作权声明：本文由[http://blog.csdn.net/totogo2010/][http_blog.csdn.net_totogo2010]原创，欢迎转载分享。请尊重作者劳动，转载时保留该声明和作者博客链接，谢谢 !

[iOS_ plist]: http://blog.csdn.net/totogo2010/article/details/7634185
[1339168526_9126.png]: https://img-my.csdn.net/uploads/201206/08/1339168526_9126.png
[7645693]: /images/20220805/ba840308fedb470a92f822245aa57f89.png
[1339172564_4457.png]: https://img-my.csdn.net/uploads/201206/09/1339172564_4457.png
[1339171108_1061.png]: https://img-my.csdn.net/uploads/201206/08/1339171108_1061.png
[1339169458_6485.png]: https://img-my.csdn.net/uploads/201206/08/1339169458_6485.png
[1339169541_7109.png]: https://img-my.csdn.net/uploads/201206/08/1339169541_7109.png
[view plain]: /images/20220805/ba840308fedb470a92f822245aa57f89.png#
[1339172748_6569.png]: https://img-my.csdn.net/uploads/201206/09/1339172748_6569.png
[1339172790_1431.png]: https://img-my.csdn.net/uploads/201206/09/1339172790_1431.png
[http_download.csdn.net_detail_totogo2010_4361876]: http://download.csdn.net/detail/totogo2010/4361876
[http_blog.csdn.net_totogo2010]: http://blog.csdn.net/totogo2010/

发表评论取消回复

表情：

评论列表（有 0 条评论，191人围观）

还没有评论，来说两句吧...

相关阅读

相关 VUE element-ui之table表格内容样式（颜色）修改

要求将表格中的负数显示为红色实现步骤：定义样式方法 <el-table id="tabs" v-loading="loading" :data="tab

偏执的太偏执、/ 2022年10月07日 09:00/ 0 赞/ 364 阅读

相关响应式Table表格样式代码

[下载地址][Link 1]外观样式不错的表格代码，使用CSS3代码实现的响应式Table表格，在不同分辨率下显示效果都不错。 ![1631278103.png][] dd

系统管理员/ 2022年09月11日 02:29/ 0 赞/ 212 阅读

相关 iOS学习之分段Table View的使用(Grouped样式表格)

简介：上篇做了Table View的一些介绍，还做了一个TableView 的Plain样式的例子，这篇我们学习Grouped样式表的例子，还有用到前面读取Plist的知识（

旧城等待，/ 2022年08月07日 05:54/ 0 赞/ 192 阅读

相关 iOS学习之Table View的简单使用

Table View简单描述：在iPhone和其他iOS的很多程序中都会看到Table View的出现，除了一般的表格资料展示之外，设置的属性资料往往也用到Table V

分手后的思念是犯贱/ 2022年08月07日 05:54/ 0 赞/ 215 阅读

相关 table表格清除默认样式

table\{width:100%;text-align:center;border-collapse:collapse;border-spacing:1;border-spa

谁践踏了优雅/ 2022年07月10日 14:57/ 0 赞/ 517 阅读

相关 bootstrap-table 加表格线样式换成table-bordered

<div class="col-sm-12 select-info table-bordered"> <table id="bootstr

待我称王封你为后i/ 2022年05月16日 02:05/ 0 赞/ 348 阅读

相关 table表格去掉默认样式的方法！

今天在写代码的时候发现表格具有一些默认的样式有时候并不需要，它会影响美观!可以通过以下方式去掉它。 cellpadding -- 代表单元格外面距离,用于隔单元

梦里梦外;/ 2022年02月19日 14:43/ 0 赞/ 539 阅读

相关好看html表格table样式

<style type="text/css"> table{ border-collapse:collapse; tabl

悠悠/ 2021年11月09日 23:34/ 0 赞/ 3387 阅读

相关 Vue - element-ui中 table表格样式的常见问题

一. table表格 hover 修改该行数据的背景颜色解决方案：增加样式级别 .el-table--enable-row-hover .el-table_

客官°小女子只卖身不卖艺/ 2021年07月25日 21:48/ 0 赞/ 913 阅读

相关表格 table(会使用)

第01阶段.前端基础.表格 HTML 第二天目标能够利用表格、列表和表单完成注册页面的综合案例能出说表格用来做什么的能说出列表用来做什么的能说出表单用来做什么...

灰太狼/ 2021年02月27日 16:07/ 0 赞/ 652 阅读