您的位置:首页 > 产品设计 > UI/UE

UICollectionView二级树展开

2015-11-02 09:30 295 查看
公司项目是社区类的,上周就下载了些社区类APP看了下,发现小区无忧首页的顶部蛮好玩,就试着做了一下,现在先把UICollectionView的二级树展开功能分享一下 .

1.效果图



2.创建子CollectionView

//
//  DeatilView.h
//  Spread
//
//  Created by City--Online on 15/10/30.
//  Copyright © 2015年 City--Online. All rights reserved.
//

#import <UIKit/UIKit.h>

typedef void(^DetailIndexPathBlock) (NSIndexPath *indexPath);

@interface DetailView : UIView

@property (nonatomic,copy) DetailIndexPathBlock detailIndexPathBlock;

- (instancetype)initWithFrame:(CGRect)frame withTitleArray:(NSArray *)titleArray;

@end


//
//  DeatilView.m
//  Spread
//
//  Created by City--Online on 15/10/30.
//  Copyright © 2015年 City--Online. All rights reserved.
//

#import "DetailView.h"

static const int columns=4;
static const float rowHeight=30.0;
//static const int rows=2;
@interface DetailView ()<UICollectionViewDelegate,UICollectionViewDataSource,UICollectionViewDelegateFlowLayout>

@property (nonatomic,strong) UICollectionView *collectionView;

@property (nonatomic,strong) NSArray *titleArray;
@end

@implementation DetailView

- (instancetype)initWithFrame:(CGRect)frame withTitleArray:(NSArray *)titleArray
{
_titleArray=titleArray;
return [self initWithFrame:frame];
}

- (instancetype)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if (self) {

UICollectionViewFlowLayout  *collectionViewFlowLayout=[[UICollectionViewFlowLayout alloc]init];
collectionViewFlowLayout.minimumInteritemSpacing=0.0;
collectionViewFlowLayout.minimumLineSpacing=0.0;
collectionViewFlowLayout.scrollDirection = UICollectionViewScrollDirectionVertical;
collectionViewFlowLayout.sectionInset = UIEdgeInsetsMake(0.0, 0.0, 0, 0.0);

float columuWidth=self.bounds.size.width/columns;
collectionViewFlowLayout.itemSize=CGSizeMake(columuWidth, rowHeight);
collectionViewFlowLayout.estimatedItemSize=CGSizeMake(columuWidth, rowHeight);

collectionViewFlowLayout.scrollDirection=UICollectionViewScrollDirectionVertical;

collectionViewFlowLayout.headerReferenceSize=CGSizeMake(0, 0);
collectionViewFlowLayout.footerReferenceSize=CGSizeMake(0, 0);

_collectionView=[[UICollectionView alloc]initWithFrame:self.bounds collectionViewLayout:collectionViewFlowLayout];
_collectionView.backgroundColor=[UIColor whiteColor];
_collectionView.delegate=self;
_collectionView.dataSource=self;
_collectionView.allowsSelection=YES;
//        _collectionView.allowsMultipleSelection=YES;

[_collectionView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:@"cell"];
[self addSubview:_collectionView];
}
return self;
}

- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView
{
return 1;
}

- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
return _titleArray.count;
}

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
UICollectionViewCell *cell =[collectionView dequeueReusableCellWithReuseIdentifier:@"cell" forIndexPath:indexPath];
cell.backgroundColor = [UIColor colorWithRed:arc4random()%256/ 255.0  green:arc4random()%256 / 255.0 blue:arc4random()% 256 / 255.0  alpha:1];
return cell;
}
- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath
{
if (self.detailIndexPathBlock != nil) {
self.detailIndexPathBlock(indexPath);
}
}

@end


3.主视图

//
//  MainView.h
//  Spread
//
//  Created by City--Online on 15/10/30.
//  Copyright © 2015年 City--Online. All rights reserved.
//

#import <UIKit/UIKit.h>

@interface MainView : UIView

- (instancetype)initWithFrame:(CGRect)frame withTitleArray:(NSArray *)mainArray;

@end


//
//  MainView.m
//  Spread
//
//  Created by City--Online on 15/10/30.
//  Copyright © 2015年 City--Online. All rights reserved.
//

#import "MainView.h"
#import "DetailView.h"

static const int columns=4;

@interface MainView ()<UICollectionViewDataSource,UIBarPositioningDelegate,UICollectionViewDelegateFlowLayout>

@property (nonatomic,strong) UICollectionView *collectionView;

@property (nonatomic,strong) NSArray *mainArray;

@property (nonatomic,strong) NSMutableArray *detailArray;

@property (nonatomic,strong) NSIndexPath *selectIndexPath;

@property (nonatomic,strong) DetailView *detailView;

@property (nonatomic,assign) bool    *IsSpread;

@end

@implementation MainView

- (instancetype)initWithFrame:(CGRect)frame withTitleArray:(NSArray *)mainArray
{
_mainArray=mainArray;
_selectIndexPath=nil;
return [self initWithFrame:frame];
}
- (instancetype)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if (self) {
UICollectionViewFlowLayout  *collectionViewFlowLayout=[[UICollectionViewFlowLayout alloc]init];
collectionViewFlowLayout.minimumInteritemSpacing=1.0;
collectionViewFlowLayout.minimumLineSpacing=0.0;
collectionViewFlowLayout.scrollDirection = UICollectionViewScrollDirectionVertical;
collectionViewFlowLayout.sectionInset = UIEdgeInsetsMake(0.0, 0.0, 0, 0.0);
float columuWidth=(self.bounds.size.width-columns+1)/columns;
collectionViewFlowLayout.itemSize=CGSizeMake(columuWidth, columuWidth);
collectionViewFlowLayout.estimatedItemSize=CGSizeMake(columuWidth, columuWidth);
collectionViewFlowLayout.scrollDirection=UICollectionViewScrollDirectionVertical;
collectionViewFlowLayout.headerReferenceSize=CGSizeMake(0, 0);
collectionViewFlowLayout.footerReferenceSize=CGSizeMake(0, 0);
_collectionView=[[UICollectionView alloc] initWithFrame:self.bounds collectionViewLayout:collectionViewFlowLayout];
_collectionView.backgroundColor=[UIColor whiteColor];
_collectionView.delegate=self;
_collectionView.dataSource=self;
_collectionView.allowsSelection=YES;
[_collectionView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:@"cell"];
[_collectionView registerClass:[UICollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:@"footer"];
[self addSubview:_collectionView];
}
return self;
}

- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
return columns;
}

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
UICollectionViewCell *cell =[collectionView dequeueReusableCellWithReuseIdentifier:@"cell" forIndexPath:indexPath];

cell.backgroundColor=indexPath.section%2? [UIColor redColor]:[UIColor yellowColor];
if (indexPath.section*columns+indexPath.row>_mainArray.count) {
cell.backgroundColor=[UIColor clearColor];
}
return cell;
}
- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath
{

if (_selectIndexPath!=indexPath&&_selectIndexPath!=nil) {
_IsSpread=YES;
}
else
{
_IsSpread=!_IsSpread;
}

if (!_IsSpread) {
//改变主CollectionView视图Frame和子CollectionView的Frame
self.frame=CGRectMake(0, 0, self.bounds.size.width, self.bounds.size.width);
}
else
{
self.frame = CGRectMake(0, 0, self.bounds.size.width, self.bounds.size.width+((int)(_detailArray.count+3)/4)*30.0);
}

_collectionView.frame = self.frame;
_selectIndexPath=indexPath;
//改变数据源
_detailArray=[(@[@"AAA",@"BBB",@"CCC",@"DDD",@"EEE"]) mutableCopy];
[_collectionView reloadData];

}
- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView
{
return (_mainArray.count+columns-1)/4;
}
//针对每个分区的页眉和页脚, 返回对应的视图对象, 重用的
- (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath
{

UICollectionReusableView *footerView = [collectionView dequeueReusableSupplementaryViewOfKind:kind withReuseIdentifier:@"footer" forIndexPath:indexPath];

//将第二个视图控制器添加到区尾上
if (_detailView!=nil) {
[_detailView removeFromSuperview];
_detailView=nil;
}
_detailView =[[DetailView alloc] initWithFrame:CGRectMake(0, 0, self.bounds.size.width, ((int)(5+3)/4)*30.0) withTitleArray:_detailArray];
_detailView.detailIndexPathBlock=^(NSIndexPath *indexPath)
{
NSLog(@"%@",indexPath);
};
[footerView addSubview:_detailView];

return footerView;
}

- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout referenceSizeForFooterInSection:(NSInteger)section
{
if (section==_selectIndexPath.section&&_IsSpread) {
return CGSizeMake(self.bounds.size.width, ((int)(_detailArray.count+3)/4)*30.0) ;
}
else
{
return CGSizeZero;
}
}
@end


4.调用

//
//  ViewController.m
//  Spread
//
//  Created by City--Online on 15/10/30.
//  Copyright © 2015年 City--Online. All rights reserved.
//

#import "ViewController.h"
#import "MainView.h"
#import "DetailView.h"

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
[super viewDidLoad];
MainView *mainView=[[MainView alloc]initWithFrame:CGRectMake(0, 0, self.view.bounds.size.width, self.view.bounds.size.width) withTitleArray:@[@"1",@"2",@"3",@"4",@"5",@"6"]];
[self.view addSubview:mainView];
}

- (void)didReceiveMemoryWarning {
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}

@end


5.结果图







今天又添加了ScrollView分页 demo地址:https://github.com/ywcui/Spread
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: