今天给大家分享一个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 <Foundation/Foundation.h>
@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 <Foundation/Foundation.h>
@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 ()<UITableViewDataSource, UITableViewDelegate>
@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
以下是运行之后的效果图：
注意看分组前面的小箭头的状态，代码中有详细说明
收起的效果.
下拉效果
