iOS UITableView索引列开发详解

转载 2015年07月08日 09:55:30

做苹果开发的朋友在地区列表可能会遇到在页面的右侧有一列类似与导航的索引列,这次有机会遇到了,细细研究了一下,原来没有想象中的困难,只需要简单的几步就能做出自己的索引列。本来想和搜索条在一块讲解,后来考虑了一下,这个东西和搜索条功能虽有相似之处,却并非需要一起使用,所以就单独摘出来,独立介绍吧!



索引列看着就很高大上,实际做出来的效果也挺不错的。这个既不需要引入第三方的类库,还不需要单独的委托,它是uitableview列表控件的一个功能的延伸,将用户的体验做到极致,这也就是苹果细致、人性化的地方。下面开始关于索引列的讲解。

第一步:添加列表委托UITableViewDataSource, UITableViewDelegate

第二步:列表控件的添加

self.myTableView = 
[[[UITableView alloc] initWithFrame:CGRectMake(0, 0, 320, 
UI_View_Hieght+64) style:UITableViewStylePlain]autorelease];
    [myTableView setBackgroundColor:BB_Back_Color_Here_Bar];
    [myTableView setBackgroundView:nil];
    myTableView.separatorStyle = UITableViewCellSeparatorStyleSingleLine;
    myTableView.dataSource = self;
    myTableView.delegate = self;
    myTableView.allowsSelection=YES;
    //[myTableView setScrollEnabled:NO];
    myTableView.showsHorizontalScrollIndicator = NO;
    myTableView.showsVerticalScrollIndicator = NO;
    //[XtomFunction addbordertoView:myTableView radius:8.0f width:0.0f color:BB_White_Color];
    //设置索引列文本的颜色
    myTableView.sectionIndexColor = BB_Yanzheng_Color;
    //myTableView.sectionIndexBackgroundColor=BB_Red_Color;
    //myTableView.sectionIndexTrackingBackgroundColor=BB_White_Color;
     
    [self.view addSubview:myTableView];
这里有个需要注意的地方,也是我花费了一段时间才总结出来的经验,右侧索引列的文本颜色是可以自定义改变的 myTableView.sectionIndexColor = BB_Yanzheng_Color。只需要设置这个属性即可,当初花费了我不少精力,差点自定义去设置,偶然间发现原来苹果已经自定义好了这个属性,所以以后还是得从源头上解决问题。

第三步:索引列数据的获取

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
for(char c ='A';c<='Z';c++)
  
    {
  
        //当前字母
  
        NSString *zimu=[NSString stringWithFormat:@"%c",c];
  
        if (![zimu 
isEqualToString:@"I"]&&![zimu 
isEqualToString:@"O"]&&![zimu 
isEqualToString:@"U"]&&![zimu isEqualToString:@"V"])
  
        {
  
            [suoyinCityList addObject:[NSString stringWithFormat:@"%c",c]];
  
        }
  
 }

第四步:相关委托的使用

-(NSArray *)sectionIndexTitlesForTableView:(UITableView *)tableView
  
{
  
     
  
    if (tableView == self.searchDisplayController.searchResultsTableView)
  
    {
  
        return nil;
  
    }
  
  
  
    return suoyinCityList;
  
}
  
//索引列点击事件
  
-(NSInteger)tableView:(UITableView *)tableView sectionForSectionIndexTitle:(NSString *)title atIndex:(NSInteger)index
  
{
  
 NSLog(@"===%@  ===%d",title,index);
  
 //点击索引,列表跳转到对应索引的行
  
 [tableView 
scrollToRowAtIndexPath:[NSIndexPath indexPathForRow:0 inSection:index+4]
 atScrollPosition:UITableViewScrollPositionTop animated:YES];
  
     
  
 //弹出首字母提示
  
 //[self showLetter:title ];
  
 return index+4;
  
}
这里注释的已经很详细,基本不需要我多解释,唯一需要注意的地方是如果本页面里面有多个列表的话需要在不需要的列表中隐藏索引列,否则可能会出现奇怪的问题,主要是获取不到数据,因为索引列是和uitableview的配合使用的,这个注意一下就好。

- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section
{
    if (tableView == self.searchDisplayController.searchResultsTableView)
    {
        return nil;
    }
    UIView *headView = [[[UIView alloc]init]autorelease];
    headView.backgroundColor = [UIColor clearColor];
    if (section!=0)
    {
        //标题背景
        UIView *biaotiView = [[[UIView alloc]init]autorelease];
        biaotiView.backgroundColor = BB_White_Color;
        biaotiView.frame=CGRectMake(0, 0, 320, 30);
        [headView addSubview:biaotiView];
         
        //标题文字
        UILabel *lblBiaoti = [[[UILabel alloc]init]autorelease];
        lblBiaoti.backgroundColor = [UIColor clearColor];
        lblBiaoti.textAlignment = NSTextAlignmentLeft;
        lblBiaoti.font = [UIFont systemFontOfSize:15];
        lblBiaoti.textColor = [UIColor blackColor];
        lblBiaoti.frame = CGRectMake(15, 7.5, 200, 15);
        lblBiaoti.text = [headerList objectAtIndex:section-1];
        [biaotiView addSubview:lblBiaoti];
    }
    return headView;
}

 UITableView显示索引。 显示索引实现的委托方法主要是:

//返回section的个数

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView

//返回索引数组

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

//返回每个索引的内容

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

//响应点击索引时的委托方法

-(NSInteger)tableView:(UITableView *)tableView sectionForSectionIndexTitle:(NSString *)title atIndex:(NSInteger)index

   另外一种效果:


下面是实现代码:

 .h文件:

?
1
2
3
4
5
#import <UIKit/UIKit.h>
 
@interface CContactListViewController : UITableViewController
 
@end
 .m文件:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
//
//  CContactListViewController.m
//  Contact
//
//  Created by Carl on 13-6-26.
//  Copyright (c) 2013年 contact..com. All rights reserved.
//
 
#import "CContactListViewController.h"
 
@interface CContactListViewController ()
@property NSMutableArray * dataSource, * dataBase;
@end
 
@implementation CContactListViewController
 
- (id)initWithStyle:(UITableViewStyle)style
{
    self = [super initWithStyle:style];
    if (self) {
        // Custom initialization
    }
    return self;
}
 
- (void)viewDidLoad
{
    [super viewDidLoad];
 
    // Uncomment the following line to preserve selection between presentations.
    // self.clearsSelectionOnViewWillAppear = NO;
  
    // Uncomment the following line to display an Edit button in the navigation bar for this view controller.
    // self.navigationItem.rightBarButtonItem = self.editButtonItem;
     
    self.navigationItem.rightBarButtonItem = self.editButtonItem;
     
    UISearchBar * searchBar = [[UISearchBar alloc] initWithFrame:CGRectMake(0, 0, self.view.bounds.size.width, 0)];
    searchBar.translucent = YES;
    searchBar.barStyle = UIBarStyleBlackTranslucent;
    searchBar.showsCancelButton = YES;
    [searchBar sizeToFit];
    [self.tableView setTableHeaderView:searchBar];
     
    //改变索引的颜色
    self.tableView.sectionIndexColor = [UIColor blueColor];
    //改变索引选中的背景颜色
    self.tableView.sectionIndexTrackingBackgroundColor = [UIColor grayColor];
 
     
     
    //索引数组
    _dataSource = [[NSMutableArray alloc] init] ;
     
    //tableview 数据源
    _dataBase = [[NSMutableArray alloc] init] ;
     
    //初始化数据
    for(char c = 'A'; c <= 'Z'; c++ )
    {
        [_dataSource addObject:[NSString stringWithFormat:@"%c",c]];
        [_dataBase addObject:[NSString stringWithFormat:@"%c",c]];
        [_dataBase addObject:[NSString stringWithFormat:@"%c",c]];
        [_dataBase addObject:[NSString stringWithFormat:@"%c",c]];
    }
     
     
}
 
 
-(void)viewWillAppear:(BOOL)animated
{
    [super viewWillAppear:animated];
    NSLog(@"viewWillAppear");
}
 
-(void)viewDidAppear:(BOOL)animated
{
    NSLog(@"viewDidAppear");
    [super viewDidAppear:animated];
     
     
    //取消选中的cell
    NSArray * indexPaths = [self.tableView indexPathsForSelectedRows];
     
    for(NSIndexPath * indexPath in indexPaths)
    {
        [self.tableView deselectRowAtIndexPath:indexPath animated:YES];
    }
 
}
 
- (void)didReceiveMemoryWarning
{
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}
 
#pragma mark - Table view data source
 
 
 
//返回索引数组
-(NSArray *)sectionIndexTitlesForTableView:(UITableView *)tableView
{
    return _dataSource;
}
 
//响应点击索引时的委托方法
-(NSInteger)tableView:(UITableView *)tableView sectionForSectionIndexTitle:(NSString *)title atIndex:(NSInteger)index
{
    NSInteger count = 0;
     
    NSLog(@"%@-%d",title,index);
     
    for(NSString *character in _dataSource)
    {
        if([character isEqualToString:title])
        {
            return count;
        }
        count ++;
    }
    return 0;
}
 
 
//返回section的个数
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
{
 
    // Return the number of sections.
    return [_dataSource count];
}
 
//返回每个索引的内容
-(NSString *)tableView:(UITableView *)tableView titleForHeaderInSection:(NSInteger)section
{
    return [_dataSource objectAtIndex:section];
}
 
//返回每个section的行数
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
 
    return 3;
}
 
 
//cell内容
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    static NSString *CellIdentifier = @"Cell";
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier forIndexPath:indexPath];
     
    if(cell == nil)
    {
        cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier];
    }
     
    cell.textLabel.text = [_dataBase objectAtIndex:indexPath.section * 3 + indexPath.row];
     
    return cell;
}
 
 
// Override to support conditional editing of the table view.
- (BOOL)tableView:(UITableView *)tableView canEditRowAtIndexPath:(NSIndexPath *)indexPath
{
    // Return NO if you do not want the specified item to be editable.
    return YES;
}
 
-(UITableViewCellEditingStyle)tableView:(UITableView *)tableView editingStyleForRowAtIndexPath:(NSIndexPath *)indexPath
{
    return UITableViewCellEditingStyleDelete | UITableViewCellEditingStyleInsert;
}
 
 
 
#pragma mark - Table view delegate
 
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
{
     
}
 
@end





相关文章推荐

IOS开发(52)之UITableView索引搜索之UILocalizedIndexedCollation

1 前言 IOS对于TableView的表格索引还停工一个工具类--UILocalizedIndexedCollation,今天我们就来学习一下这个控件。 2 代码实例 ZYAppDelegat...

iOS开发之高级视图—— UITableView(五)表视图索引

UITableView展示的数据如果非常多,我们通常需要根据各个分区产生一个索引快速定位到需要的分区。本例子需要创建一个plist,内容如下:        teams.plist       ...

IOS开发(51)之UITableView建立索引搜索

1 前言 昨天工作时候遇到TableView的建立索引问题,由于有的时候TableView之中的数据量十分之大,以至于需要在右侧建立索引来搜索,今日特意整理于下面,供大家参考,互相学习。 2 代码...

IOS UITableView及索引条源码

  • 2017年09月14日 15:34
  • 2.25MB
  • 下载

iOS 【UITableView之带右侧索引】

AJ分享,必须精品   先看效果图 代码 ViewController #import "NYViewController.h" #import "NYCarGroup.h" #imp...

iOS如何完美简单实现UITableView索引的放大悬浮提示View显示

一,问题描述:在好多app上面,类似通讯录的名字都是按字母分组的,索引的时候在UITableView中间会显示一个浮动的VIew显示当前索引的字母,如何实现这一功能? 二,实现思路,第一种,简单粗暴...

iOS UITableView 快速滚动(索引方式实现)

UITableView一次性加载数据过多时,需要滑动多次触底。想通过索引实现快速滑动,索引中加载20个空点。用户在最右端滑动时,索引框显示,当触及索引点时指向其想对应的UITableView的RowI...
  • f10_s
  • f10_s
  • 2014年08月11日 16:25
  • 1449

iOS UITableView加索引条和搜索框Demo

#import "MainViewController.h" @implementation MainViewController { //数据源数组 NSMutableArray*...

iOS学习笔记之UITableView之右侧索引

今天做的小demo是实现类似于咱们iPhone上通讯录中的索引,非常简单,大家可以参考一下,有什么不对的地方还请指出! 索引要实现的方法- (NSArray )sectionIndexTitlesF...

猫猫学IOS(十三)UI之UITableView学习(下)汽车名牌带右侧索引

猫猫分享,必须精品素材代码地址:http://blog.csdn.net/u013357243/article/details/44727225 原文地址:http://blog.csdn.net/...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:iOS UITableView索引列开发详解
举报原因:
原因补充:

(最多只允许输入30个字)