iphone - 如何在 iOS 中使 uiscrollview 无限？

Question

我想这样滚动 1 2 3 1 2 3

我有一些按钮，假设有 10 个，我想在无限滚动上显示。

 numbercolors=[[NSMutableArray alloc] init];

 //total count of array is  49 

 numbercolors = [NSMutableArray arrayWithObjects:@"25",@"26",@"27",@"28",@"29",@"31",@"32",@"33",@"34",@"35", @"0",@"1",@"2",@"3",@"4",@"5",@"6",@"7",@"8",@"9",@"10",@"11",@"12",@"13",@"14",@"15",@"16",@"17",@"18",@"19",@"20",@"21",@"22",@"23",@"24",@"25",@"26",@"27",@"28",@"29",@"30",@"31",@"32",@"33",@"34",@"35", @"0",@"1",@"2",@"3",nil];

  int x=2500;

for (NSInteger index = 0; index < [numbercolors count]; index++)
{
    UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];

    button.frame = CGRectMake(x ,0,29.0,77.0);

    button.tag = index;

    [button setTitle:[numbercolors objectAtIndex:index] forState:UIControlStateNormal];

    [button addTarget:self action:@selector(didTapButton:) 

    forControlEvents:UIControlEventTouchUpInside];

    [coloringScroll addSubview:button];

    x=x+70+29;
}
 [coloringScroll setContentSize:CGSizeMake(5000+ (29+70)*[numbercolors count], 1)];

 [coloringScroll setContentOffset:CGPointMake(2500+(29+70)*11, 0)];

这是我在滚动视图上制作按钮的代码。

如何在 - (void)scrollViewDidEndDecelerating:(UIScrollView *)sender 中设置此方法以进行无限滚动。

score 8 · Accepted Answer

只需要设置 setContentOffset 计数

- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
    if (scrollView.contentOffset.x > 2500+(29+70)*4 + ((29+70)*36)) {
        [scrollView setContentOffset:CGPointMake(scrollView.contentOffset.x-((29+70)*36),  0)];  
    }
    if (scrollView.contentOffset.x < 2500+(29+70)*4){
       [scrollView setContentOffset:CGPointMake(scrollView.contentOffset.x+((29+70)*36), 0)];
    }
}

score 7 · Accepted Answer

主要思想是将您的滚动视图重新定位回某个恒定值，当它滚动到某个值时，然后正确地自动重新定位您的 "1" 、 "2"、"3" 项目。

例如 - 您将拥有 contentwidth 5000 的滚动视图。默认情况下，您将其设置为位置 2500。

然后您只需签入- (void)scrollViewDidCScroll:(UIScrollView *)scrollview- 如果 scrollview.contentoffset.x > 3500 - 然后将其位置减少到 scrollview.contentoffset.x -=1000;

另一边也一样。这将导致无限滚动。

但内容不会随之而来。所以 - 您需要实施额外的内容偏移值检查以正确重新排序和重新定位“1”、“2”、“3”项目。

我通常使用 3 个元素，然后为它们动态预加载必要的图库图像。

如果您不想重新发明“轮子”，请查看以下解决方案：

https://www.cocoacontrols.com/controls/dmcircularscrollview

https://www.cocoacontrols.com/controls/infinitescrollview

https://www.cocoacontrols.com/controls/iainfinitegridview

score 3 · Accepted Answer

您可以根据 Apple StreetScroller iOS 示例代码查看此解决方案：

https://github.com/gblancogarcia/GBInfiniteScrollView

我希望它有帮助！

score 2 · Accepted Answer

我写了一个无限滚动的 UIscrollView 子类来完成这个任务。它基于 Apple StreetScroller 示例。您只需为其提供按钮标题以及是否需要水平滚动或垂直滚动。您还可以设置许多其他选项。它与我的 github 上的文档和示例项目一起发布。链接在这里...

http://github.com/ninefifteen/SSRollingButtonScrollView

score 1 · Accepted Answer

这是一个老问题，但我写这篇文章是为了帮助寻找相同解决方案的人。假设我们希望无限循环遍历 3 个项目（单元格） - C0、C1、C2，我们可以在中心单元格的左侧和右侧生成虚拟单元格，结果如下，

C0 C1 C2 [C0 C1 C2] C0 C1 C2

括号中的单元格是我们通过设备屏幕看到的单元格，如果我们向左滚动，

C0 [C1 C2 C0] C1 C2 C0 C1 C2

此时，强制 contentOffset 指向给定虚拟单元的右侧，

C0 [C1 C2 C0] C1 C2 C0 C1 C2 -> C0 C1 C2 C0 [C1 C2 C0] C1 C2

由于无缝地实现这一点很耗时，我推荐下面的解决方案。

https://github.com/DragonCherry/HFSwipeView

如果您只想检查它是如何工作的，请单击下面的链接并“点击播放”。

https://www.cocoacontrols.com/controls/hfswipeview

score 0 · Accepted Answer

我已经快速实现了一个无限滚动器。
它的灵感来自苹果StreetScroller示例

我知道还不完美，但我认为是一个上帝的起点。

InfiniteVerticalScroller

score 0 · Accepted Answer

对于右无限滚动，您可以使用 -

        let rightOffset = CGPoint.init(x: (scrollView.contentSize.width) - (scrollView.bounds.width), y: 0)
    UIView.animate(withDuration: 3.0,
                   delay: 0.0,
                   options: [.curveLinear, .repeat],
                   animations: { () -> Void in
                    self.scrollView.contentOffset = rightOffset

    }, completion: { (finished: Bool) -> Void in
        self.scrollView.setContentOffset(.init(x: 0, y: self.scrollView.contentOffset.y), animated: false)
    })

score 0 · Accepted Answer

这里提供的答案很好，但如果你仍然不满意并寻找不同的方法，这就是我所做的。

主要思想是在到达最后一个之前的单元格时更新单元格的数量。每次将项目数增加 1 时，都会产生无限滚动的错觉。为此，我们可以利用scrollViewDidEndDecelerating(_ scrollView: UIScrollView)函数检测用户何时完成滚动，然后更新集合视图中的项目数。这是实现这一目标的代码片段：

class InfiniteCarouselView: UICollectionView {

    var data: [Any] = []

    private var currentIndex: Int?
    private var currentMaxItemsCount: Int = 0
    // Set up data source and delegate
}

extension InfiniteCarouselView: UICollectionViewDataSource {
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        // Set the current maximum to a number above the maximum count by 1
        currentMaxItemsCount = max(((currentIndex ?? 0) + 1), data.count) + 1
        return currentMaxItemsCount

    }

    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "Cell", for: indexPath)
        let row = indexPath.row % data.count
        let item = data[row]
        // Setup cell
        return cell
    }
}

extension InfiniteCarouselView: UICollectionViewDelegateFlowLayout {
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        return CGSize(width: collectionView.frame.width, height: collectionView.frame.height)
    }

    // Detect when the collection view has finished scrolling to increase the number of items in the collection view
    func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) {
        // Get the current index. Note that the current index calculation will keep changing because the collection view is expanding its content size based on the number of items (currentMaxItemsCount)
        currentIndex = Int(scrollView.contentOffset.x/scrollView.contentSize.width * CGFloat(currentMaxItemsCount))
        // Reload the collection view to get the new number of items
        reloadData()
    }
}

优点

直接实施
不使用 Int.max （我个人认为这不是一个好主意）
不使用任意数字（如 50 或其他）
不更改或操纵数据
无需手动更新内容偏移或任何其他滚动视图属性

缺点

应该启用分页（尽管可以更新逻辑以支持不分页）
需要维护一些属性的引用（当前索引，当前最大计数）
需要在每个滚动端重新加载集合视图（如果可见单元格最小，则没什么大不了的）。如果您在没有缓存的情况下异步加载某些内容，这可能会严重影响您（这是一种不好的做法，数据应该缓存在单元格之外）
如果您想在两个方向上无限滚动，则不起作用

iphone - 如何在 iOS 中使 uiscrollview 无限？

8 回答 8

优点

缺点

Related

Reference