iOS索引列開發詳解

作蘋果開發的朋友在地區列表可能會遇到在頁面的右側有一列相似與導航的索引列,此次有機會遇到了,細細研究了一下,原來沒有想象中的困難,只須要簡單的幾步就能作出本身的索引列。原本想和搜索條在一塊講解,後來考慮了一下,這個東西和搜索條功能雖有類似之處,卻並不是須要一塊兒使用,因此就單獨摘出來,獨立介紹吧!c++

索引列看着就很高大上,實際作出來的效果也挺不錯的。這個既不須要引入第三方的類庫,還不須要單獨的委託,它是uitableview列表控件的一個功能的延伸,將用戶的體驗作到極致,這也就是蘋果細緻、人性化的地方。下面開始關於索引列的講解。ui

第一步:添加列表委託UITableViewDataSource, UITableViewDelegatespa

第二步:列表控件的添加code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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。只須要設置這個屬性便可,當初花費了我很多精力,差點自定義去設置,偶然間發現原來蘋果已經自定義好了這個屬性,因此之後仍是得從源頭上解決問題。orm

第三步:索引列數據的獲取blog

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]];
  
         }
  
  }

第四步:相關委託的使用索引

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
//添加索引列
  
-(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的配合使用的,這個注意一下就好。事件

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
- (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;
}
相關文章
相關標籤/搜索