ios - 如何获得 UICollectionView 的虚线页面指示器？

Question

我有一个具有以下设置的UICollectionView，

public CollectionView(CollectionLayout layout) : base(CGRect.Empty, layout)
{
    RegisterClassForCell(typeof(CollectionCell), CollectionCell.CellIdentifier);
    CollectionViewLayout = layout;
    ShowsHorizontalScrollIndicator = false;
    PagingEnabled = true;
}

CollectionViewLayout 是，

public CollectionLayout()
{
    ScrollDirection = UICollectionViewScrollDirection.Horizontal;
    MinimumInteritemSpacing = 0f;
    MinimumLineSpacing = 0f;
    ItemSize = new CGSize(UIScreen.MainScreen.Bounds.Width, 200f);
}

因此 CollectionView 中的单元格被拉伸(stretch)，以便单元格填充 CollectionView。 CollectionView 只能水平滚动。

现在我想要一个点状页面指示器而不是 CollectionView 的滚动条。无论如何我可以正确地实现这个目标吗？

Answer 1

2020 年的完美方法:

只需在 Storyboard中添加一个UIPageControl。

将其放在您的收藏 View 下方(即，在其上方可见)。

链接到它...

class YourVC: UIViewController, UICollectionViewDelegate,
         UICollectionViewDataSource,
         UICollectionViewDelegateFlowLayout {
    
    @IBOutlet var collectionView: UICollectionView!
    @IBOutlet var dots: UIPageControl!

只需在 Collection View 中添加一个水平居中的约束，并添加一个底部对齐的约束。

这将给出标准定位/间距。

(当然，你可以把点放在任何你想要的地方，但这是标准的。)

技巧 1 - 颜色

奇怪的是，点的默认颜色是..清晰的!

所以将它们设置为灰色/黑色或任何你想要的颜色:

或者你可以在代码中做到这一点:

override func viewDidLoad() {
    super.viewDidLoad()
    dots.pageIndicatorTintColor = .systemGray5
    dots.currentPageIndicatorTintColor = .yourCorporateColor
}

下一步。在 numberOfItemsInSection 中，添加 ...

func collectionView(_ collectionView: UICollectionView,
              numberOfItemsInSection section: Int) -> Int {
    
    let k = ... yourData.count, or whatever your count is
    
    dots.numberOfPages = k
    return k
}

提示 2 - 事实上，不要使用减速调用

添加这段代码:

func scrollViewDidScroll(_ scrollView: UIScrollView) {
    dots.currentPage = Int(
        (collectionView.contentOffset.x / collectionView.frame.width)
            .rounded(.toNearestOrAwayFromZero)
        )
    )
}

您只需在“scrollViewDidScroll”中设置页面即可。

事实上

• 不要使用 scrollViewWillBeginDecelerating

• 不要使用 scrollViewDidEndDecelerating。

要了解原因:请尝试使用其中任何一个调用。现在快速浏览许多页面。请注意它不能正常工作。

只需使用 scrollViewDidScroll 即可获得正确、完美的结果，包括初始化。

技巧 3 - 不要使用 Int 除法 - 它完全改变了行为并且是完全错误的。

你会经常看到这样的示例代码:

// wrong, do not do this
dots.currentPage = Int(collectionView.contentOffset.x) /
                     Int(collectionView.frame.width)
// wrong, do not do this

那个常见的示例代码完全错误。

如果您尝试这样做，当您浏览页面时，会导致点以非标准方式“跳跃”。

最好的解释就是试试看。

对于滚动浏览或浏览页面时正常的、正确的、Apple 风格的行为，代码是:

    dots.currentPage = Int(
        (collectionView.contentOffset.x / collectionView.frame.width)
        .rounded(.toNearestOrAwayFromZero)
    )

最后的例子...