今天給大家分享一個tableView 下拉效果的小demo萍虽。
首先轴脐，創(chuàng)建我們需要的類债热，兩個model：一個大model植捎，用來裝載分區(qū)頭，一個小model阳柔，裝載每個分組中的好友信息。起類名的時候需要見名知意蚓峦，如下圖：
需要創(chuàng)建的類
看一下plist文件中的數(shù)據(jù)舌剂，如何進行解析：
BigModel裝載的對應(yīng)數(shù)據(jù)
SmallModel裝載的數(shù)據(jù)
在BigModel中聲明對應(yīng)的key值屬性，還要聲明一個bool類型暑椰，用于后面的狀態(tài)判斷：
//
// 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;
// 判斷點擊分區(qū)頭下拉還是收起好友
@property (nonatomic, assign) BOOL isOpen;
@end
在SmallModel中聲明對應(yīng)的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 這個方法霍转，以防出現(xiàn)未定義的key：
- (void)setValue:(id)value forUndefinedKey:(NSString *)key
{
}
我是直接在 ViewController 寫的，導(dǎo)入頭文件一汽，定義一個tableView 鋪放界面避消、聲明一個 modelArray 裝載數(shù)據(jù)：
//
// 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"
// 把屏幕的寬、高定義成宏定義召夹，方便調(diào)用
#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 懶加載岩喷、解析數(shù)據(jù)
- (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:對應(yīng)的好友信息
NSMutableArray *friendsArr = dic[@"friends"];
// !!! 一定要將裝載小model的數(shù)組bigModel.friends初始化
bigModel.friends = [NSMutableArray array];
for (NSDictionary *dic1 in friendsArr)
{
SmallModel *smallModel = [[SmallModel alloc] init];
[smallModel setValuesForKeysWithDictionary:dic1];
// 把小model裝入大model的好友數(shù)組中
[bigModel.friends addObject:smallModel];
}
// 將裝入小model信息的大model裝入數(shù)組中
[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 -- 協(xié)議中的方法
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
{
return self.modelArray.count;
}
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
BigModel *bigModel = self.modelArray[section];
// 如果分區(qū)頭是下拉狀態(tài)，返回好友個數(shù)
if (bigModel.isOpen)
{
// 返回大數(shù)組中friends數(shù)組中的每個分區(qū)好友個數(shù)
return bigModel.friends.count;
}
// 否則监憎，分區(qū)頭是收起狀態(tài)纱意，cell則不顯示，行數(shù)為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 的分區(qū)頭
- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section
{
UIView *view = [[UIView alloc] initWithFrame:CGRectMake(0, 0, ScreenW, 50)];
view.tag = section + 100; // 點擊手勢時使用tag值判斷點擊的是哪個分區(qū)頭
[self.view addSubview:view]; // 一定要將自定義的分區(qū)頭添加到根視圖上
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];
// 判斷下拉狀態(tài)還是收起狀態(tài)鲸阔，來決定箭頭圖片旋轉(zhuǎn)度數(shù)：
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];
// 分區(qū)頭之前的線
UIView *lineV = [[UIView alloc] initWithFrame:CGRectMake(0, 0, ScreenW, 1)];
lineV.backgroundColor = [UIColor grayColor];
[view addSubview:lineV]; // 或者把分區(qū)尾的高度設(shè)置成1偷霉，實現(xiàn)相同的效果
// 給分區(qū)頭添加一個手勢
UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(tapAction:)];
[view addGestureRecognizer:tap];
return view;
}
// 返回分區(qū)頭的高度
- (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
以下是運行之后的效果圖：
注意看分組前面的小箭頭的狀態(tài)迄委，代碼中有詳細說明
收起的效果.
下拉效果
