我正在使用一个水平滑动的collectionview,并尝试执行单元格的自定义布局,类似于iphone“应用程序更近”。我不知道如何达到这样的效果,或者从哪里开始,所以我希望得到一些指导。 我在解释自己的时候非常糟糕,所以我试图说明所需的效果,从现在的行为,直到它应该如何表现。Collectionview自定义单元格布局/行为
提前致谢!
我正在使用一个水平滑动的collectionview,并尝试执行单元格的自定义布局,类似于iphone“应用程序更近”。我不知道如何达到这样的效果,或者从哪里开始,所以我希望得到一些指导。 我在解释自己的时候非常糟糕,所以我试图说明所需的效果,从现在的行为,直到它应该如何表现。Collectionview自定义单元格布局/行为
提前致谢!
我也象this.This了类似的观点曾任职是我的项目的github上link。 您的要求和我的看法之间的唯一区别是您需要放大左侧的单元格。为了实现这个视图,我遇到了两个主要问题:
1)当两个单元格(左侧单元格和右侧单元格)被平等地公开时停止滚动,因为我已将以下代码包含在我的CollectionView.m文件中。
- (void)scrollViewWillEndDragging:(UIScrollView *)scrollView withVelocity:(CGPoint)velocity targetContentOffset:(inout CGPoint *)targetContentOffset
{
float pageWidth = 240; // width + space
float currentOffset = scrollView.contentOffset.x;
float targetOffset = targetContentOffset->x;
float newTargetOffset = 0;
if (targetOffset > currentOffset)
newTargetOffset = ceilf(currentOffset/pageWidth) * pageWidth;
else
newTargetOffset = floorf(currentOffset/pageWidth) * pageWidth;
if (newTargetOffset < 0)
newTargetOffset = 0;
else if (newTargetOffset > scrollView.contentSize.width)
newTargetOffset = scrollView.contentSize.width;
targetContentOffset->x = currentOffset;
[scrollView setContentOffset:CGPointMake(newTargetOffset, 0) animated:YES];
int index = newTargetOffset/pageWidth;
if (index == 0) { // If first index
CollectionViewCell *cell =(CollectionViewCell *) [self cellForItemAtIndexPath:[NSIndexPath indexPathForItem:index inSection:0]];
cell.transform = CGAffineTransformIdentity;
cell = (CollectionViewCell *)[self cellForItemAtIndexPath:[NSIndexPath indexPathForItem:index + 1 inSection:0]];
//cell.transform = TRANSFORM_CELL_VALUE;
}else{
CollectionViewCell *cell =(CollectionViewCell *)[self cellForItemAtIndexPath:[NSIndexPath indexPathForItem:index inSection:0]];
//cell.transform = CGAffineTransformIdentity;
index --; // left
cell =(CollectionViewCell *)[self cellForItemAtIndexPath:[NSIndexPath indexPathForItem:index inSection:0]];
// cell.transform = TRANSFORM_CELL_VALUE;
index ++;
index ++; // right
cell = (CollectionViewCell *)[self cellForItemAtIndexPath:[NSIndexPath indexPathForItem:index inSection:0]];
//cell.transform = TRANSFORM_CELL_VALUE;
}
}
2)其次,你需要提供适当的约束到小区来实现的要求,为我所用UICollectionViewFlowLayout类。 在这我给可见细胞提供适当的约束。 FlowLayout中的代码看起来象下面这样:
#import "CollectionLayout.h"
@implementation CollectionLayout
{
NSIndexPath *mainIndexPath;
}
-(void)prepareLayout{
[super prepareLayout];
}
-(UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath{
UICollectionViewLayoutAttributes *attributes = [[super layoutAttributesForItemAtIndexPath:indexPath] copy];
CATransform3D theTransform = CATransform3DIdentity;
const CGFloat theScale = 1.05f;
theTransform = CATransform3DScale(theTransform, theScale, theScale, 1.0f);
attributes.transform3D=theTransform;
return attributes;
}
- (BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds {
return YES;
}
- (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect{
NSArray *attributesSuper = [super layoutAttributesForElementsInRect:rect];
NSArray *attributes = [[NSArray alloc]initWithArray:attributesSuper copyItems:YES];
NSArray *cellIndices = [self.collectionView indexPathsForVisibleItems];
NSIndexPath *neededIndexPath = [NSIndexPath indexPathForRow:0 inSection:0];
for(NSInteger i=0;i<cellIndices.count;i++){
NSIndexPath *indexPath = [cellIndices objectAtIndex:i];
if(indexPath.row>neededIndexPath.row){
neededIndexPath=indexPath;
}
NSLog(@"%ld,%ld",(long)indexPath.row,(long)indexPath.section);
}
if(cellIndices.count==0){
mainIndexPath = [NSIndexPath indexPathForRow:0 inSection:0];
}else{
if(neededIndexPath.row>0)
mainIndexPath = [NSIndexPath indexPathForRow:neededIndexPath.row-1 inSection:0];
}
for (UICollectionViewLayoutAttributes *attribute in attributes)
{
[self applyTransformToLayoutAttributes:attribute];
}
return attributes;
}
-(void) applyTransformToLayoutAttributes:(UICollectionViewLayoutAttributes *)attribute{
if(attribute.indexPath.row == mainIndexPath.row){
attribute.size = CGSizeMake(self.collectionView.bounds.size.width-40, self.collectionView.bounds.size.height);
attribute.zIndex+=10;
}
}
#pragma mark - Transform related
@end
一旦你从我的github上的链接克隆的项目,你会很容易明白我做了什么,你可以编写自己的代码来实现你的view.You将只需要提供你的约束在这部分代码中。 您还需要为每个单元格正确调整zIndex。
-(void) applyTransformToLayoutAttributes:(UICollectionViewLayoutAttributes *)attribute{
if(attribute.indexPath.row == mainIndexPath.row){
attribute.size = CGSizeMake(self.collectionView.bounds.size.width-40, self.collectionView.bounds.size.height);
attribute.zIndex+=10;
}
}
我希望你明白了我的观点。
注意:我已经在iPhone 5s上测试过github代码,您可能需要稍微调整一下其他设备。
非常感谢!这是一个伟大的灵感,我设法做我自己的变种,它的工作和预期一致。这是伟大的工作! – Imbue
我想你应该可以看到这里所示的例子https://github.com/nicklockwood/iCarousel,在这里,你会发现许多类型的效果,那么你会得到ATLEAST知道如何开始,做些什么 –
谢谢很多!这看起来像一个自定义效果的完全正确的引擎。 – Imbue