iOS UITableView索引列开发详解

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

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