先看最終實現(xiàn)效果:
自定義FlowLayout.gif
我們知道,UICollectionView在使用時,布局要通過UICollectionViewFlowLayout來實現(xiàn).那么UICollectionViewLayout是通過哪些方法實現(xiàn)布局的呢?
參考文章:
iOS自定義UICollectionViewlayout仿英雄聯(lián)盟選擇皮膚立體輪播效果展示
文中介紹比較明白,但是實現(xiàn)過程中,出現(xiàn)了兩邊圖片閃現(xiàn)的問題,如下
自定義FlowLayout閃現(xiàn)問題.gif
反復(fù)測試后,發(fā)現(xiàn)原因是,在布局中,由于圖片太過縮小所致.修改重載中的第一個方法如下,能順利解決.
const CGFloat ZDScale = 1.3f;
- (NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect{
CGRect visibleRect = CGRectMake(self.collectionView.contentOffset.x, 0, self.collectionView.width, self.collectionView.height);
NSArray *visibleAttriM = [super layoutAttributesForElementsInRect:visibleRect];
NSLog(@"%@", visibleAttriM);
[visibleAttriM enumerateObjectsUsingBlock:^(UICollectionViewLayoutAttributes *obj, NSUInteger idx, BOOL * _Nonnull stop) {
NSLog(@"%@", obj);
CGFloat leftM = obj.center.x - self.collectionView.contentOffset.x;
CGFloat halfCenterX = self.collectionView.width * 0.5;
CGFloat absOffset = fabs(leftM - halfCenterX) * 0.8;
NSLog(@"%.2f", absOffset);
CGFloat scale = 1 - absOffset / halfCenterX;
obj.transform3D = CATransform3DMakeScale(ZDScale * scale, ZDScale * scale, 1);
if (self.needAlpha) {
if (scale < 0.6) {
obj.alpha = 0.6;
}else if (scale > 0.99){
obj.alpha = 1.0;
}else{
obj.alpha = scale;
}
}
}];
NSArray *attriM = [[NSArray alloc] initWithArray:visibleAttriM copyItems:true];
return attriM;
}
詳情參考
Demo
