OStack程序员社区-中国程序员成长平台

标题: ios - UICollectionview 水平和垂直滚动 [打印本页]
作者: 菜鸟教程小白    时间: 2022-12-12 14:50
标题: ios - UICollectionview 水平和垂直滚动

我必须构建一个可水平和垂直滚动的 UICollectionView，我知道网格布局只能沿一个轴水平或垂直滚动​​，所以我阅读了一些帖子并尝试了不同的解决方案，但最简单的是将UIScrollView 中的 UICollectionview。这样，CollectionView 垂直滚动，UIScrollView 水平滚动。 问题是垂直滚动很困难，不流畅，并且经常停止，直到您再次点击并再次拖动。 你能提出一个解决方案吗？谢谢

UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc] init];
UIScrollView *backgroundScroll = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, [UIScreen mainScreen].bounds.size.width, [UIScreen mainScreen].bounds.size.height)];
backgroundScroll.scrollEnabled = YES;     
[self.view addSubview:backgroundScroll];
_collectionView = [[UICollectionView alloc] initWithFrame:CGRectMake(10, 15, 1020, [UIScreen mainScreen].bounds.size.height - 35) collectionViewLayout:layout];
[backgroundScroll addSubview:_collectionView];
_collectionView.contentInset = UIEdgeInsetsMake(0, 0, 50, 0);         
_collectionView.scrollEnabled = YES;

并且我已经实现了方法:

- (void)viewDidLayoutSubviews {
    backgroundScroll.contentSize = self.collectionView.frame.size;
}


Best Answer-推荐答案


这样做的方法是创建一个自定义的 UICollectionViewLayout 子类。

我最近不得不这样做。

让我去拿文件……一秒钟……

首先，您不能轻易地为此使用 UICollectionViewFlowLayout 的子类。流式布局旨在使内容适应一个方向并在另一个方向滚动。这不是你想要的。

创建一个自定义布局来为您做到这一点并不难。

头文件

@interface GridCollectionViewLayout : UICollectionViewLayout

// properties to configure the size and spacing of the grid
@property (nonatomic) CGSize itemSize;
@property (nonatomic) CGFloat itemSpacing;

// this method was used because I was switching between layouts    
- (void)configureCollectionViewForLayoutUICollectionView *)collectionView;

@end

实现

#import "GridCollectionViewLayout.h"

@interface GridCollectionViewLayout ()

@property (nonatomic, strong) NSDictionary *layoutInfo;

@end

@implementation GridCollectionViewLayout

为代码和界面构建器创建初始化...

- (id)init
{
    self = [super init];
    if (self) {
        [self setup];
    }

    return self;
}

- (id)initWithCoderNSCoder *)aDecoder
{
    self = [super init];
    if (self) {
        [self setup];
    }

    return self;
}

设置默认属性值...

- (void)setup
{
    self.itemSize = CGSizeMake(50.0, 50.0);
    self.itemSpacing = 10.0;
}

使用它是因为我在不同的布局之间进行更改，但它显示了设置布局所需的内容..

- (void)configureCollectionViewForLayoutUICollectionView *)collectionView
{
    collectionView.alwaysBounceHorizontal = YES;

    [collectionView setCollectionViewLayout:self animated:NO];
}

必需的方法。这会迭代项目并为每个项目创建帧 CGRect。将它们保存到字典中。

- (void)prepareLayout
{
    NSMutableDictionary *cellLayoutInfo = [NSMutableDictionary dictionary];

    NSInteger sectionCount = [self.collectionView numberOfSections];
    NSIndexPath *indexPath = [NSIndexPath indexPathForItem:0 inSection:0];

    for (NSInteger section = 0; section < sectionCount; section++) {
        NSInteger itemCount = [self.collectionView numberOfItemsInSection:section];

        for (NSInteger item = 0; item < itemCount; item++) {
            indexPath = [NSIndexPath indexPathForItem:item inSection:section];

            UICollectionViewLayoutAttributes *itemAttributes =
            [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];
            itemAttributes.frame = [self frameForAssessmentAtIndexPath:indexPath];

            cellLayoutInfo[indexPath] = itemAttributes;
        }
    }

    self.layoutInfo = cellLayoutInfo;
}

这是一种在给定索引处快速获取帧的便捷方法。

- (CGRect)frameForIndexPathNSIndexPath *)indexPath
{
    NSInteger column = indexPath.section;
    NSInteger row = indexPath.item;

    CGFloat originX = column * (self.itemSize.width + self.itemSpacing);
    CGFloat originY = row * (self.itemSize.height + self.itemSpacing);

    return CGRectMake(originX, originY, self.itemSize.width, self.itemSize.height);
}

计算内容大小所需的方法。这只是将部分或项目的数量乘以大小和间距属性。这是允许双向滚动的原因，因为内容大小可以大于 Collection View 的宽度和高度。

- (CGSize)collectionViewContentSize
{
    NSInteger sectionCount = [self.collectionView numberOfSections];

    if (sectionCount == 0) {
        return CGSizeZero;
    }

    NSInteger itemCount = [self.collectionView numberOfItemsInSection:0];

    CGFloat width = (self.itemSize.width + self.itemSpacing) * sectionCount - self.itemSpacing;
    CGFloat height = (self.itemSize.height + self.itemSpacing) * itemCount - self.itemSpacing;

    return CGSizeMake(width, height);
}

必需的方法。这些告诉 Collection View 每个项目需要放置在哪里。

- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPathNSIndexPath *)indexPath
{
    return self.layoutInfo[indexPath];
}

- (NSArray *)layoutAttributesForElementsInRectCGRect)rect
{
    NSMutableArray *allAttributes = [NSMutableArray array];

    [self.layoutInfo enumerateKeysAndObjectsUsingBlock:^(NSIndexPath *indexPath, UICollectionViewLayoutAttributes *attributes, BOOL *stop) {
        if (CGRectIntersectsRect(attributes.frame, rect)) {
            [allAttributes addObject:attributes];
        }
    }];

    return allAttributes;
}

@end

当然，这种情况下的布局是针对我个人问题的。

布局的工作方式是让每个部分都是一列，每个部分中的项目都是行。所以像这样......

xy = item y in section x

00 10 20 30 ...
01 11 21 31 ...
02 12 22 32 ...
.  .  .  .
.  .  .  .
.  .  .  .

显然，可以有无限数量的部分或部分中的项目，因此我必须双向滚动。

一旦你创建了你的布局类，你只需要将它设置为你的 Collection View 的布局。您可以在代码 collectionView.collectionViewLayout = myLayout 中执行此操作，也可以在 Interface Builder 中使用 Collection View 上的“layout”属性执行此操作。

关于ios - UICollectionview 水平和垂直滚动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29302772/





欢迎光临 OStack程序员社区-中国程序员成长平台 (https://ostack.cn/) Powered by Discuz! X3.4