Swift实现PageControl当前页面圆点放大效果

我来帮你搞定这个页面指示器圆点放大的问题！结合你用ScrollView代理的情况，分几种场景给你具体解决方案：

一、用系统自带UIPageControl的情况 #

系统默认选中圆点已经比未选中的大，但如果觉得不够明显，可以这么调整：

• 自定义圆点图片（最稳妥）：提前做两个不同大小的圆点图片（比如小的10x10，大的20x10），直接赋值给PageControl：

  pageControl.pageIndicatorImage = UIImage(named: "small_unselected_dot")
  pageControl.currentPageIndicatorImage = UIImage(named: "large_selected_dot")
  

• 修改系统私有属性（谨慎用）：如果不想做图片，可以通过KVC修改系统隐藏的属性，但要注意iOS版本更新可能失效：

  // 设置选中圆点大小
  pageControl.setValue(20.0, forKey: "_currentPageIndicatorSize")
  // 设置未选中圆点大小
  pageControl.setValue(10.0, forKey: "_pageIndicatorSize")
  

二、自定义页面指示器（灵活可控，推荐） #

如果系统的满足不了需求，自己写一个指示器会更靠谱，结合ScrollView代理实时更新状态：

1. 先写一个自定义指示器类 #

这个类负责管理所有圆点，以及选中状态的缩放动画：

class CustomPageIndicator: UIView {
    // 总页数
    var dotCount: Int = 0 {
        didSet { setupDots() }
    }
    // 当前选中页索引
    var currentIndex: Int = 0 {
        didSet { updateDotStates() }
    }
    
    // 未选中/选中圆点的大小
    private let normalDotSize = CGSize(width: 10, height: 10)
    private let selectedDotSize = CGSize(width: 20, height: 10)
    private var dots = [UIView]()
    
    // 初始化所有圆点
    private func setupDots() {
        // 先清除旧圆点
        dots.forEach { $0.removeFromSuperview() }
        dots.removeAll()
        
        let spacing: CGFloat = 8
        let totalWidth = normalDotSize.width * CGFloat(dotCount) + spacing * CGFloat(dotCount - 1)
        self.frame.size.width = totalWidth
        
        for i in 0..<dotCount {
            let dot = UIView()
            dot.layer.cornerRadius = normalDotSize.height / 2
            dot.backgroundColor = .lightGray
            addSubview(dot)
            dots.append(dot)
            
            // 自动布局圆点
            dot.translatesAutoresizingMaskIntoConstraints = false
            NSLayoutConstraint.activate([
                dot.centerYAnchor.constraint(equalTo: self.centerYAnchor),
                dot.leftAnchor.constraint(equalTo: self.leftAnchor, constant: (normalDotSize.width + spacing) * CGFloat(i)),
                dot.widthAnchor.constraint(equalToConstant: normalDotSize.width),
                dot.heightAnchor.constraint(equalToConstant: normalDotSize.height)
            ])
        }
        updateDotStates()
    }
    
    // 更新圆点选中状态（带动画）
    private func updateDotStates() {
        for (index, dot) in dots.enumerated() {
            UIView.animate(withDuration: 0.2) {
                if index == self.currentIndex {
                    dot.backgroundColor = .black
                    // 切换到选中大小
                    dot.widthAnchor.constraint(equalToConstant: self.selectedDotSize.width).isActive = true
                    dot.layer.cornerRadius = self.selectedDotSize.height / 2
                } else {
                    dot.backgroundColor = .lightGray
                    // 切回正常大小
                    dot.widthAnchor.constraint(equalToConstant: self.normalDotSize.width).isActive = true
                    dot.layer.cornerRadius = self.normalDotSize.height / 2
                }
                dot.layoutIfNeeded() // 强制更新布局，让约束变化生效
            }
        }
    }
}

2. 在ViewController里结合ScrollView代理使用 #

把自定义指示器加到页面上，然后通过ScrollView代理回调更新选中索引：

class YourViewController: UIViewController, UIScrollViewDelegate {
    @IBOutlet weak var scrollView: UIScrollView!
    private let pageIndicator = CustomPageIndicator()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        scrollView.delegate = self
        scrollView.isPagingEnabled = true // 必须开启分页，否则无法正确计算页码
        
        // 添加指示器到页面底部
        view.addSubview(pageIndicator)
        pageIndicator.translatesAutoresizingMaskIntoConstraints = false
        NSLayoutConstraint.activate([
            pageIndicator.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            pageIndicator.bottomAnchor.constraint(equalTo: view.bottomAnchor, constant: -20),
            pageIndicator.heightAnchor.constraint(equalToConstant: 20)
        ])
        
        // 设置总页数（比如你的ScrollView有3个页面）
        pageIndicator.dotCount = 3
    }
    
    // 滚动结束后更新选中页码
    func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) {
        let currentPage = Int(scrollView.contentOffset.x / scrollView.bounds.width)
        pageIndicator.currentIndex = currentPage
    }
    
    // 可选：滚动过程中实时过渡动画（让缩放跟着滚动进度走）
    func scrollViewDidScroll(_ scrollView: UIScrollView) {
        let pageWidth = scrollView.bounds.width
        let fractionalPage = scrollView.contentOffset.x / pageWidth
        let currentPage = Int(fractionalPage)
        let progress = fractionalPage - CGFloat(currentPage)
        
        // 处理当前页和下一页的圆点过渡
        if currentPage < pageIndicator.dotCount - 1 {
            let currentDot = pageIndicator.dots[currentPage]
            let nextDot = pageIndicator.dots[currentPage + 1]
            
            UIView.animate(withDuration: 0.0) {
                // 当前页圆点从选中大小缩小
                currentDot.widthAnchor.constraint(equalToConstant: self.pageIndicator.selectedDotSize.width - (self.pageIndicator.selectedDotSize.width - self.pageIndicator.normalDotSize.width) * progress).isActive = true
                // 下一页圆点从正常大小放大
                nextDot.widthAnchor.constraint(equalToConstant: self.pageIndicator.normalDotSize.width + (self.pageIndicator.selectedDotSize.width - self.pageIndicator.normalDotSize.width) * progress).isActive = true
                currentDot.layoutIfNeeded()
                nextDot.layoutIfNeeded()
            }
        }
    }
}

三、排查你当前代码的常见问题 #

如果已经用了代理但圆点没变化，大概率是这些原因：

• 没给PageControl或自定义指示器正确赋值currentPage/currentIndex
• 更新约束或样式后没调用layoutIfNeeded()，导致界面没刷新
• ScrollView没开启isPagingEnabled = true，无法正确计算当前页码
• 系统PageControl的自定义图片路径错误，导致没加载出来

内容的提问来源于stack exchange，提问作者MattBlack