UICollectionView基礎(chǔ)
- UICollectionViewFlowLayout:視圖布局對(duì)象(流水布局:一行排滿,自動(dòng)排到下行)吗讶,繼承自UICollectionViewLayout篓像。UICollectionViewLayout內(nèi)有一個(gè)collectionView屬性动遭,所有的視圖布局對(duì)象都繼承自UICollectionViewLayout善茎。
- 若我們要自定義布局對(duì)象明垢,我們一般繼承UICollectionViewFlowLayout蚣常,然后重寫里面的一些方法就可以了。
- 需要實(shí)現(xiàn)三個(gè)協(xié)議痊银;UICollectionViewDataSource(數(shù)據(jù)源)抵蚊、UICollectionViewDelegateFlowLayout(視圖布局),自定義布局需要實(shí)現(xiàn)UICollectionViewDataSource、UICollectionViewDelegate兩個(gè)協(xié)議即可贞绳。
一谷醉、自定義線性布局
- 首先要繼承與流水布局UICollectionViewFlowLayout
#import <UIKit/UIKit.h>
@interface LineCollectionViewLayout : UICollectionViewFlowLayout
@end
#import "LineCollectionViewLayout.h"
@implementation LineCollectionViewLayout
- (instancetype)init{
if (self = [super init]) {
}
return self;
}
/**
* 用來做布局的初始化操作(不建議在init方法中進(jìn)行布局的初始化操作)
- 注意:一定要調(diào)用[super prepareLayout]
*/
- (void)prepareLayout{
[super prepareLayout];
// 水平滾動(dòng)
self.scrollDirection = UICollectionViewScrollDirectionHorizontal;
// 設(shè)置內(nèi)邊距
CGFloat inset = (self.collectionView.frame.size.width - self.itemSize.width) * 0.5;
self.sectionInset = UIEdgeInsetsMake(0, inset, 0, inset);
}
/**
* 這個(gè)方法的返回值是一個(gè)數(shù)組(數(shù)組里面存放著rect范圍內(nèi)所有元素的布局屬性)
* 這個(gè)數(shù)組中存放的都是UICollectionViewLayoutAttributes對(duì)象
* 這個(gè)方法的返回值決定了rect范圍內(nèi)所有元素的排布(frame)*/
/**
UICollectionViewLayoutAttributes *attrs;
1.一個(gè)cell對(duì)應(yīng)一個(gè)UICollectionViewLayoutAttributes對(duì)象
2.UICollectionViewLayoutAttributes對(duì)象決定了cell的frame
*/
- (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect{
// 獲得super已經(jīng)計(jì)算好的布局屬性
NSArray *array = [super layoutAttributesForElementsInRect:rect];
// 計(jì)算collectionView最中心點(diǎn)的x值
CGFloat centerX = self.collectionView.contentOffset.x + self.collectionView.frame.size.width * 0.5;
// 在原有布局屬性的基礎(chǔ)上,進(jìn)行微調(diào)
for (UICollectionViewLayoutAttributes *attrs in array) {
// cell的中心點(diǎn)x 和 collectionView最中心點(diǎn)的x值 的間距
CGFloat delta = ABS(attrs.center.x - centerX);
// 根據(jù)間距值 計(jì)算 cell的縮放比例
CGFloat scale = 1 - delta / self.collectionView.frame.size.width;
// 設(shè)置縮放比例
attrs.transform = CGAffineTransformMakeScale(scale, scale);
}
return array;
}
/**
* 當(dāng)collectionView的顯示范圍發(fā)生改變的時(shí)候冈闭,是否需要重新刷新布局
* 一旦重新刷新布局俱尼,就會(huì)重新調(diào)用下面的方法:
1.prepareLayout
2.layoutAttributesForElementsInRect:方法
*/
- (BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds{
return YES;
}
/**
* 這個(gè)方法的返回值,就決定了collectionView停止?jié)L動(dòng)時(shí)的偏移量
* proposedContentOffset:原本情況下萎攒,collectionView停止?jié)L動(dòng)時(shí)最終的偏移量
* velocity:滾動(dòng)速率遇八,通過這個(gè)參數(shù)可以了解滾動(dòng)的方向
*/
- (CGPoint)targetContentOffsetForProposedContentOffset:(CGPoint)proposedContentOffset withScrollingVelocity:(CGPoint)velocity{
// 計(jì)算出最終顯示的矩形框
CGRect rect;
rect.origin.y = 0;
rect.origin.x = proposedContentOffset.x;
rect.size = self.collectionView.frame.size;
// 獲得super已經(jīng)計(jì)算好的布局屬性
NSArray *array = [super layoutAttributesForElementsInRect:rect];
// 計(jì)算collectionView最中心點(diǎn)的x值
CGFloat centerX = proposedContentOffset.x + self.collectionView.frame.size.width * 0.5;
// 存放最小的間距值
CGFloat minDelta = MAXFLOAT;
for (UICollectionViewLayoutAttributes *attrs in array) {
if (ABS(minDelta) > ABS(attrs.center.x - centerX)) {
minDelta = attrs.center.x - centerX;
}
}
// 修改原有的偏移量
proposedContentOffset.x += minDelta;
return proposedContentOffset;
}
@end
自定義環(huán)形布局
- 同樣要繼承與流水布局UICollectionViewFlowLayout
#import <UIKit/UIKit.h>
@interface CircleCollectionViewLayout : UICollectionViewFlowLayout
@end
#import "CircleCollectionViewLayout.h"
@interface CircleCollectionViewLayout()
/** 布局屬性 */
@property (nonatomic, strong) NSMutableArray *attrsArray;
@end
@implementation CircleCollectionViewLayout
/** 懶加載 */
- (NSMutableArray *)attrsArray
{
if (!_attrsArray) {
_attrsArray = [NSMutableArray array];
}
return _attrsArray;
}
- (void)prepareLayout
{
[super prepareLayout];
[self.attrsArray removeAllObjects];
NSInteger count = [self.collectionView numberOfItemsInSection:0];
for (int i = 0; i < count; i++) {
NSIndexPath *indexPath = [NSIndexPath indexPathForItem:i inSection:0];
UICollectionViewLayoutAttributes *attrs = [self layoutAttributesForItemAtIndexPath:indexPath];
[self.attrsArray addObject:attrs];
}
}
- (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect
{
return self.attrsArray;
}
/**
* 這個(gè)方法需要返回indexPath位置對(duì)應(yīng)cell的布局屬性
*/
- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath
{
NSInteger count = [self.collectionView numberOfItemsInSection:0];
CGFloat radius = 70;
// 圓心的位置
CGFloat oX = self.collectionView.frame.size.width * 0.5;
CGFloat oY = self.collectionView.frame.size.height * 0.5;
UICollectionViewLayoutAttributes *attrs = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];
attrs.size = CGSizeMake(50, 50);
if (count == 1) {
attrs.center = CGPointMake(oX, oY);
} else {
CGFloat angle = (2 * M_PI / count) * indexPath.item;
CGFloat centerX = oX + radius * sin(angle);
CGFloat centerY = oY + radius * cos(angle);
attrs.center = CGPointMake(centerX, centerY);
}
return attrs;
}
@end
對(duì)自定義布局的使用
// 創(chuàng)建布局
CircleCollectionViewLayout *layout = [[CircleCollectionViewLayout alloc] init];
// 創(chuàng)建CollectionView
CGFloat collectionW = self.view.frame.size.width;
CGFloat collectionH = 200;
CGRect frame = CGRectMake(0, 150, collectionW, collectionH);
UICollectionView *collectionView = [[UICollectionView alloc] initWithFrame:frame collectionViewLayout:layout];
collectionView.dataSource = self;
collectionView.delegate = self;
[self.view addSubview:collectionView];
self.collectionView = collectionView;
// 注冊(cè)
[collectionView registerNib:[UINib nibWithNibName:NSStringFromClass([PhotoCell class]) bundle:nil] forCellWithReuseIdentifier:photoId];
- ****增加 touchesBegan:方法,通過點(diǎn)擊讓兩種布局相互轉(zhuǎn)換****
- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
if ([self.collectionView.collectionViewLayout isKindOfClass:[LineCollectionViewLayout class]]) {
[self.collectionView setCollectionViewLayout:[[CircleCollectionViewLayout alloc] init] animated:YES];
} else {
LineCollectionViewLayout *layout = [[LineCollectionViewLayout alloc] init];
layout.itemSize = CGSizeMake(100, 100);
[self.collectionView setCollectionViewLayout:layout animated:YES];
}
}
最后編輯于 :
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者