折疊單元格的樣式如圖:
展開(kāi)后的折疊單元格樣式
昨天完成使用第三方RATreeView實(shí)現(xiàn)折疊效果,組長(zhǎng)說(shuō)要把怎么使用的過(guò)程詳細(xì)的記錄下來(lái)以便以后用到很快上手,我覺(jué)得很有道理.所以你們看到了現(xiàn)在的它
RATreeView是對(duì)TableView的一成封裝,和TableView的使用樣式幾乎一模一樣
首先要pod RATreeView
下載下來(lái)之后不著急,先做個(gè)數(shù)據(jù)模型出來(lái),這個(gè)數(shù)據(jù)模型有一點(diǎn)需要大家注意,必須有一個(gè)子節(jié)點(diǎn)數(shù)組屬性,不然就沒(méi)有使用這個(gè)第三方的理由了,為什么呢?因?yàn)槲覀冋故镜臉?shù)狀結(jié)構(gòu)就是一個(gè)節(jié)點(diǎn)套另一個(gè)節(jié)點(diǎn),如果不需要嵌套直接使用UItableView就可以展示了.回歸到代碼
#import@interface RaTreeModel : NSObject
@property (nonatomic,copy) NSString *name;//標(biāo)題
@property (nonatomic,strong) NSArray *children;//子節(jié)點(diǎn)數(shù)組
//初始化一個(gè)model
- (id)initWithName:(NSString *)name children:(NSArray *)array;
//遍歷構(gòu)造器
+ (id)dataObjectWithName:(NSString *)name children:(NSArray *)children;
@end
#import "RaTreeModel.h"
@implementation RaTreeModel
- (id)initWithName:(NSString *)name children:(NSArray *)children
{
self = [super init];
if (self) {
self.children = children;
self.name = name;
}
return self;
}
+ (id)dataObjectWithName:(NSString *)name children:(NSArray *)children
{
return [[self alloc] initWithName:name children:children];
}
@end
完成了模型
那么接下來(lái)我們來(lái)做用來(lái)展示的cell,在這里我直接使用xib了,使用xib的一個(gè)注意點(diǎn):就是不要勾選 Use Auto Layout,不然cell的布局會(huì)不起作用
去掉自動(dòng)布局的截圖
使用xib創(chuàng)建的cell樣式,可以根據(jù)自己的需求來(lái)改變cell的樣式
#import <UIKit/UIKit.h>
#import <RATreeView.h>
@interface RaTreeViewCell : UITableViewCell
@property (weak, nonatomic) IBOutlet UIImageView *iconView;//圖標(biāo)
@property (weak, nonatomic) IBOutlet UILabel *titleLable;//標(biāo)題
//賦值
- (void)setCellBasicInfoWith:(NSString *)title level:(NSInteger)level children:(NSInteger )children;
+ (instancetype)treeViewCellWith:(RATreeView *)treeView;
@end
#import "RaTreeViewCell.h"
@interface RaTreeViewCell()
@end
@implementation RaTreeViewCell
+ (instancetype)treeViewCellWith:(RATreeView *)treeView
{
RaTreeViewCell *cell = [treeView dequeueReusableCellWithIdentifier:@"RaTreeViewCell"];
if (cell == nil) {
cell = [[[NSBundle mainBundle] loadNibNamed:@"ModelCell" owner:nil options:nil] firstObject];
}
return cell;
}
- (void)awakeFromNib {
// Initialization code
self.selectionStyle = UITableViewCellSelectionStyleNone;
}
- (void)setSelected:(BOOL)selected animated:(BOOL)animated {
[super setSelected:selected animated:animated];
// Configure the view for the selected state
}
- (void)setCellBasicInfoWith:(NSString *)title level:(NSInteger)level children:(NSInteger )children{
//有自孩子時(shí)顯示圖標(biāo)
if (children==0) {
self.iconView.hidden = YES;
}
else { //否則不顯示
self.iconView.hidden = NO;
}
self.titleLable.text = title;
self.iconView.image = [UIImage imageNamed:@"close"];
//每一層的布局
CGFloat left = 10+level*30;
//頭像的位置
CGRect iconViewFrame = self.iconView.frame;
iconViewFrame.origin.x = left;
self.iconView.frame = iconViewFrame;
//title的位置
CGRect titleFrame = self.titleLable.frame;
titleFrame.origin.x = 40+left;
self.titleLable.frame = titleFrame;
}
@end
cell創(chuàng)建完畢 最后一步完成RATreeView 在一開(kāi)始就和大家介紹了說(shuō),RATreeView的用法和UITableView的用法特別的類(lèi)似
#import "ViewController.h"
#import "RaTreeModel.h"
#import "RaTreeViewCell.h"
#import <RATreeView.h>
@interface ViewController ()<RATreeViewDataSource, RATreeViewDelegate>
@property (nonatomic, strong) NSMutableArray *modelArray;
@end
@implementation ViewController
//創(chuàng)建RATreeView 并賦值給控制器的view
- (void)loadView
{
RATreeView *ratreeView = [[RATreeView alloc] initWithFrame:[UIScreen mainScreen].bounds style:RATreeViewStylePlain];
ratreeView.delegate = self;
ratreeView.dataSource = self;
self.view = ratreeView;
self.view.backgroundColor = [UIColor whiteColor];
[self setData];
}
- (void)setData {
//寶雞市 (四層)
RaTreeModel *zijingcun = [RaTreeModel dataObjectWithName:@"紫荊村" children:nil];
RaTreeModel *chengcunzheng = [RaTreeModel dataObjectWithName:@"陳村鎮(zhèn)" children:@[zijingcun]];
RaTreeModel *fengxiang = [RaTreeModel dataObjectWithName:@"鳳翔縣" children:@[chengcunzheng]];
RaTreeModel *qishan = [RaTreeModel dataObjectWithName:@"岐山縣" children:nil];
RaTreeModel *baoji = [RaTreeModel dataObjectWithName:@"寶雞市" children:@[fengxiang,qishan]];
//西安市
RaTreeModel *yantaqu = [RaTreeModel dataObjectWithName:@"雁塔區(qū)" children:nil];
RaTreeModel *xinchengqu = [RaTreeModel dataObjectWithName:@"新城區(qū)" children:nil];
RaTreeModel *xian = [RaTreeModel dataObjectWithName:@"西安" children:@[yantaqu,xinchengqu]];
RaTreeModel *shanxi = [RaTreeModel dataObjectWithName:@"陜西" children:@[baoji,xian]];
self.modelArray = [NSMutableArray array];
[self.modelArray addObject:shanxi];
}
#pragma mark -----------delegate
//返回行高
- (CGFloat)treeView:(RATreeView *)treeView heightForRowForItem:(id)item {
return 50;
}
//將要展開(kāi)
- (void)treeView:(RATreeView *)treeView willExpandRowForItem:(id)item {
RaTreeViewCell *cell = (RaTreeViewCell *)[treeView cellForItem:item];
cell.iconView.image = [UIImage imageNamed:@"open"];
}
//將要收縮
- (void)treeView:(RATreeView *)treeView willCollapseRowForItem:(id)item {
RaTreeViewCell *cell = (RaTreeViewCell *)[treeView cellForItem:item];
cell.iconView.image = [UIImage imageNamed:@"close"];
}
//已經(jīng)展開(kāi)
- (void)treeView:(RATreeView *)treeView didExpandRowForItem:(id)item {
NSLog(@"已經(jīng)展開(kāi)了");
}
//已經(jīng)收縮
- (void)treeView:(RATreeView *)treeView didCollapseRowForItem:(id)item {
NSLog(@"已經(jīng)收縮了");
}
//# dataSource方法
//返回cell
- (UITableViewCell *)treeView:(RATreeView *)treeView cellForItem:(id)item {
//獲取cell
RaTreeViewCell *cell = [RaTreeViewCell treeViewCellWith:treeView];
//當(dāng)前item
RaTreeModel *model = item;
//當(dāng)前層級(jí)
NSInteger level = [treeView levelForCellForItem:item];
//賦值
[cell setCellBasicInfoWith:model.name level:level children:model.children.count];
return cell;
}
/**
* 必須實(shí)現(xiàn)
*
* @param treeView treeView
* @param item 節(jié)點(diǎn)對(duì)應(yīng)的item
*
* @return 每一節(jié)點(diǎn)對(duì)應(yīng)的個(gè)數(shù)
*/
- (NSInteger)treeView:(RATreeView *)treeView numberOfChildrenOfItem:(id)item
{
RaTreeModel *model = item;
if (item == nil) {
return self.modelArray.count;
}
return model.children.count;
}
/**
*必須實(shí)現(xiàn)的dataSource方法
*
* @param treeView treeView
* @param index 子節(jié)點(diǎn)的索引
* @param item 子節(jié)點(diǎn)索引對(duì)應(yīng)的item
*
* @return 返回 節(jié)點(diǎn)對(duì)應(yīng)的item
*/
- (id)treeView:(RATreeView *)treeView child:(NSInteger)index ofItem:(id)item {
RaTreeModel *model = item;
if (item==nil) {
return self.modelArray[index];
}
return model.children[index];
}
//cell的點(diǎn)擊方法
- (void)treeView:(RATreeView *)treeView didSelectRowForItem:(id)item {
//獲取當(dāng)前的層
NSInteger level = [treeView levelForCellForItem:item];
//當(dāng)前點(diǎn)擊的model
RaTreeModel *model = item;
NSLog(@"點(diǎn)擊的是第%ld層,name=%@",level,model.name);
}
//單元格是否可以編輯 默認(rèn)是YES
- (BOOL)treeView:(RATreeView *)treeView canEditRowForItem:(id)item {
return YES;
}
//編輯要實(shí)現(xiàn)的方法
- (void)treeView:(RATreeView *)treeView commitEditingStyle:(UITableViewCellEditingStyle)editingStyle forRowForItem:(id)item {
NSLog(@"編輯了實(shí)現(xiàn)的方法");
}
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
}
- (void)didReceiveMemoryWarning {
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}
@end
記住不要忘了設(shè)置數(shù)據(jù)源和代理 就這么搞定了
