如何获得 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 中的单元格被拉伸，以便一个单元格填充 CollectionView。 CollectionView 只能水平滚动。

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

Answer 1

使用 UIPageControl。 Link 下面： UIPageControl

然后检测你在哪个单元格，写一些代码来改变UIPageControl的"currentPage"。

Answer 2

将一个 UIPageControl 拖到您的 collectionView 上方，并在您的 ViewController 中创建一个 UIPageControl 的 IBOutlet。

然后输入以下代码：

func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) {
    pageControl.currentPage = Int(self.collectionView=.contentOffset.x)/ Int(self.collectionView.frame.width)
}

Answer 3

我在 CollectionView 的顶部添加了一个 UIPageControl 组件，将其约束设置为 CollectionView 的底部。然后我得到了这个 UIPageControl 组件的实例到 UICollectionView 的 CollectionSource 的属性。

我将 UIPageControl 的 Pages 和 CurrentPage 属性设置如下，

public class CollectionSource : UICollectionViewSource
{
    private List<SourceDataModel> _dataSource;
    public UIPageControl PageControl { get; set; }

    // other code

    public override void DecelerationEnded(UIScrollView scrollView)
    {
        var index = (int)(Collection.ContentOffset.X / Collection.Frame.Width);
        PageControl.CurrentPage = index;
        // other code
    }

    public override nint GetItemsCount(UICollectionView collectionView, nint section)
    {
        PageControl.Pages = _dataSource.Count;
        return _dataSource.Count;
    }
}

遵循的教程：https://blog.learningtree.com/paging-with-collection-views-part-2/

Answer 4

2020 年完全正确的方法：

只需在故事板中添加 UIPageControl。

将其放在您的 collection 视图下方（即在上方可见）。

Link到它...

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

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

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

（当然，你可以把点放在任何地方，但这是标准。）

技巧 1 - 颜色

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

因此将它们设置为 gray/black 或您想要的任何值：

或者您可以在代码中执行此操作：

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

often-seen 示例代码完全错误。

如果您尝试这样做，当您略读翻页。

最好的解释就是试试看。

对于滚动浏览或浏览页面时正常的、正确的 Apple-style 行为，代码是：

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

最终示例...

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

How to get a dotted page indicator for UICollectionView?

uipagecontrol

xamarin.ios

ios

uicollectionview

2020 年完全正确的方法：

技巧 1 - 颜色

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

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

often-seen 示例代码完全错误。

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

How to get a dotted page indicator for UICollectionView?

uipagecontrol

xamarin.ios

ios

uicollectionview

2020 年完全正确的方法：

技巧 1 - 颜色

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

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

often-seen 示例代码完全错误。

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