在 UIPageControl 中控制“活动”点

Posted 2023-03-13

【中文标题】在 UIPageControl 中控制“活动”点

【英文标题】：Control "active" dot in UIPageControl

【发布时间】：2015-10-20 21:37:24

【问题描述】：

我的设计师要求我在 UIPageViewController 中显示 3 个点，以获得 10 个视图。

当前 3 个视图控制器显示时，第 0 个点应突出显示；当接下来的 4 个视图控制器显示时，第一个点应该突出显示；当最后 3 个视图控制器显示时，应突出显示第二个点。

到目前为止，我能够在 UIPageControl 中显示 3 个点，但指示器点只是旋转，指示 n%3 位置处于活动状态。

func presentationCountForPageViewController(pageViewController: UIPageViewController) -> Int 
    return 3

我还没有看到任何关于如何使用 UIPageControl 控制索引是活动索引的文档，所以我不确定这是否是 Apple 希望您能够覆盖的内容。

如果有办法完成我正在尝试做的事情，我将不胜感激。

【问题讨论】：

我不认为你可以用 UIPageViewController 做到这一点。您可以使用 UIPageControl 并自己实现下一个/上一个代码。

@Paulw11 你能举个例子吗？我在docs 中看不到任何可以让我按照您的建议进行操作的内容。

我想你还在考虑 UIPageViewController。 UIPageControl is 只是点 - developer.apple.com/library/prerelease/ios/documentation/UIKit/…。您需要将其与您自己的容器视图结合起来并管理您显示的页面

@Paulw11 我们链接到相同的文档。

抱歉，我在 iPad 上看不到链接颜色。您可以将UIPageController 的currentPage 和numberOfPages 属性设置为您想要的任何值，因此您可以使用if 语句来确定当前页面索引并将currentPage 设置为0，如果您正在显示前3 个页面，接下来 4 个为 1，最后 3 个为 2

【参考方案1】：

事实证明，我想要完成的工作无法通过 UIPageViewController 完成。默认情况下，该类中的 UIPageControl 不能被直接覆盖。

相反，我能够结合使用 UICollectionView（通过 hack 使其在页面更改效果中类似于 UIPageViewController）和 UIPageControl，作为同一个总体 UIViewController 的子视图。

class MyPageViewController : UIViewController 
    // MARK: subviews
    private var collectionView:UICollectionView!
    /// the collection layout controls the scrolling behavior of the collection view
    private var collectionLayout = MyLayout()
    private var pageControl = UIPageControl()

    let CollectionViewCellReuseIdentifer = "CollectionViewCellReuseIdentifier"

    // MARK: autolayout
    private var autolayoutConstraints:[NSLayoutConstraint] = [NSLayoutConstraint]()



    // MARK: constructors
    init() 
        super.init(nibName: nil, bundle: nil)
    



    // MARK: UIViewController lifecycle methods
    override func viewDidLoad() 
        super.viewDidLoad()
        self.setupView()
    



    /**
    Set up the collection view, page control, skip & log in buttons
    */
    func setupView() 
        self.setupCollectionView()
        self.setupPageControl()

        self.setupConstraints()

        self.view.addConstraints(self.autolayoutConstraints)
    

    /**
    Set up the collection view
    */
    func setupCollectionView() 
        self.collectionView = UICollectionView(frame: CGRect.zero, collectionViewLayout: self.collectionLayout)
        self.collectionView.translatesAutoresizingMaskIntoConstraints = false
        self.collectionView.registerClass(MyPageView.self, forCellWithReuseIdentifier: self.CollectionViewCellReuseIdentifer)
        self.collectionView.dataSource = self
        self.collectionView.delegate = self
        self.collectionView.backgroundColor = UIColor.whiteColor()
        self.collectionView.scrollEnabled = true
        self.collectionView.decelerationRate = UIScrollViewDecelerationRateFast;


        self.collectionLayout.minimumInteritemSpacing = 1
        self.collectionLayout.minimumLineSpacing = 1
        self.collectionLayout.scrollDirection = .Horizontal
        self.collectionLayout.delegate = self

        self.view.addSubview(self.collectionView)
    

    /**
    Set up view showing pagination dots for slideshow items
    */
    func setupPageControl() 
        self.pageControl.translatesAutoresizingMaskIntoConstraints = false
        self.pageControl.numberOfPages = 3
        self.pageControl.backgroundColor = UIColor.whiteColor()

        self.view.addSubview(self.pageControl)
    

    func setupConstraints() 
        let views:[String:AnyObject] = [
            "collectionView" : self.collectionView,
            "pageControl" : self.pageControl,
        ]

        self.autolayoutConstraints.appendContentsOf(
            NSLayoutConstraint.constraintsWithVisualFormat(
                "V:|[collectionView][pageControl]|",
                options: .AlignAllCenterX,
                metrics: nil,
                views: views
            )
        )

        self.autolayoutConstraints.appendContentsOf(
            NSLayoutConstraint.constraintsWithVisualFormat(
                "H:|[collectionView]|",
                options: .AlignAllCenterY,
                metrics: nil,
                views: views
            )
        )

        self.autolayoutConstraints.appendContentsOf(
            NSLayoutConstraint.constraintsWithVisualFormat(
                "H:|[pageControl]|",
                options: NSLayoutFormatOptions(),
                metrics: nil,
                views: views
            )
        )
    


extension MyPageViewController : MyPageViewControllerDelegate 
    func didSwitchToPage(imageIndex: Int) 
        if imageIndex < 3 
            self.pageControl.currentPage = 0
         else if imageIndex < 7 
            self.pageControl.currentPage = 1
         else 
            self.pageControl.currentPage = 2
        

        self.pageControl.setNeedsDisplay()
    

布局类源自我的同事在研究类似问题时发现的答案。 http://karmadust.com/centered-paging-with-preview-cells-on-uicollectionview/

/**
*  Delegate for slide interactions
*/
protocol MyPageViewControllerDelegate 
    /**
    Triggered when a new page has been 'snapped' into place

    - parameter imageIndex: index of the image that has been snapped to
    */
    func didSwitchToPage(imageIndex: Int)



class MyLayout : UICollectionViewFlowLayout 
    var delegate:MyPageViewControllerDelegate?

    /*
    Allows different items in the collection to 'snap' onto the current screen section.
    Based off of http://karmadust.com/centered-paging-with-preview-cells-on-uicollectionview/
    */
    override func targetContentOffsetForProposedContentOffset(proposedContentOffset: CGPoint, withScrollingVelocity velocity: CGPoint) -> CGPoint 

        if let cv = self.collectionView 

            let cvBounds = cv.bounds
            let halfWidth = cvBounds.size.width * 0.5;
            let proposedContentOffsetCenterX = proposedContentOffset.x + halfWidth;

            if let attributesForVisibleCells = self.layoutAttributesForElementsInRect(cvBounds) 

                var candidateAttributes : UICollectionViewLayoutAttributes?
                // the index of the image selected
                var index:Int = 0

                for attributes in attributesForVisibleCells 

                    // == Skip comparison with non-cell items (headers and footers) == //
                    if attributes.representedElementCategory != UICollectionElementCategory.Cell 
                        index++
                        continue
                    

                    if let candAttrs = candidateAttributes 

                        let a = attributes.center.x - proposedContentOffsetCenterX
                        let b = candAttrs.center.x - proposedContentOffsetCenterX

                        if fabsf(Float(a)) < fabsf(Float(b)) 
                            candidateAttributes = attributes;
                        

                    
                    else  // == First time in the loop == //

                        candidateAttributes = attributes;
                        index++
                        continue;
                    

                

                // Beautification step , I don't know why it works!
                if(proposedContentOffset.x == -(cv.contentInset.left)) 
                    return proposedContentOffset
                

                if let delegate = self.delegate 
                    delegate.didSwitchToPage((candidateAttributes?.indexPath.row)!)
                

                return CGPoint(x: floor(candidateAttributes!.center.x - halfWidth), y: proposedContentOffset.y)

            


        

        // fallback
        return super.targetContentOffsetForProposedContentOffset(proposedContentOffset)
    

注意：我删减了我使用的实际代码并替换了一堆名称，以使它们更适合示例。我没有运行这个特定的代码，也没有在我的 IDE 中测试错误。话虽如此，代码背后的方法是可靠的。