如何快速更改页面控制点的大小和间距？答案

【问题标题】：How to change page control dot size and spacing in swift?如何快速更改页面控制点的大小和间距？
【发布时间】：2023-03-15 19:10:01
【问题描述】：

我想像图像一样自定义页面控件。
我已经搜索过了，但只有交易规模。
我想改变宽度、高度、间距。
我该怎么做？

我试过了

class DefaultPageControl: UIPageControl {

    override var currentPage: Int {
        didSet {
            updateDots()
        }
    }

    func updateDots() {
        let currentDot = subviews[currentPage]

        subviews.forEach {
            $0.frame.size = ($0 == currentDot) ? CGSize(width: 16, height: 4) : CGSize(width: 8, height: 4)
            $0.layer.cornerRadius = 2
        }
    }
}

但是如何改变距离？？

【问题讨论】：

你可以试试这个 - stackoverflow.com/a/42439839/3683408 - 我的意思是第三个答案 - viewDidLayoutSubviews
@Ram 你不是像我说的那样处理规模吗？我不想处理规模问题。
酷！大多数情况下，我可以通过使用缩放来查看解决方案。所以这就是我被建议给你的原因。没关系，你可以忽略它。

标签： ios swift uipagecontrol

【解决方案1】：

@oddK 你可以试试下面的答案。这是我的假设。

    class DefaultPageControl: UIPageControl {

    override var currentPage: Int {
        didSet {
            updateDots()
        }
    }

    func updateDots() {
        let currentDot = subviews[currentPage]

        let spacing = 5.0

        subviews.forEach {
            $0.frame = ($0 == currentDot) ? CGRect(x: 0, y: 0, width: 16, height: 4) : CGRect(x: spacing, y: 0, width: 8, height: 4)
            //$0.frame.size = ($0 == currentDot) ? CGSize(width: 16, height: 4) : CGSize(width: 8, height: 4)
            $0.layer.cornerRadius = 2
        }
    }
}

【讨论】：

你检查了如何显示吗？嗯……略有不同。
@oddK 是的，检查过。似乎它的距离和点宽还可以，但面临基于 currentPage 索引的x 位置问题。为什么您可以尝试以下库 - material.io/develop/ios/components/page-controls 和 medium.com/@Pelaez/… 希望它能提供一些合乎逻辑的东西来完成您所需的输出。我的意思是得到一些你需要通过第二个链接的合乎逻辑的东西。

【解决方案2】：

默认的 UIPageControll 不灵活。

class ExtendedpageControll: UIView{
 var numberOfPage: Int
 var currentpage : Int                  = 0{didSet{reloadView()}}
 var currentIndicatorColor: UIColor     = .black
 var indicatorColor: UIColor            = UIColor(white: 0.9, alpha: 1)
 var circleIndicator: Bool              = false
 private var dotView                    = [UIView]()
 private let spacing: CGFloat           = 6
 private lazy var  extraWidth: CGFloat  = circleIndicator ? 6 : 4

 init(numberOfPages: Int,currentPage: Int,isCircular: Bool){
    self.numberOfPage    = numberOfPages
    self.currentpage     = currentPage
    self.circleIndicator = isCircular
    super.init(frame: .zero)
    configView()
}
 required init?(coder: NSCoder) {fatalError("not implemented")}

 private func configView(){
    backgroundColor = .clear
    (0..<numberOfPage).forEach { _ in
        let view = UIView()
        addSubview(view)
        dotView.append(view)
    }
 }

 private func reloadView(){
    dotView.forEach{$0.backgroundColor = indicatorColor}
    dotView[currentpage].backgroundColor = currentIndicatorColor
    UIView.animate(withDuration: 0.2) {
        self.dotView[self.currentpage].frame.origin.x   = self.dotView[self.currentpage].frame.origin.x - self.extraWidth
        self.dotView[self.currentpage].frame.size.width = self.dotView[self.currentpage].frame.size.width + (self.extraWidth * 2)
    }
}

 override func layoutSubviews() {
    super.layoutSubviews()
    for (i,view) in dotView.enumerated(){
        view.clipsToBounds      = true
        view.layer.cornerRadius = bounds.height / 2
        let width: CGFloat      = circleIndicator ? self.bounds.height : CGFloat(self.bounds.width / CGFloat(self.numberOfPage) - self.spacing) - self.extraWidth
        UIView.animate(withDuration: 0.2) {
          view.frame = CGRect(x: ((self.bounds.width / CGFloat(self.numberOfPage)) * CGFloat(i)) + self.spacing, y: 0, width: width , height: self.bounds.height)
        }
    }
    reloadView()
}
}

用法：如果您想将 ExtendedpageControll 链接到诸如 CollectionView 之类的视图，只需这样做：（item 是您的数据模型）

class SampleViewController: UIViewController{

let colectionView = UICollectionView()

lazy var pageControll: ExtendedpageControll = {
    let pc                   = ExtendedpageControll(numberOfPages: items.count, currentPage: 0,isCircular: true)
    pc.currentIndicatorColor = .black
    return pc
}()

func collectionView(_ collectionView: UICollectionView, didEndDisplaying cell: UICollectionViewCell, forItemAt indexPath: IndexPath) {
    
        if pageControll.currentpage == indexPath.row {
            guard let visible = self.collectionView.visibleCells.first else { return }
            guard let index = self.collectionView.indexPath(for: visible)?.row else { return }
            pageControll.currentpage = index
        }

   } 
}

在init中，您可以将indicator的形状设置为圆形或通过isCircular扩展。

【讨论】：