如何获取UICollectionView的虚线页面指示器?

时间:2018-04-25 06:59:05

标签: ios xamarin.ios uicollectionview uipagecontrol

我有一个 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 个答案:

答案 0 :(得分:2)

2020年完全正确的方法:

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

将其放在收藏视图的下方(即顶部)。

enter image description here

链接到它...

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

只需添加一个约束使其水平居中于集合视图,然后添加约束以使底部对齐即可。

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

(当然,您可以将圆点放置在所需的任何位置。)

enter image description here

提示1-颜色

点的默认颜色都是..清除!

因此将它们设置为灰色/黑色或您想要的任何颜色:

enter image description here

或者您可以通过代码来实现:

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

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

func collectionView(_ collectionView: UICollectionView,
              numberOfItemsInSection section: Int) -> Int {
    
    let k = 5   // example, yourData.count
    
    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

经常看到的示例代码完全错误

如果您尝试这样做,当您在页面中略过时,会以非标准方式导致点“跳” 。

最好的解释是尝试一下。

对于通常的,正确的,苹果风格的行为,当您滚动或浏览页面时,代码为:

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

最后的例子...

enter image description here

答案 1 :(得分:0)

使用UIPageControl。下方链接: UIPageControl

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

答案 2 :(得分:0)

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

然后输入以下代码:

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

答案 3 :(得分:0)

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

我按如下方式设置了UIPageControl的页面 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://powerbi.microsoft.com