[iOS]实现QQ好友列表类型的下拉型列表

在实际开发中，我们用的最多的控件可以说非UITableView莫属了，我们使用UITableView来展示一系列类型系统的信息，但是，普通的UITableView使用无法实现下拉显示具体的信息。所以今天就记录一下下拉型列表的实现。
先上效果图，这里我展示的是全国的省市列表：

2.gif

先说一下思路，按MVC模式按顺序说：

M层

要封装两个模型，其中一个模型用来保存每一个省份数据，其中包括（1）最基本的省份名称（2）设置一个标志，标志当前省份是否被点击展开显示（3）一个数组，用来保存一组市名称。这个市名称就是另外一个模型。

V层

我们要利用UITableView的HeaderView视图来展示省份信息，用我们常用的UITableViewCell来展示市信息。

C层

我们会在HeaderView上面添加点击手势，每一次点击我们都会根据当前的情况对这个Section下面的cell进行更新，这样就达到了点击下拉出现子列表的效果了。

直接上代码吧，允许我偷一下懒。。。(づ￣ 3￣)づ
ViewController.h文件

#import <UIKit/UIKit.h>

@interface ViewController : UIViewController

@end

ViewController.m文件

//
//  ViewController.m
//  CellClickDemo
//
//  Created by 马德茂 on 16/1/11.
//  Copyright © 2016年 马德茂. All rights reserved.
//

#import "ViewController.h"
#import "MDMHeaderView.h"

@interface ViewController ()<UITableViewDataSource, UITableViewDelegate>
@property (weak, nonatomic) IBOutlet UITableView *tableView;

@property (nonatomic, strong) NSMutableArray *listArray;
@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    
    self.tableView.delegate = self;
    self.tableView.dataSource = self;
    [self.tableView registerClass:[UITableViewCell class] forCellReuseIdentifier:@"cell"];
    [self.tableView registerClass:[MDMHeaderView class] forHeaderFooterViewReuseIdentifier:@"header"];
    
}

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
{
    return self.listArray.count;
}

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    if ([[[self.listArray objectAtIndex:section] objectForKey:@"flag"] isEqualToString:@"NO"]) {
        return 0;
    } else {
        return [[[self.listArray objectAtIndex:section] objectForKey:@"city"] count];
    }
}

- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section
{
    MDMHeaderView *view = [tableView dequeueReusableHeaderFooterViewWithIdentifier:@"header"];
    view.label.text = [[self.listArray objectAtIndex:section] objectForKey:@"name"];
    view.tag = section;
    
    if (view.gestureRecognizers == nil) {
        UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(headerViewClickedAction:)];
        [view addGestureRecognizer:tap];
    }
    
    return view;
}

- (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section
{
    return 30;
}

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
{
    NSLog(@"%@", [[[[self.listArray objectAtIndex:indexPath.section] objectForKey:@"city"] objectAtIndex:indexPath.row] objectForKey:@"name"]);
    
    [[tableView cellForRowAtIndexPath:indexPath] setSelected:NO animated:YES];
// 下面方法更好使
//    [tableView deselectRowAtIndexPath:indexPath animated:YES];
}

- (void) headerViewClickedAction:(UITapGestureRecognizer *)sender
{
    if ([[[self.listArray objectAtIndex:sender.view.tag] objectForKey:@"flag"] isEqualToString:@"NO"]) {
        [[self.listArray objectAtIndex:sender.view.tag] setObject:@"YES" forKey:@"flag"];
    } else {
        [[self.listArray objectAtIndex:sender.view.tag] setObject:@"NO" forKey:@"flag"];
    }
    NSIndexSet *set = [NSIndexSet indexSetWithIndex:sender.view.tag];
    [self.tableView reloadSections:set withRowAnimation:UITableViewRowAnimationFade];
}


- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"cell" forIndexPath:indexPath];
    cell.textLabel.text = [[[[self.listArray objectAtIndex:indexPath.section] objectForKey:@"city"] objectAtIndex:indexPath.row] objectForKey:@"name"];
    
//    [cell setSelectionStyle:UITableViewCellSelectionStyleNone];
    
    return cell;
}

- (NSMutableArray *)listArray
{
    if (_listArray == nil) {
        
        self.listArray = [NSMutableArray array];
        
        NSBundle *bundle = [NSBundle mainBundle];
        NSString *pathString = [bundle pathForResource:@"list" ofType:@"json"];
        NSData *data = [NSData dataWithContentsOfFile:pathString];
        NSArray *rootArray = [NSJSONSerialization JSONObjectWithData:data options:NSJSONReadingAllowFragments error:nil];
        for (NSDictionary *dic in rootArray) {
            NSMutableDictionary *dicc = [NSMutableDictionary dictionaryWithDictionary:dic];
            [dicc setObject:@"NO" forKey:@"flag"];
            [self.listArray addObject:dicc];
        }
    }
    return _listArray;
}


@end

MDMHeaderView.h文件

#import <UIKit/UIKit.h>

@interface MDMHeaderView : UITableViewHeaderFooterView

@property (readwrite, strong, nonatomic) UILabel *label;

@end

MDMHeaderView.m文件

#import "MDMHeaderView.h"

@implementation MDMHeaderView

- (instancetype)initWithReuseIdentifier:(NSString *)reuseIdentifier
{
    if (self = [super initWithReuseIdentifier:reuseIdentifier]) {
        [self addAllViews];
        self.contentView.backgroundColor = [UIColor blueColor];
    }
    return self;
}


- (void)addAllViews
{
    self.label = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, [UIScreen mainScreen].bounds.size.width, 29)];
    self.label.textColor = [UIColor redColor];
    [self.contentView addSubview:self.label];
    
    UIView *view = [[UIView alloc] initWithFrame:CGRectMake(0, 29, [UIScreen mainScreen].bounds.size.width, 1)];
    view.backgroundColor = [UIColor whiteColor];
    [self.contentView addSubview:view];
}
@end

最后，求不吐槽我懒得没有封装模型而用了字典省事(* ￣3)(ε￣ *)。。。

[iOS]实现QQ好友列表类型的下拉型列表

M层

V层

C层

推荐阅读更多精彩内容