UITableView 系列三 ：分类显示和改变外观 （实例）

最新推荐文章于 2023-06-06 19:39:55 发布
最新推荐文章于 2023-06-06 19:39:55 发布
阅读量352 收藏
点赞数
分类专栏： IOS/Objective-C

 

1. 分类显示 sections

 

 

在之前的文章UITableView 的资料设定方式一文中，已经示范如何在 UITableView 中设定所要显示的资料，以及分别显示这些资料的细节，但是如果资料比数太多时该怎么办？你可以参考本篇文章的做法，将资料做分类的处理，并且建立快速索引，让使用者能以最短的时间找到所需要的资料。

资料分类的概念
动态表格的内容多半是存放在阵列当中方便资料的存取，如果你有好几类不同比的资料，你可以将这些资料分别存放在不同的阵列里，最后再使用一个 NSMutableArray 将这些存放不同资料的阵列包起来，之后我们只要针对这个 NSMutableArray 做操作即可。（以下是沿用之前文章的程式码做修改）

C代码 复制代码  收藏代码
  1. //资料初始化   
  2. roleArray = [[NSArray alloc] initWithObjects:@"野蛮人", @"法师", @"弓箭手", @"盗贼", @"德鲁伊", @"骑士", nil];   
  3. monsterArray = [[NSArray alloc] initWithObjects:@"哥布林战士", @"哥布林护卫", @"哥布林军官", @"哥布林王", @"黑暗德鲁伊", @"狼人", @"傀儡护卫", @"傀儡领主", @"蜘蛛", @"蝙蝠", nil];   
  4.   
  5. heroicaArray = [[NSMutableArray alloc] initWithObjects:roleArray, monsterArray, nil];  

 
UITableView Sections 的设定
如果要将资料作分类显示，可以使用以下的内建方法函式，并回传一个 NSInteger，告诉 UITableViewController 你想将资料分成几类。

C代码 复制代码  收藏代码
  1. - (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {   
  2. return [heroicaArray count];   
  3. }  

 
程式码到此就已经算是完成资料的分类，后续的动作就是要显示这些分类好的资料，大致的程式码都和之前的文章差不多，只是操作的物件不同，可以透过方法函式所得到的 section 参数，决定于目前是要处理那一类的资料。

C代码 复制代码  收藏代码
  1. //设定每一类的资料笔数   
  2. - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {   
  3. return [[heroicaArray objectAtIndex:section] count];   
  4. }  
C代码 复制代码  收藏代码
  1. //设定每一类的资料内容   
  2. - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {   
  3.   
  4. //制作可重復利用的表格栏位Cell   
  5. static NSString *CellIdentifier = @"CellIdentifier";   
  6.   
  7. UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];   
  8. if (cell == nil) {   
  9. cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier];   
  10. }   
  11.   
  12. //设定栏位的内容与类型   
  13. cell.textLabel.text = [[heroicaArray objectAtIndex:indexPath.section] objectAtIndex:indexPath.row];   
  14. cell.accessoryType = UITableViewCellAccessoryDetailDisclosureButton;   
  15. return cell;   
  16. }  

  
分类标题与快速索引
分类的标题可以家在分类的开头或是结尾，同样是透过方法函式所得到的 section 参数，来确认目前所在的分类。

C代码 复制代码  收藏代码
  1. //设定分类开头标题   
  2. - (NSString *)tableView:(UITableView *)tableView titleForHeaderInSection:(NSInteger)section {   
  3. switch (section) {   
  4. case 0:   
  5. return @"英雄角色";   
  6. break;   
  7.   
  8. case 1:   
  9. return @"怪物角色";   
  10. break;   
  11.   
  12. default:   
  13. return @"";   
  14. break;   
  15. }   
  16. }   
  17.   
  18. //设定分类结尾标题   
  19. - (NSString *)tableView:(UITableView *)tableView titleForFooterInSection:(NSInteger)section {   
  20. }  

 

另外，建立类似电话簿的快速索引，则可以透过下列内建方法函式，回传一个快速索引的阵列，阵列内容的顺序，就是你分类的顺序。

C代码 复制代码  收藏代码
  1. //建立快速索引   
  2. - (NSArray *)sectionIndexTitlesForTableView:(UITableView *)tableView {   
  3. NSArray *index = [[NSArray alloc] initWithObjects:@"英雄", @"怪物", @"武器", @"道具", @"战利品", @"其他", nil];   
  4. return index;   
  5. }  

 
比较好的做法
在上述分类标题与快速索引的部分，使用 switch 与静态的数值来做设定，其实这不是很恰当的做法，尤其当你的资料笔数非常庞大的时候，比较好的建议是将这些资讯同样放入阵列里面，且动态存取它们，来完成设定标题与建立索引阵列。

另外要注意的是，虽然是好几类不同的资料，但是他们最好还是能拥有相同的属性，即使该属性为 nil。例如 A 类型的资料有颜色属性，但是 B 类型没有或是不需要，但是仍需为 B 类型的资料保留颜色属性，即使它们的值都是 nil，这样的观念有点类似于多型 Polymorphism，这样不但可以减少程式码的撰写，对于表格内的资料也能保持一致性。

 

 

2. 改变外观

 

 

UITableView 所制作出来的应用程式在使用上多半大同小异，它们之间最大的不同还是在表格的呈现方面，如何设计出具有独特外观的 UITableView，才是令人头痛的问题，通常是选择制作一个全新的 UITableViewCell 来使用，但是你也可以採用比较简单的做法，使用内建的方法函式来做些微的改变，方式如下。

Table View
整个 Table View 能改变的东西实在不多，多半都是更改背景，但是当你更改背景颜色之后就会发现 Cell 与 Cell 之间会多出一条白线 Separator，你可以参考下列程式码改变它的颜色或是移除不显示。

C代码 复制代码  收藏代码
  1. //改变Separator颜色   
  2. [self.tableView setSeparatorColor:[UIColor orangeColor]];   
  3.   
  4. //移除Separator   
  5. [self.tableView setSeparatorStyle:UITableViewCellSeparatorStyleNone];  

 
Table View Cell
Table View Cell 本身就提供一些不同的类型可供选择，如下图，你可以藉由选择不同的类型来改变文字在 Cell 中编排的方式。


 
Attributes 中的 Style 属性

另外如果想要在 Cell 中增加其它元件时，可以使用 addSubview 的方法函式来添加新的元件，例如在下列程式码中，除了设定左右的图像之外，还自行新增了一个 UILabel 放在其中。

C代码 复制代码  收藏代码
  1. //设定文字背景为透明   
  2. [cell.textLabel setBackgroundColor:[UIColor clearColor]];   
  3.   
  4. //设定Cell中左边的图片   
  5. cell.imageView.image = [UIImage imageNamed:[[heroicaArray objectAtIndex:indexPath.section] objectAtIndex:indexPath.row + 1]];   
  6.   
  7. //设定Cell中右边的连结图片   
  8. cell.accessoryView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"dice.png"]];   
  9.   
  10. //增加UILabel   
  11. UILabel *subtitle = [[UILabel alloc] initWithFrame:CGRectMake(95.0, 45.0, 200.0, 20.0)];   
  12. [subtitle setTextColor:[UIColor colorWithHue:1.0 saturation:1.0 brightness:1.0 alpha:0.5]];   
  13. [subtitle setBackgroundColor:[UIColor clearColor]];   
  14. [subtitle setFont:[UIFont systemFontOfSize:12.0]];   
  15. [subtitle setText:@"还可以放注解唷"];   
  16.   
  17. [cell addSubview:subtitle];    
  18.   
  19. //设定背景   
  20. [cell setBackgroundView:[[UIImageView alloc] initWithImage:[UIImage imageNamed:@"CellBG.png"]]];  

 
Section
透过下列内建的方法函式，可以自行更改 Section 的标题内容。

C代码 复制代码  收藏代码
  1. //设定开头的分类样式   
  2. -(UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section {   
  3. UIView *sectionView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, tableView.bounds.size.width, 30)];   
  4. [sectionView setBackgroundColor:[UIColor brownColor]];   
  5.   
  6. //增加UILabel   
  7. UILabel *text = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 320, 18)];   
  8. [text setTextColor:[UIColor blackColor]];   
  9. [text setBackgroundColor:[UIColor clearColor]];   
  10. [text setText:[[heroicaArray objectAtIndex:section] objectAtIndex:0]];   
  11. [text setFont:[UIFont boldSystemFontOfSize:16.0]];   
  12.   
  13. [sectionView addSubview:text];   
  14. return sectionView;   
  15. }   
  16.   
  17. //设定结尾的分类样式   
  18. -(UIView *)tableView:(UITableView *)tableView viewForFooterInSection:(NSInteger)section {   
  19. }  

 
Section Index
表格分类的快速索引虽然没有内建的方法函式可供设定外观使用，但是你仍然可以透过自制的索引介面并配合下列程式码，将表格切换到所想要的分类上。

C代码 复制代码  收藏代码
  1. CGRect sectionRect = [self.tableView rectForSection:1];   
  2. [self.tableView scrollRectToVisible:sectionRect animated:YES];  

 
备註
如果表格个对应的资料结构有任何问题，可以在「索引式搜索」中的「元件设定」分类里找到所有有关 UITableView 的文章，查阅其他有关表格的设定方式。

 

 

来源：

http://furnacedigital.blogspot.com/2012/02/uitableview-sections.html

http://furnacedigital.blogspot.com/2012/02/uitableview_17.html

wit521
关注
专栏目录
Swift4.1定制UITableView索引外观之二:索引放大器
享受开发，颠倒银河
08-14 676
何曾几时，在一些热门的App的数据索引界面里，我们常常能够看到用户在改变索引时，屏幕中心会有索引的放大显示，非常人性化。 在这一篇博文里，本猫就来尝试用尽可能简单的代码来完成这一功能。 一.索引变化通知 首先我们必须在索引发生改变时得到通知，否则一切都无从谈起。幸运的是CocoaTouch为我们提供了这一接口: func tableView(_ tableView: UITable...
自定义UITableView，实现cell的三级分组展开收起
reborn_wood的博客
05-31 6476
自定义UITableView，实现cell的三级分组展开收起
UITableView详细教程
weixin_30709809的博客
08-02 266
UITableView是一个很强大的控件，在我们iphone开发过程中会经常用到。 下面我做以下简单介绍 UITableView有一个基本元素的索引NSIndexPath，你可以通过索引NSIndexPath找到UITableView下面的子元素只要这个方法 - (void)tableView:(UITableView *)tableView didSelectRowAtIndex...
UITableView 基本使用方法总结
kangli的专栏
10-02 560
http://blog.csdn.net/tangaowen/article/details/6438362 UITableView 基本使用方法总结 分类： iphone/object-c 2011-05-22 21:18 51841人阅读 评论(4) 收藏 举报 uiviewheaderencodingimagetable聊天
UI学习——UITableView
最新发布
m0_73974920的博客
06-06 3009
以上就是本篇文章的全部内容。
iOS UITableView 与 UITableViewController实例详解
01-20
此外，为了动态加载和更新数据，我们通常会使用NSMutableArray等可变数组来存储模型数据，并在数据改变时调用`reloadData`方法通知UITableView更新视图。自定义单元格（UITableViewCell）时，可以通过重写`...
UITableView Demo实例
04-27
1. 创建UITableView实例：在Storyboard或代码中添加UITableView，并设置其约束以填充父视图。若在代码中创建，可以使用`UITableView(style: .plain, frame: CGRect)`。 2. 设置DataSource和Delegate：在...
设置UITableView Section的背景颜色和字体颜色
08-12
在某些情况下，开发者可能希望自定义UITableView的外观，比如改变Section的背景颜色和字体颜色，以满足特定的设计需求。以下是如何实现这一功能的详细步骤。 首先，我们来了解UITableView的Section。Section是...
导航控制器+UITableView
04-08
它由一系列行（UITableViewCell）组成，可以根据需要加载和复用单元格，以提高性能。开发者需要自定义单元格的样式和内容，同时实现数据源协议（UITableViewDataSource）和委托协议（UITableViewDelegate）来控制...
UITableView实现分组, 并且点击每个分组后展开
bailang3277的博客
03-05 150
效果图: 简单说下实现思路: 数据传过来之后, 先创建好对应个数的分组头部View, 也就是要在 - (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section 在这个方法返回的视图...我这里用的UIButton, 然后监听UIButton的点击, 然后重新刷新...
ios学习笔记之-UITableView的分组显示
左手倒影，右手年华的博客
03-02 775
UITableView基本使用方式。
IOS学习：UITableView使用详解3 分组表的简单使用
weixin_30378623的博客
01-14 105
IOS学习：UITableView使用详解3 分组表的简单使用 使用分组表和使用普通表的方法差不多，他们的不同点有以下几点： 1.分组表的属性必须设置为Grouped的，而不是plain 2.分组表的数据源方法当中numberOfSectionsInTableView:返回分组的个数。 3.可以设置tableView:titleForHeaderInSection:返回每个分组的名称。 ...
iOS入门-31UITableView基础
gongxiaoou的博客
04-27 197
概述 UITableView： 用来实现列表的系统View（类似于Android中的ListView，Flutter中的ListView） 由于是系统自带View那么功能肯定是有限的，但是从使用的过程中可以了解实现原理和大概的代码风格 自带功能有哪些（重要的是那些要实现的代理协议） 基础篇为介绍 cell高度 每个section的headerview和footerview的高度 cell的创...
OC中布局控件之UITableView基本使用方法
一枚技术宅的博客
10-16 2115
一、UITableView简介 1.在众多移动应用中，能看到各式各样的表格数据                                       1).在iOS中，要实现表格数据展示，最常用的做法就是使用UITableView     2).UITableView继承自UIScrollView，因此支持垂直滚动，而且性能极佳     3).UITableView需要一个数据源(...
UITableView的分组示例及常用方法
GuodongSun0的专栏
05-25 458
@interface ViewController ()UITableViewDelegate,UITableViewDataSource> /**  UITableView*/ @property(nonatomic,weak) UITableView * tableView; /**  分组头数据*/ @property(nonatomic
动态生成UI 数据列表项(处理数据上报)2 分类显示
AndLi
10-19 163
 分类显示 
转 UITableView 基本使用方法总结
07-18 533
UITableView  基本使用方法      1.   首先，Controller需要实现两个  delegate ，分别是  UITableViewDelegate 和  UITableViewDataSource    2.然后 UITableView对象的 delega
UIXX-UITableView用法及进阶
千古独步的博客
08-16 616
基本 API 解释以及用法 数据源 UITableViewDataSource代理 UITableViewDelegateUITableViewCell一些常用操作 UITableView 进阶 性能优化优雅的使用 UITableView 之链式编程 UITableView 相关的开源库 MJRefresh 上拉下拉刷新组件UITableView+FDTemplateLayo
iOS UITableView内存优化：异步图片加载与本地缓存解决方案
iOS开发人员面临着如何在保证应用流畅运行的同时，避免因频繁下载和显示大量图片导致的内存泄漏挑战。 首先，文章详细介绍了iOS系统的内存管理和缓存机制。在移动操作系统中，内存管理涉及到对象的创建、使用和释放...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值