ios学习--iphone开发私房菜_5_] iphone中如何实现下拉菜单 .

 

iPhone 中的下拉菜单，或者说选择器一般演变成了Picker,或者UIActionSheet,而前者虽然使用方便，但是占据了非常大的屏幕空间，无法调整。而后者占据空间也很大，而且使用非常受限，垂直方向只能加6个选项，水平方向只能加4个选项，而且如果自定义控件的话，必须至少有一个默认按钮存在，否则加在上面的自定义控件将无法响应操作，当然你可以自定义一个自己的ActionSheet.

这篇文章就来讲一下如何在屏幕空间受限的iPhone中加入下拉菜单，以使用用户的选项操作,代码是基于一个网友的下拉菜单写的,由于忘记地址了，不过在此表示感谢。

(转载请保留此文字：本文来源:[iphone开发私房菜_5_] iphone中如何实现下拉菜单http://blog.csdn.net/ipromiseu/archive/2011/03/04/6224645.aspx] write by Gray.Luo [e-mail])

首先我们先来看一下一个下拉菜单由哪些部分组成，有什么特征。下拉菜单，顾名思义就是点击某一个控件，然后就会出现一个下拉框，这个下拉框中就是可供用户选择的选项。那么一个下拉组件就主要包括两个部分，一是触发控件，点击这个控件就会显示下拉框，当然这个触发控件也充当显示当前选项的角色。另一个就是下拉框，里面罗列了可供用户选择的众多数据。

第一个触发控件其实随便用什么控件都行,只要有点击事件就行，比如UISegmentedControl,UIbutton,UIBarButtonItem 等等都是可以的。而第二个下拉框，为了数据处理方便，我一般都采用UITableView 来做这个下拉框，很是方便。好了，基本的原理都分析了，Action吧！

1.创建一个触发控件：

这个本来不需要讲的，但是还是顺便贴一段吧。如这里我就以segment为例，我还是比较喜欢用segment，因为Nav上面不能随便加UIBarButtonItem,所以我就改用segment。

[c-sharp] view plaincopyprint?

1. _selectSegment = [[UISegmentedControl alloc]initWithFrame:CGRectMake(x,y,length,height)];
2. [_selectSegment insertSegmentWithImage:[UIImage imageNamed:@"current.png"] atIndex:0 animated:YES];
3. _selectSegment.segmentedControlStyle = UISegmentedControlStyleBar;
4. [_selectSegment addTarget:self action:@selector(selectSegmentAction:)forControlEvents:UIControlEventValueChanged];
5. [self.navigationController.navigationBar addSubview:_selectSegment];
6. [_selectSegment release];
7. _selectSegment.selectedSegmentIndex = -1;

_selectSegment = [[UISegmentedControl alloc]initWithFrame:CGRectMake(x,y,length,height)];[_selectSegment insertSegmentWithImage:[UIImage imageNamed:@"current.png"] atIndex:0 animated:YES];_selectSegment.segmentedControlStyle = UISegmentedControlStyleBar;[_selectSegment addTarget:self action:@selector(selectSegmentAction:)forControlEvents:UIControlEventValueChanged]; [self.navigationController.navigationBar addSubview:_selectSegment];[_selectSegment release];_selectSegment.selectedSegmentIndex = -1;

这一段就是创建一个segment的控件，然后加在NavigationBar上面，将它的UIControlEventValueChanged事件绑定到selectSegmentAction:上面。So,我们点击这个segment后，就会触发selectSegmentAction:，其原型，后面就会贴出来，告诉你它干了什么见不得人的事儿。

2.创建一个UITableView作为下拉框：

[c-sharp] view plaincopyprint?

1. /*
2. @property (nonatomic, retain) NSArray *comboBoxDatasource;
3. @synthesize comboBoxDatasource ;
4. */
5. _comboBoxTableView = [[UITableView alloc] initWithFrame:CGRectMake(x,y,length,height) style:UITableViewStylePlain];
6. _comboBoxTableView.dataSource = self;
7. _comboBoxTableView.delegate = self;
8. _comboBoxTableView.backgroundColor = [UIColor clearColor];
9. _comboBoxTableView.separatorColor = [UIColor clearColor];
10. _comboBoxTableView.hidden = YES;
11. [self.view addSubview:_comboBoxTableView];
12. [_comboBoxTableView release];
13. self.comboBoxDatasource = [[NSArray alloc] initWithObjects:@"1th", @"2th", @"3th",nil];

/*@property (nonatomic, retain) NSArray *comboBoxDatasource;@synthesize comboBoxDatasource ;*/_comboBoxTableView = [[UITableView alloc] initWithFrame:CGRectMake(x,y,length,height) style:UITableViewStylePlain];_comboBoxTableView.dataSource = self;_comboBoxTableView.delegate = self;_comboBoxTableView.backgroundColor = [UIColor clearColor];_comboBoxTableView.separatorColor = [UIColor clearColor];_comboBoxTableView.hidden = YES;[self.view addSubview:_comboBoxTableView];[_comboBoxTableView release]; self.comboBoxDatasource = [[NSArray alloc] initWithObjects:@"1th", @"2th", @"3th",nil];

这里呢就是创建一个UITableView加在self.view上面，当然你可以加在window这个电视上面：

[c-sharp] view plaincopyprint?

1. UIWindow* window=[[UIApplication sharedApplication] keyWindow];
2. [window addSubview:_comboBoxTableView];

UIWindow* window=[[UIApplication sharedApplication] keyWindow]; [window addSubview:_comboBoxTableView];

一般情况下呢,还需要为其添加一个背景色(图片)，否则，下拉的效果将像凤姐一样让人生畏。

[c-sharp] view plaincopyprint?

1. _tableViewImageView = [[UIImageView alloc] initWithFrame:CGRectMake(x,y,length,height)];
2. [_tableViewImageView setImage:[UIImage imageNamed:@"comboxBackGround.png"]];
3. [self.view addSubview:_tableViewImageView];
4. [_tableViewImageView release];
5. [_tableViewImageView setHidden:YES];

_tableViewImageView = [[UIImageView alloc] initWithFrame:CGRectMake(x,y,length,height)]; [_tableViewImageView setImage:[UIImage imageNamed:@"comboxBackGround.png"]]; [self.view addSubview:_tableViewImageView]; [_tableViewImageView release];[_tableViewImageView setHidden:YES];

位置当然需要慢慢调整，图层当然是放在tableview 的下面了，YY一下了，免得有的新手出不来又要哭半天。

3.tableView的数据

这个我感觉都没啥必要讲了，不过考虑到新手还是贴一段吧！

[c-sharp] view plaincopyprint?

1. #pragma mark -
2. #pragma mark UITableViewDelegate and UITableViewDatasource methods
3. - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
4. return [comboBoxDatasource count];
5. }
6. - (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView{
7. return 1;
8. }
9. - (NSString *)tableView:(UITableView *)aTableView titleForHeaderInSection:(NSInteger)section
10. {
11. return nil;
12. }
13. - (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section
14. {
15. UILabel *label = [[[UILabel alloc] initWithFrame:CGRectMake(0.0f,0.0f, 120.0f,20.0f)]autorelease];
16. label.backgroundColor = [UIColor clearColor];
17. label.text = @"Picture setting";
18. label.textColor = [UIColor grayColor];
19. label.font = [UIFont systemFontOfSize:10];
20. label.textAlignment = UITextAlignmentCenter;
21. return label;
22. }
23. - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
24. static NSString *CellIdentifier = @"CellIdentifier";
25. UITableViewCell *cell = [_comboBoxTableView dequeueReusableCellWithIdentifier:CellIdentifier];
26. if (cell == nil) {
27. cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier] autorelease];
28. }
29. cell.textLabel.text = (NSString *)[comboBoxDatasource objectAtIndex:indexPath.row];
30. cell.textLabel.font = [UIFont systemFontOfSize:12.0f];
31. cell.textLabel.textColor = [UIColor whiteColor];
32. [cell setAlpha:1.0f];
33. if(indexPath.section == 0){
34. if(indexPath.row == 0){
36. }else if(indexPath.row == 1){
38. }else if(indexPath.row == 2){
40. }
41. }
42. cell.accessoryType = UITableViewCellAccessoryNone;
43. cell.selectionStyle = UITableViewCellSelectionStyleBlue;
44. return cell;
45. }
47. - (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
48. return 20.0f;
49. }
51. - (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {
52. [self hidden];
53. [self selectedAction:indexPath.row];
54. [comboBoxTableView reloadData];
55. }

#pragma mark -#pragma mark UITableViewDelegate and UITableViewDatasource methods- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {return [comboBoxDatasource count];}- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView{ return 1;}- (NSString *)tableView:(UITableView *)aTableView titleForHeaderInSection:(NSInteger)section { return nil;} - (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section{UILabel *label = [[[UILabel alloc] initWithFrame:CGRectMake(0.0f,0.0f, 120.0f,20.0f)]autorelease]; label.backgroundColor = [UIColor clearColor]; label.text = @"Picture setting"; label.textColor = [UIColor grayColor]; label.font = [UIFont systemFontOfSize:10]; label.textAlignment = UITextAlignmentCenter; return label;}- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {static NSString *CellIdentifier = @"CellIdentifier";UITableViewCell *cell = [_comboBoxTableView dequeueReusableCellWithIdentifier:CellIdentifier];if (cell == nil) { cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier] autorelease];}cell.textLabel.text = (NSString *)[comboBoxDatasource objectAtIndex:indexPath.row];cell.textLabel.font = [UIFont systemFontOfSize:12.0f];cell.textLabel.textColor = [UIColor whiteColor];[cell setAlpha:1.0f];if(indexPath.section == 0){ if(indexPath.row == 0){ }else if(indexPath.row == 1){ }else if(indexPath.row == 2){ } } cell.accessoryType = UITableViewCellAccessoryNone; cell.selectionStyle = UITableViewCellSelectionStyleBlue; return cell;} - (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath { return 20.0f;} - (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath { [self hidden]; [self selectedAction:indexPath.row]; [comboBoxTableView reloadData];}

4.tableView的动作：

[c-sharp] view plaincopyprint?

1. #pragma mark -
2. #pragma mark combox action methods
4. //If a row selected ,this function will go.
5. - (void)selectedAction:(int)index {
6. switch (index) {
7. case 0:
8. break;
9. case 1:
10. break;
11. case 2:
12. break;
14. default:
15. break;
16. }
17. }
19. //comboBox show ,and _showComboBox is it's flag that means current status
20. - (void)comboBoxShow {
21. _comboBoxTableView.hidden = NO;
22. _showComboBox = YES;
23. [_tableViewImageView setHidden:NO];
24. }
26. //hidden comboBox whenever if this function called.
27. - (void)comboBoxHidden {
28. _comboBoxTableView.hidden = YES;
29. _showComboBox = NO;
30. [_tableViewImageView setHidden:YES];
31. }

#pragma mark -#pragma mark combox action methods //If a row selected ,this function will go.- (void)selectedAction:(int)index { switch (index) { case 0: break;case 1: break;case 2:break; default:break; }} //comboBox show ,and _showComboBox is it's flag that means current status- (void)comboBoxShow { _comboBoxTableView.hidden = NO; _showComboBox = YES; [_tableViewImageView setHidden:NO];} //hidden comboBox whenever if this function called.- (void)comboBoxHidden { _comboBoxTableView.hidden = YES; _showComboBox = NO; [_tableViewImageView setHidden:YES];}

5.All right,最后我们添加一个事件，在点击屏幕其它地方的时候就把空上下拉框给Hiden起来。以上我们的控件都是加在UIView上面的，我们需要把uiview改成UIControl 。这样子就可以响应事件了。

[contentView addTarget:self action:@selector(backgroundTap:) forControlEvents:UIControlEventTouchDown];

在backgroundTap里面就直接调用comboBoxHidden 就OK了。

至此，基于的下拉菜单就大功告成了，至于其它优化什么的，就慢慢去琢磨吧！