简单实现下拉框效果（UITableView）

实现效果

在写界面的时候遇到了下拉框问题，最后效果如下：

实现

总代码

在ViewController.m中

@interface ViewController ()<UITableViewDelegate,UITableViewDataSource>

@property NSInteger flag;
@property NSMutableArray *array;
@property UITableView *tableView;

@end

@implementation ViewController



- (void)viewDidLoad {
  [super viewDidLoad];
  // Do any additional setup after loading the view.
  self.view.backgroundColor = [UIColor grayColor];
  _flag = 0;
  _tableView = [[UITableView alloc]initWithFrame:CGRectMake(60, 150, 150, 44) style:UITableViewStylePlain];
  _tableView.delegate = self;
  _tableView.dataSource = self;
  _tableView.separatorStyle = UITableViewCellSelectionStyleNone;
  [self.view addSubview:_tableView];
}


- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{
  if (_flag == 0) {
      return 1;
  } else {
      return 4;
  }
}
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
  UITableViewCell *tableViewCell = [[UITableViewCell alloc]init];
  if (_flag == 1) {
      _tableView.frame = CGRectMake(60, 150, 150, 176);
      _array = [NSMutableArray arrayWithObjects:@"原创作品", @"设计资料", @"设计师观点", @"教程", nil];
  } else{
      _tableView.frame = CGRectMake(60, 150, 150, 44);
      _array = [NSMutableArray arrayWithObjects:@"原创作品", nil];
  }
  tableViewCell.textLabel.text = [_array objectAtIndex:indexPath.row];
  tableViewCell.textLabel.textAlignment = NSTextAlignmentCenter;
  tableViewCell.selectionStyle = UITableViewCellEditingStyleNone;
  return tableViewCell;
}
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath{
  if (indexPath.row == 0) {
      if (_flag == 0) {
          _flag = 1;
          [_tableView reloadData];
      } else{
          _flag = 0;
          [_tableView reloadData];
      }
  }
}

代码分析

row值改变

这个效果实现的原理就是根据flag值来改变UITableView的row值。
所以要把flag设置为全局的，然后在一开始的viewDidLoad中，初始化flag值。
这里的flag也可以设为BOOL型

@property NSInteger flag;
- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
    _flag = 0;
}

然后改变UITableView的row值。

  - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{
    if (_flag == 0) {
        return 1;
    }
    else {
        return 4;
    }
}

UITableViewCell内容改变

当然既然row会随着flag变而变，那么单元格内容也应该跟着一起变，所以：

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
    UITableViewCell *tableViewCell = [[UITableViewCell alloc]init];
    if (_flag == 1) {
        _tableView.frame = CGRectMake(60, 150, 150, 176);
        _array = [NSMutableArray arrayWithObjects:@"原创作品", @"设计资料", @"设计师观点", @"教程", nil];
    }
    else{
        _tableView.frame = CGRectMake(60, 150, 150, 44);
        _array = [NSMutableArray arrayWithObjects:@"原创作品", nil];
    }
    tableViewCell.textLabel.text = [_array objectAtIndex:indexPath.row];
    tableViewCell.textLabel.textAlignment = NSTextAlignmentCenter;
    tableViewCell.selectionStyle = UITableViewCellEditingStyleNone;
    return tableViewCell;
}

UITableView的大小改变

这里要注意，UITableView的大小也要跟着变不然会出现这种情况:

点击事件

在这里，我只设置了第一个单元格的点击事件：

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath{
    if (indexPath.row == 0) {
        if (_flag == 0) {
            _flag = 1;
        }
        else{
            _flag = 0;
        }
    }
}

所以，只有在点击第一个单元格的时候，会改变flag值。

UITableView更新

改变完flag值，就要让UITableView进行更新了，所以在改变完flag值后，加上：

[_tableView reloadData];

就可以产生下拉框效果了。