iOS索引列开发详解

来源：互联网发布：js offsettop 不准确编辑：程序博客网时间：2024/06/05 23:02

做苹果开发的朋友在地区列表可能会遇到在页面的右侧有一列类似与导航的索引列，这次有机会遇到了，细细研究了一下，原来没有想象中的困难，

只需要简单的几步就能做出自己的索引列。本来想和搜索条在一块讲解，后来考虑了一下，这个东西和搜索条功能虽有相似之处，却并非需要一起使用，所以就单独

摘出来，独立介绍吧！

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

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

第二步：列表控件的添加

19self.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。只需要设置这个属性即可，当初花费了我不少精力，差点自定义去设置，偶然间发现原来苹果已经自定义好了这个属性，所

以以后还是得从源头上解决问题。

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

20for(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]];

}

第四步：相关委托的使用

45//添加索引列

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

{

if(tableView == self.searchDisplayController.searchResultsTableView)

{

returnnil;

}

returnsuoyinCityList;

}

//索引列点击事件

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

returnindex+4;

}

这里注释的已经很详细，基本不需要我多解释，唯一需要注意的地方是如果本页面里面有多个列表的话需要在不需要的列表中隐藏索引列，否则可能会出现奇怪的问题，主要是获取不到数据，因为索引列是和uitableview的配合使用的，这个注意一下就好。

28- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section

{

if(tableView == self.searchDisplayController.searchResultsTableView)

{

returnnil;

}

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

}

returnheadView;

}

///////////////////////

UITableView带section的使用

(2013-09-12 12:01:25)

转载▼

标签：

杂谈

通常大家都是用UITableView的两种形式，UITableViewStylePlain，UITableViewStyleGrouped；

其实还有一种类似系统自带通讯录的那种Section 样式在UITableViewStylePlain这种模式下实现；

例子如下：

//HomeViewController.h

//TestTableview

//Created by haifeng on 13-9-12.

#import

@interfaceHomeViewController :UIViewController<UITableViewDelegate,UITableViewDataSource>{

UITableView*listTableView;

NSArray*sectionTitleArray;

}

@end

//HomeViewController.m

//TestTableview

//Created by haifeng on 13-9-12.

#import"HomeViewController.h"

@interfaceHomeViewController()

@end

@implementation HomeViewController

- (id)initWithNibName:(NSString*)nibNameOrNilbundle:(NSBundle*)nibBundleOrNil

{

self= [superinitWithNibName:nibNameOrNilbundle:nibBundleOrNil];

if(self) {

// Custominitialization

}

return self;

}

- (void)viewDidLoad

{

[superviewDidLoad];

// Do any additional

setup after loading the view.

sectionTitleArray= [NSArrayarrayWithObjects:@"1-10",@"11-20",@"21-30",@"31-40",@"41-50",@"51-60",@"61-70",@"71-80",@"81-90",@"91-100",nil];

UITableView*tv = [[UITableViewalloc]initWithFrame:self.view.bounds];

tv.dataSource= self;

tv.delegate= self;

listTableView= tv;

[self.viewaddSubview:tv];

UIView*hview = [[UIViewalloc]initWithFrame:CGRectMake(0,0,320.f,200.f)];

hview.backgroundColor=

[UIColororangeColor];

listTableView.tableHeaderView= hview;

}

//右边索引字节数(如果不实现就不显示右侧索引)

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

returnsectionTitleArray;

}

//section（标签）标题显示

- (NSString*)tableView:(UITableView*)tableViewtitleForHeaderInSection:(NSInteger)section {

return[sectionTitleArrayobjectAtIndex:section];

}

//标签数

- (NSInteger)numberOfSectionsInTableView:(UITableView*)tableView {

return10;

}

//设置section的高度

- (CGFloat)tableView:(UITableView*)tableViewheightForHeaderInSection:(NSInteger)section{

if(section ==0) {

return80;

}

return20;

}

//点击右侧索引表项时调用

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

NSString*key = [sectionTitleArrayobjectAtIndex:index];

NSLog(@"sectionForSectionIndexTitlekey=%@",key);

if(key ==UITableViewIndexSearch) {

[listTableViewsetContentOffset:CGPointZeroanimated:NO];

returnNSNotFound;

}

return index;

}

- (UIView*)tableView:(UITableView*)tableViewviewForHeaderInSection:(NSInteger)section{

UIView*v = nil;

if(section ==0) {

v = [[UIViewalloc]initWithFrame:CGRectMake(0,0,self.view.frame.size.width,80)];

[vsetBackgroundColor:[UIColorgrayColor]];

UILabel*labelTitle = [[UILabelalloc]initWithFrame:CGRectMake(50.0f,10.0f,200.0f,30.0f)];

[labelTitlesetBackgroundColor:[UIColorclearColor]];

labelTitle.textAlignment=NSTextAlignmentCenter;

labelTitle.text=@"第一个section定制页面";

[vaddSubview:labelTitle];

}

return v;

}

//设置cell的高度

- (CGFloat)tableView:(UITableView*)atableViewheightForRowAtIndexPath:(NSIndexPath*)indexPath

{

return44;

}

- (NSInteger)tableView:(UITableView*)tableViewnumberOfRowsInSection:(NSInteger)section{

return10;

}

- (UITableViewCell*)tableView:(UITableView*)tableViewcellForRowAtIndexPath:(NSIndexPath*)indexPath{

staticNSString*detailIndicated =@"tableCell";

UITableViewCell*cell =[tableViewdequeueReusableCellWithIdentifier:detailIndicated];

if(cell == nil) {

cell = [[UITableViewCellalloc]initWithStyle:UITableViewCellStyleDefaultreuseIdentifier:detailIndicated];

cell.tag= indexPath.row;

}

cell.textLabel.text= [NSStringstringWithFormat:@"%d",10*indexPath.section+ indexPath.row+1];

return cell;

}

- (void)didReceiveMemoryWarning

{

[superdidReceiveMemoryWarning];

//Dispose of any resources that can be recreated.

}

@end

////////////////////////

今天逛devdiv发现这个了这个东西然后自己就写了个demo看看

以前看iphone app经常在table右边有一个列表。可以用于快速选择。

这个就是sectionIndexTitle了

设置sectionIndex

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

此时是默认对应顺序对应 sectionIndex根据顺序对应到section

修改sectionIndex对应

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

通过传入的传入每个sectionIndex的title,index 来设置这个sectionIndex 对应的section。

Oc代码

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

//用于设置sectionIndexTitle

//返回要为一个内容为NSString 的NSArray 里面存放section title;

//默认情况下 section Title根据顺序对应 section 【如果不写tableView: sectionForSectionIndexTitle: atIndex:的话】

NSMutableArray* a=[NSMutableArray array];

for(CountryVO *c in self.countryDy){

[a addObject: [c.countryName substringToIndex:1]];

}

// return b=@[@"1",@"2"];

return a;

}

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

//传入 section title 和index 返回其应该对应的session序号。

//一般不需要写默认section index 顺序与section对应。除非你的section index数量或者序列与section不同才用修改

return index;

}

0 0