3

我有一个具有以下设置的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 的滚动条。无论如何我可以正确地做到这一点吗？

4

4 回答 4

13

2020 年完全正确的方法：

只需UIPageControl在情节提要中添加一个。

将它放在您的收藏视图下方（即顶部可见）。

在此处输入图像描述

链接到它...

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

只需在集合视图中添加一个水平居中的约束，然后添加一个约束来对齐底部。

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

（当然，您可以将点放在您想要的任何位置，但这是标准。）

在此处输入图像描述

提示 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。

To see why: try it using either of those calls. Now skim quickly through many pages. Notice it does not work properly.

Simply use scrollViewDidScroll for the correct, perfect result, including initialization.

Tip 3 - do NOT use Int division - it completely changes the behavior and is totally wrong.

You will often see this example code:

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

That often-seen example code is completely wrong.

If you try that, it will result in the dots "jumping" in a non-standard way, as you skim through pages.

Best explanation is to try it and see.

For the usual, correct, Apple-style behavior as you scroll through or skim through the pages, the code is:

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

Final example...

在此处输入图像描述

于 2020-06-17T15:15:57.700 回答
1

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

然后输入以下代码：

func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) {
    pageControl.currentPage = Int(self.collectionView=.contentOffset.x)/ Int(self.collectionView.frame.width)
}
于 2018-04-25T07:42:40.710 回答
-1

使用 UIPageControl。下面的链接： UIPageControl

然后检测你所在的单元格并编写一些代码来更改 UIPageControl 的“currentPage”。

于 2018-04-25T07:24:55.617 回答
-1

我在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/

于 2018-04-25T08:09:37.667 回答