iOS移动开发-每日轻松一记-iOS索引列开发详解

iOS索引列开发详解-


博客地址-iOS索引开发详解   

2014-09-19 14:10编辑:suiling分类:iOS开发来源:快乐天子

98378

iOS开发索引列

招聘信息:

白盒测试

iOS高级开发工程师(急招)

iOS开发工程师

前端工程师

测试工程师

iOS开发工程师

iOS开发工程师

U3D场景建模师、U3D角色建模师

APP推广

游戏开发Unity3D客户端程序员

WEB前端

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

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

摘出来,独立介绍吧!

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

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

第二步:列表控件的添加

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

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

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

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

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

}

}

第四步:相关委托的使用

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)

{

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的配合使用的,这个注意一下就好。

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)

{

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.

//Copyright (c) 2013年haifeng. All rights reserved.

//

#import

@interfaceHomeViewController :UIViewController<UITableViewDelegate,UITableViewDataSource>{

UITableView*listTableView;

NSArray*sectionTitleArray;

}

@end

//

//HomeViewController.m

//TestTableview

//

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

//Copyright (c) 2013年haifeng. All rights reserved.

//

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

}

推荐阅读更多精彩内容

  • 概述在iOS开发中UITableView可以说是使用最广泛的控件,我们平时使用的软件中到处都可以看到它的影子,类似...
    liudhkk阅读 8,536评论 3 38
  • 1.nav1.navigationBar.barStyle=UIBarStyleBlack; //改变导航栏背景颜...
    SadMine阅读 1,166评论 1 4
  • 版权声明:未经本人允许,禁止转载. 1. TableView初始化 1.UITableView有两种风格:UITa...
    萧雪痕阅读 2,554评论 2 10
  • 如果人生是一场匆匆的旅行,那么此生一定会经历很多过客。 我希望有一个如你一般的人,如山间清爽的风,如古城温暖的光,...
    雨亦晗烟阅读 293评论 3 0
  • 感赏自己今早面对女儿起床晚了些没有催促唠叨,她不想吃完早饭我没有强迫。她自己的事儿,我就不瞎焦虑了。感赏女儿能坚持...
    勿忘我瑶阅读 53评论 5 3
  • "不喜欢初中生活,不喜欢身边的一群小屁孩,不喜欢老师,不喜欢学习,什么都不喜欢。但是,林然,你必须得假装喜欢,假装...
    非飞的树阅读 101评论 0 0
  • 从没想过,大学四年,冉冉时光,如白驹过,现在成为毕业洪流中的一员。昔日时光,仿若昨日,历历在目。 高考成绩不理想,...
    陆溱阅读 182评论 0 6