TableView 下拉demo

今天给大家分享一个tableView 下拉效果的小demo。
首先，创建我们需要的类，两个model：一个大model，用来装载分区头，一个小model，装载每个分组中的好友信息。起类名的时候需要见名知意，如下图：

需要创建的类

看一下plist文件中的数据，如何进行解析：

BigModel装载的对应数据

SmallModel装载的数据

在BigModel中声明对应的key值属性，还要声明一个bool类型，用于后面的状态判断：

//
//  BigModel.h
//  UI_QQListProject
//
//  Created by 奇二世界 on 16/6/23.
//  Copyright © 2016年 YMN. All rights reserved.
//

#import 

@interface BigModel : NSObject

@property (nonatomic, strong) NSString *name;
@property (nonatomic, strong) NSString *online;
@property (nonatomic, strong) NSMutableArray *friends;

// 判断点击分区头下拉还是收起好友
@property (nonatomic, assign) BOOL isOpen;
@end

在SmallModel中声明对应的key值属性:

//
//  SmallModel.h
//  UI_QQListProject
//
//  Created by 奇二世界 on 16/6/23.
//  Copyright © 2016年 YMN. All rights reserved.
//

#import 

@interface SmallModel : NSObject

@property (nonatomic, strong) NSString *icon;
@property (nonatomic, strong) NSString *intro;
@property (nonatomic, strong) NSString *name;
@property (nonatomic, strong) NSNumber *vip;
@end

在两个model 的 .m 文件中要写 setValue forUndefinedKey 这个方法，以防出现未定义的key：

- (void)setValue:(id)value forUndefinedKey:(NSString *)key
{
}

我是直接在 ViewController 写的，导入头文件，定义一个tableView 铺放界面、声明一个 modelArray 装载数据：

//
//  ViewController.m
//  UI_QQListProject
//
//  Created by 奇二世界 on 16/6/23.
//  Copyright © 2016年 YMN. All rights reserved.
//

#import "ViewController.h"
#import "BigModel.h"
#import "SmallModel.h"

// 把屏幕的宽、高定义成宏定义，方便调用
#define ScreenW [UIScreen mainScreen].bounds.size.width
#define ScreenH [UIScreen mainScreen].bounds.size.height

@interface ViewController ()


@property (nonatomic, strong) UITableView *tableV;

@property (nonatomic, strong) NSMutableArray *modelArray;


@end

@implementation ViewController

// modelArray 懒加载、解析数据
- (NSMutableArray *)modelArray
{
    if (!_modelArray)
    {
        _modelArray = [NSMutableArray array];
        
        NSString *path = [[NSBundle mainBundle] pathForResource:@"friends" ofType:@"plist"];
        NSMutableArray *array = [NSMutableArray arrayWithContentsOfFile:path];
         // 解析大model:分组
        for (NSDictionary *dic in array)
        {
            BigModel *bigModel = [[BigModel alloc] init];
            [bigModel setValuesForKeysWithDictionary:dic];
            
            // 解析小model:对应的好友信息
            NSMutableArray *friendsArr = dic[@"friends"];
            // !!! 一定要将装载小model的数组bigModel.friends初始化
            bigModel.friends = [NSMutableArray array];
            for (NSDictionary *dic1 in friendsArr)
            {
                SmallModel *smallModel = [[SmallModel alloc] init];
                [smallModel setValuesForKeysWithDictionary:dic1];
                // 把小model装入大model的好友数组中
                [bigModel.friends addObject:smallModel];
            }
            // 将装入小model信息的大model装入数组中
            [self.modelArray addObject:bigModel];
        }
    }
    return _modelArray;
}


- (void)viewDidLoad {
    [super viewDidLoad];
    
    self.tableV = [[UITableView alloc] initWithFrame:CGRectMake(0, 0, ScreenW, ScreenH) style:(UITableViewStylePlain)];
    self.tableV.dataSource = self;
    self.tableV.delegate = self;
    
    [self.view addSubview:self.tableV];
}

#pragma mark -- 协议中的方法
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
{
    return self.modelArray.count;
}

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    BigModel *bigModel = self.modelArray[section];
    // 如果分区头是下拉状态，返回好友个数
    if (bigModel.isOpen)
    {
        // 返回大数组中friends数组中的每个分区好友个数
        return bigModel.friends.count;
    }
    // 否则，分区头是收起状态，cell则不显示，行数为0
    return 0;
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"cell"];
    if (!cell) 
    {
        cell = [[UITableViewCell alloc] initWithStyle:(UITableViewCellStyleSubtitle) reuseIdentifier:@"cell"];
    }
    
    BigModel *bigModel = self.modelArray[indexPath.section];
    SmallModel *smallModel = bigModel.friends[indexPath.row];
    cell.textLabel.text = smallModel.name;
    cell.detailTextLabel.text = smallModel.intro;
    cell.imageView.image = [UIImage imageNamed:smallModel.icon];
    
    return cell;
}

// tableView 的分区头
- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section
{
    UIView *view = [[UIView alloc] initWithFrame:CGRectMake(0, 0, ScreenW, 50)];
    view.tag = section + 100; // 点击手势时使用tag值判断点击的是哪个分区头
    [self.view addSubview:view]; // 一定要将自定义的分区头添加到根视图上
    
    BigModel *model = self.modelArray[section];
    
    UIImageView *imageV = [[UIImageView alloc] initWithFrame:CGRectMake(10, 20, 10, 10)];
    imageV.image = [UIImage imageNamed:@"buddy_header_arrow"];
    [view addSubview:imageV];
    
    // 判断下拉状态还是收起状态，来决定箭头图片旋转度数：
    imageV.transform = model.isOpen ? CGAffineTransformMakeRotation(M_PI_2) : CGAffineTransformMakeRotation(0);
   
    UILabel *groupNameL = [[UILabel alloc] initWithFrame:CGRectMake(35, 0, 150, 50)];
    groupNameL.text = model.name;
    [view addSubview:groupNameL];
    
    UILabel *numberL = [[UILabel alloc] initWithFrame:CGRectMake(ScreenW - 50, 0, 50, 50)];
    numberL.text = [NSString stringWithFormat:@"%@/%ld", model.online, model.friends.count];
    [view addSubview:numberL];
    
    // 分区头之前的线
    UIView *lineV = [[UIView alloc] initWithFrame:CGRectMake(0, 0, ScreenW, 1)];
    lineV.backgroundColor = [UIColor grayColor];
    [view addSubview:lineV]; // 或者把分区尾的高度设置成1，实现相同的效果
    
    // 给分区头添加一个手势
    UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(tapAction:)];
    [view addGestureRecognizer:tap];
    
    return view;

}

// 返回分区头的高度
- (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section
{
    return 50;
}

#pragma mark -- 手势的点击方法
- (void)tapAction:(UITapGestureRecognizer *)tap
{
    UIView *view = tap.view;
   NSInteger index = view.tag - 100;
    
    BigModel *model = self.modelArray[index];
    model.isOpen = !model.isOpen;
    [self.tableV reloadData]; // 一定要刷新UI
}

@end

以下是运行之后的效果图：
注意看分组前面的小箭头的状态，代码中有详细说明

收起的效果.

下拉效果