关闭

iOS UITableView索引列开发详解

标签: 索引uitableview
360人阅读 评论(0) 收藏 举报
分类:

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



索引列看着就很高大上,实际做出来的效果也挺不错的。这个既不需要引入第三方的类库,还不需要单独的委托,它是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





0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:70394次
    • 积分:1194
    • 等级:
    • 排名:千里之外
    • 原创:28篇
    • 转载:143篇
    • 译文:1篇
    • 评论:5条
    最新评论