【问题标题】:View with continuous scroll; both horizontal and vertical连续滚动查看;水平和垂直
【发布时间】:2013-03-11 01:31:36
【问题描述】:

我已经为这个任务苦苦挣扎了很长一段时间了。我想开发的是一个滚动视图或集合视图,它可以在垂直和水平方向上连续滚动。

这是我认为应该是什么样子的图像。透明框是从内存中重新加载的视图/单元格。一旦视图/单元格离开屏幕,它就应该被重新用于即将到来的新单元格......就像UITableViewController 的工作原理一样。

我知道 UICollectionView 只能无限滚动水平或垂直,不能同时滚动。但是,我不知道如何使用UIScrollView 来做到这一点。 我尝试了代码attached to an answer on this question,我可以让它重新创建视图(例如 % 20),但这并不是我真正需要的......此外,它不是连续的。

我知道这是可能的,因为 HBO Go 应用可以做到这一点。我想要完全相同的功能。

我的问题:我怎样才能实现我的目标?是否有任何指南/教程可以告诉我如何操作?我找不到。

【问题讨论】:

  • 可重用性计划是什么?我的意思是,这些图块是相同的还是重复的图像(可能只是不同的数字标签)?这是最难的部分,滚动部分应该很简单。
  • 瓷砖是一样的。例如。如果图块 1 是一朵红玫瑰的图像,那么下次显示图块 1 时,它将是完全相同的玫瑰。与HBO GO 应用程序完全相同。基本上,它应该从带有 UIViews 或 UIButtons 或类似的 NSArray 加载图块。它应该很简单,但是我似乎不知道该怎么做。
  • 我知道该怎么做。我会尽快发布一些代码。
  • 你真的需要它是无限的吗?我已经用一个重复 20 个单元格的集合视图(如您的示例中的 4 行 5 个项目)完成了此操作,但如果我让它看起来每个方向有超过 1000 行,滚动就会变得生涩。但即使每个方向都有 1000 个,它似乎也是无限的。
  • @pe60t0 好的。我期待阅读您的示例。

标签: ios uiscrollview uicollectionview infinite-scroll


【解决方案1】:

您可以通过在距中心一定距离后使用重新居中UIScrollView 的技术获得无限滚动。首先,您需要使contentSize 足够大,以便您可以滚动一点,所以我返回 4 倍于我的部分中的项目数和 4 倍的部分数,并在 cellForItemAtIndexPath 方法中使用 mod 运算符将正确的索引放入我的数组中。然后,您必须在 UICollectionView 的子类中覆盖 layoutSubviews 以进行重新居中(这在 WWDC 2011 视频“高级滚动视图技术”中进行了演示)。下面是具有集合视图(在 IB 中设置)作为子视图的控制器类:

#import "ViewController.h"
#import "MultpleLineLayout.h"
#import "DataCell.h"

@interface ViewController ()
@property (weak,nonatomic) IBOutlet UICollectionView *collectionView;
@property (strong,nonatomic) NSArray *theData;
@end

@implementation ViewController

- (void)viewDidLoad {
    self.theData = @[@[@"1",@"2",@"3",@"4",@"5"], @[@"6",@"7",@"8",@"9",@"10"],@[@"11",@"12",@"13",@"14",@"15"],@[@"16",@"17",@"18",@"19",@"20"]];
    MultpleLineLayout *layout = [[MultpleLineLayout alloc] init];
    self.collectionView.collectionViewLayout = layout;
    self.collectionView.showsHorizontalScrollIndicator = NO;
    self.collectionView.showsVerticalScrollIndicator = NO;
    layout.scrollDirection = UICollectionViewScrollDirectionHorizontal;
    self.view.backgroundColor = [UIColor blackColor];
    [self.collectionView registerClass:[DataCell class] forCellWithReuseIdentifier:@"DataCell"];
    [self.collectionView reloadData];
}


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

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

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView  cellForItemAtIndexPath:(NSIndexPath *)indexPath {

    DataCell *cell = [collectionView  dequeueReusableCellWithReuseIdentifier:@"DataCell" forIndexPath:indexPath];
    cell.label.text = self.theData[indexPath.section %4][indexPath.row %5];
    return cell;
}

- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath {
   // UICollectionViewCell *item = [collectionView cellForItemAtIndexPath:indexPath];
    NSLog(@"%@",indexPath);

}

这是UICollectionViewFlowLayout 子类:

#define space 5
#import "MultpleLineLayout.h"

@implementation MultpleLineLayout { // a subclass of UICollectionViewFlowLayout
    NSInteger itemWidth;
    NSInteger itemHeight;
}

-(id)init {
    if (self = [super init]) {
        itemWidth = 60;
        itemHeight = 60;
    }
    return self;
}

-(CGSize)collectionViewContentSize {
    NSInteger xSize = [self.collectionView numberOfItemsInSection:0] * (itemWidth + space); // "space" is for spacing between cells.
    NSInteger ySize = [self.collectionView numberOfSections] * (itemHeight + space);
    return CGSizeMake(xSize, ySize);
}

- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)path {
    UICollectionViewLayoutAttributes* attributes = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:path];
    attributes.size = CGSizeMake(itemWidth,itemHeight);
    int xValue = itemWidth/2 + path.row * (itemWidth + space);
    int yValue = itemHeight + path.section * (itemHeight + space);
    attributes.center = CGPointMake(xValue, yValue);
    return attributes;
}


-(NSArray*)layoutAttributesForElementsInRect:(CGRect)rect {
    NSInteger minRow =  (rect.origin.x > 0)?  rect.origin.x/(itemWidth + space) : 0; // need to check because bounce gives negative values  for x.
    NSInteger maxRow = rect.size.width/(itemWidth + space) + minRow;
    NSMutableArray* attributes = [NSMutableArray array];
    for(NSInteger i=0 ; i < self.collectionView.numberOfSections; i++) {
        for (NSInteger j=minRow ; j < maxRow; j++) {
            NSIndexPath* indexPath = [NSIndexPath indexPathForItem:j inSection:i];
            [attributes addObject:[self layoutAttributesForItemAtIndexPath:indexPath]];
        }
    }
    return attributes;
}

最后,这是UICollectionView的子类:

-(void)layoutSubviews {
    [super layoutSubviews];
    CGPoint currentOffset = self.contentOffset;
    CGFloat contentWidth = self.contentSize.width;
    CGFloat contentHeight = self.contentSize.height;
    CGFloat centerOffsetX = (contentWidth - self.bounds.size.width)/ 2.0;
    CGFloat centerOffsetY = (contentHeight - self.bounds.size.height)/ 2.0;
    CGFloat distanceFromCenterX = fabsf(currentOffset.x - centerOffsetX);
    CGFloat distanceFromCenterY = fabsf(currentOffset.y - centerOffsetY);

    if (distanceFromCenterX > contentWidth/4.0) { // this number of 4.0 is arbitrary
        self.contentOffset = CGPointMake(centerOffsetX, currentOffset.y);
    }
    if (distanceFromCenterY > contentHeight/4.0) {
        self.contentOffset = CGPointMake(currentOffset.x, centerOffsetY);
    }
}

【讨论】:

  • 我也尝试过这个想法,但是当我制作一个示例项目时,它似乎在加载时加载了所有视图,对吗?它变得非常缓慢。 (但是我尝试使用 100.000 而不是 1000)。有没有办法欺骗UICollectionView 认为它显示的是第 10 行和第 10 行,而实际上它显示的是 510 左右?如果是这样,可以让它无限。
  • @PaulPeelen,不,它不应该一次加载所有视图——就像表格视图一样,它只创建足够的单元格以显示在屏幕上。如果每个方向有超过 1000 个单元格,我不确定为什么这会变得生涩,但是 1000 个似乎足以让用户觉得它是无限的。我制作的这个示例项目加载或滚动并不慢。
  • @PaulPeelen,我编辑了我的帖子以展示如何以真正无限的方式做到这一点。我只需要返回我实际数组大小的 4 倍就可以做到这一点。看起来完全无缝。
  • 太棒了,我已经走了同样的路,但还没有完成。我正在自己工作UICollectionView。明天我会试试你的代码。因为这不是我们第一次接触,如果你喜欢.. 加我 Skype =)
  • 保罗,博文在哪里?
【解决方案2】:

@updated for swift 3 并更改了 maxRow 的计算方式,否则最后一列将被截断并可能导致错误

import UIKit

class NodeMap : UICollectionViewController {
    var rows = 10
    var cols = 10

    override func viewDidLoad(){
        self.collectionView!.collectionViewLayout = NodeLayout(itemWidth: 400.0, itemHeight: 300.0, space: 5.0)
    }

    override func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return rows
    }

    override func numberOfSections(in collectionView: UICollectionView) -> Int {
        return cols
    }

    override func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        return collectionView.dequeueReusableCell(withReuseIdentifier: "node", for: indexPath)
    }
}

class NodeLayout : UICollectionViewFlowLayout {
    var itemWidth : CGFloat
    var itemHeight : CGFloat
    var space : CGFloat
    var columns: Int{
        return self.collectionView!.numberOfItems(inSection: 0)
    }
    var rows: Int{
        return self.collectionView!.numberOfSections
    }

    init(itemWidth: CGFloat, itemHeight: CGFloat, space: CGFloat) {
        self.itemWidth = itemWidth
        self.itemHeight = itemHeight
        self.space = space
        super.init()
    }

    required init(coder aDecoder: NSCoder) {
        self.itemWidth = 50
        self.itemHeight = 50
        self.space = 3
        super.init()
    }

    override var collectionViewContentSize: CGSize{
        let w : CGFloat = CGFloat(columns) * (itemWidth + space)
        let h : CGFloat = CGFloat(rows) * (itemHeight + space)
        return CGSize(width: w, height: h)
    }

    override func layoutAttributesForItem(at indexPath: IndexPath) -> UICollectionViewLayoutAttributes? {
        let attributes = UICollectionViewLayoutAttributes(forCellWith: indexPath)
        let x : CGFloat = CGFloat(indexPath.row) * (itemWidth + space)
        let y : CGFloat = CGFloat(indexPath.section) + CGFloat(indexPath.section) * (itemHeight + space)
        attributes.frame = CGRect(x: x, y: y, width: itemWidth, height: itemHeight)
        return attributes
    }

    override func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
        let minRow : Int = (rect.origin.x > 0) ? Int(floor(rect.origin.x/(itemWidth + space))) : 0
        let maxRow : Int = min(columns - 1, Int(ceil(rect.size.width / (itemWidth + space)) + CGFloat(minRow)))
        var attributes : Array<UICollectionViewLayoutAttributes> = [UICollectionViewLayoutAttributes]()
        for i in 0 ..< rows {
            for j in minRow ... maxRow {
                attributes.append(self.layoutAttributesForItem(at: IndexPath(item: j, section: i))!)
            }
        }
        return attributes
    }
}

【讨论】:

  • @TreeBucket :它的工作,但获得部分之间的空间:我怎样才能删除那个空间?
  • 如果我必须在 collectionview 部分使用标题视图怎么办。该代码不适用于此。我的意思是它没有显示标题视图
  • @AbhishekThapliyal 你能删除那个空格吗?
【解决方案3】:

@rdelmar 的回答很有魅力,但我需要尽快完成。这是转换:)

class NodeMap : UICollectionViewController {
    @IBOutlet var activateNodeButton : UIBarButtonItem?
    var rows = 10
    var cols = 10
    override func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return rows
    }
    override func numberOfSectionsInCollectionView(collectionView: UICollectionView) -> Int {
        return cols
    }
    override func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
        return collectionView.dequeueReusableCellWithReuseIdentifier("node", forIndexPath: indexPath)
    }
    override func viewDidLoad() {
        self.collectionView!.collectionViewLayout = NodeLayout(itemWidth: 100.0, itemHeight: 100.0, space: 5.0)
    }
}

class NodeLayout : UICollectionViewFlowLayout {
    var itemWidth : CGFloat
    var itemHeight : CGFloat
    var space : CGFloat
    init(itemWidth: CGFloat, itemHeight: CGFloat, space: CGFloat) {
        self.itemWidth = itemWidth
        self.itemHeight = itemHeight
        self.space = space
        super.init()
    }
    required init(coder aDecoder: NSCoder) {
        self.itemWidth = 50
        self.itemHeight = 50
        self.space = 3
        super.init()
    }
    override func collectionViewContentSize() -> CGSize {
        let w : CGFloat = CGFloat(self.collectionView!.numberOfItemsInSection(0)) * (itemWidth + space)
        let h : CGFloat = CGFloat(self.collectionView!.numberOfSections()) * (itemHeight + space)
        return CGSizeMake(w, h)
    }
    override func layoutAttributesForItemAtIndexPath(indexPath: NSIndexPath) -> UICollectionViewLayoutAttributes! {
        let attributes = UICollectionViewLayoutAttributes(forCellWithIndexPath: indexPath)
        let x : CGFloat = CGFloat(indexPath.row) * (itemWidth + space)
        let y : CGFloat = CGFloat(indexPath.section) + CGFloat(indexPath.section) * (itemHeight + space)
        attributes.frame = CGRectMake(x, y, itemWidth, itemHeight)
        return attributes
    }
    override func layoutAttributesForElementsInRect(rect: CGRect) -> [AnyObject]? {
        let minRow : Int = (rect.origin.x > 0) ? Int(floor(rect.origin.x/(itemWidth + space))) : 0
        let maxRow : Int = Int(floor(rect.size.width/(itemWidth + space)) + CGFloat(minRow))
        var attributes : Array<UICollectionViewLayoutAttributes> = [UICollectionViewLayoutAttributes]()
        for i in 0...self.collectionView!.numberOfSections()-1 {
            for j in minRow...maxRow {
                attributes.append(self.layoutAttributesForItemAtIndexPath(NSIndexPath(forItem: j, inSection: i)))
            }
        }
        return attributes
    }
}

【讨论】:

  • 不错!我想我也会有一些用处。
  • 对 x vs y vs 行 vs 列 vs 行 vs 部分的概念有点困惑——很难一直保持方向直 :) 如果有人想复制粘贴这个发送给我一个便条,我会更新最新的变化。
  • @BadPirate :它的工作,但获得部分之间的空间:我怎样才能删除那个空间?
  • 如果我必须在 collectionview 部分使用标题视图怎么办。该代码不适用于此。我的意思是它没有显示标题视图
【解决方案4】:

重置 contentOffset 可能是目前为止最好的解决方案。

应该采取一些步骤来实现这一点:

  1. 在原始数据集的左右两侧填充额外的项,以实现更大的可滚动区域;这类似于拥有大量重复数据集,但不同之处在于数量;
  2. 在开始时,collection view 的 contentOffset 被计算为只显示原始数据集(以黑色矩形绘制);
  3. 当用户向右滚动并且 contentOffset 达到触发值时,我们重置 contentOffset 以显示相同的视觉结果;但实际上不同的数据;当用户向左滚动时,使用相同的逻辑。

因此,繁重的工作是计算应在左侧和右侧填充多少项目。如果您看一下插图,您会发现至少应该在左侧填充一个额外的屏幕项目,并且在右侧填充另一个额外的屏幕。填充的确切数量取决于原始数据集中有多少项目以及项目大小。

我写了一篇关于这个解决方案的帖子:

http://www.awsomejiang.com/2018/03/24/Infinite-Scrolling-and-the-Tiling-Logic/

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2019-04-23
    • 2014-01-09
    • 1970-01-01
    • 1970-01-01
    • 2020-08-17
    • 2015-05-31
    • 2013-11-30
    • 1970-01-01
    相关资源
    最近更新 更多