用图像更改页面控制点

Question

我正在尝试用一些图像更改页面控件中的点。

这是我尝试过的代码：

import UIKit

class PageViewController: UIPageViewController, UIPageViewControllerDelegate, UIPageViewControllerDataSource {
    // MARK: Data source functions.
    func pageViewController(_ pageViewController: UIPageViewController, viewControllerBefore viewController: UIViewController) -> UIViewController? {
        guard let viewControllerIndex = orderedViewControllers.index(of: viewController) else {
            return nil
        }
        let previousIndex = viewControllerIndex - 1
        guard previousIndex >= 0 else {
            return orderedViewControllers.last
            // Uncommment the line below, remove the line above if you don't want the page control to loop.
            // return nil
        }
        guard orderedViewControllers.count > previousIndex else {
            return nil
        }
        return orderedViewControllers[previousIndex]
    }

    func pageViewController(_ pageViewController: UIPageViewController, viewControllerAfter viewController: UIViewController) -> UIViewController? {
        guard let viewControllerIndex = orderedViewControllers.index(of: viewController) else {
            return nil
        }
        let nextIndex = viewControllerIndex + 1
        let orderedViewControllersCount = orderedViewControllers.count
        // the first view controller.
        guard orderedViewControllersCount != nextIndex else {
            return orderedViewControllers.first
            // Uncommment the line below, remove the line above if you don't want the page control to loop.
            // return nil
        }
        guard orderedViewControllersCount > nextIndex else {
            return nil
        }
        return orderedViewControllers[nextIndex]
    }

    lazy var orderedViewControllers: [UIViewController] = {
        return [self.newVc(viewController: "sbYellow"),
                self.newVc(viewController: "sbRed"),
                self.newVc(viewController: "sbBlue")]
    }()

    var pageControl = UIPageControl()

    override func viewDidLoad() {
        super.viewDidLoad()
        self.dataSource = self
        // This sets up the first view that will show up on our page control
        if let firstViewController = orderedViewControllers.first {
            setViewControllers([firstViewController],
                               direction: .forward,
                               animated: true,
                               completion: nil)
        }
        let pageControl = CustomPageControl(frame: CGRect(x: 100, y: 100, width: 104, height: 40))
        pageControl.numberOfPages = 3
        pageControl.currentPage = 0
        self.view.addSubview(pageControl)
        /*self.delegate = self
         configurePageControl()*/
    }

    func configurePageControl() {
        // The total number of pages that are available is based on how many available colors we have.
        pageControl = UIPageControl(frame: CGRect(x: 0,y: UIScreen.main.bounds.maxY - 50,width: UIScreen.main.bounds.width,height: 50))
        self.pageControl.numberOfPages = orderedViewControllers.count
        self.pageControl.currentPage = 0
        self.pageControl.tintColor = UIColor.black
        self.pageControl.pageIndicatorTintColor = UIColor.white
        self.pageControl.currentPageIndicatorTintColor = UIColor.black
        self.view.addSubview(pageControl)
    }

    func newVc(viewController: String) -> UIViewController {
        return UIStoryboard(name: "Main", bundle: nil).instantiateViewController(withIdentifier: viewController)
    }

    func pageViewController(_ pageViewController: UIPageViewController, didFinishAnimating finished: Bool, previousViewControllers: [UIViewController], transitionCompleted completed: Bool) {
        let pageContentViewController = pageViewController.viewControllers![0]
        self.pageControl.currentPage = orderedViewControllers.index(of: pageContentViewController)!
    }
}

class CustomPageControl: UIPageControl {
    var imageToBeReplacedByDot: UIImage {
        return  imageLiteral(resourceName: "av_timer - material") // Image you want to replace with dots
    }
    var circleImage: UIImage {
        return  imageLiteral(resourceName: "cancel - material") //Default Image
    }
    override var numberOfPages: Int {
        didSet {
            updateDots()
        }
    }
    override var currentPage: Int {
        didSet {
            updateDots()
        }
    }

    override func awakeFromNib() {
        super.awakeFromNib()
        self.pageIndicatorTintColor = UIColor.clear
        self.currentPageIndicatorTintColor = UIColor.clear
        self.clipsToBounds = false
    }

    func updateDots() {
        var i = 0
        for view in self.subviews {
            var imageView = self.imageView(forSubview: view)
            if imageView == nil {
                if i == 0 {
                    imageView = UIImageView(image: imageToBeReplacedByDot)
                } else {
                    imageView = UIImageView(image: circleImage)
                }
                imageView!.center = view.center
                view.addSubview(imageView!)
                view.clipsToBounds = false
            }
            if i == self.currentPage {
                imageView!.alpha = 1.0
            } else {
                imageView!.alpha = 0.5
            }
            i += 1
        }
    }

    fileprivate func imageView(forSubview view: UIView) -> UIImageView? {
        var dot: UIImageView?
        if let dotImageView = view as? UIImageView {
            dot = dotImageView
        } else {
            for foundView in view.subviews {
                if let imageView = foundView as? UIImageView {
                    dot = imageView
                    break
                }
            }
        }
        return dot
    }
}

效果很好，可以用图像改变点。问题是，如果我滚动，图像不会改变。另外，我想将页面控件放置在屏幕顶部的中央。

如何实现？

截图：

Answer 1

您可以使用此代码作为参考：

import UIKit

class LocationPageControl: UIPageControl {

let locationArrow: UIImage = UIImage(named: "locationArrow")!
let pageCircle: UIImage = UIImage(named: "pageCircle")!

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

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

override func awakeFromNib() {
    super.awakeFromNib()
    self.pageIndicatorTintColor = UIColor.clear
    self.currentPageIndicatorTintColor = UIColor.clear
    self.clipsToBounds = false
}

func updateDots() {
    var i = 0
    for view in self.subviews {
        var imageView = self.imageView(forSubview: view)
        if imageView == nil {
            if i == 0 {
                imageView = UIImageView(image: locationArrow)
            } else {
                imageView = UIImageView(image: pageCircle)
            }
            imageView!.center = view.center
            view.addSubview(imageView!)
            view.clipsToBounds = false
        }
        if i == self.currentPage {
            imageView!.alpha = 1.0
        } else {
            imageView!.alpha = 0.5
        }
        i += 1
    }
}

fileprivate func imageView(forSubview view: UIView) -> UIImageView? {
    var dot: UIImageView?
    if let dotImageView = view as? UIImageView {
        dot = dotImageView
    } else {
        for foundView in view.subviews {
            if let imageView = foundView as? UIImageView {
                dot = imageView
                break
            }
        }
    }
    return dot
}
}

注意：-根据您的需要设置您的图像

Answer 2

在人工智能的帮助下，我得到了这个子类，它对我来说效果很好

import UIKit

class CustomPageControl: UIControl {
    
    private var dotImageViews: [UIImageView] = []
    
    var currentPage: Int = 0 {
        didSet {
            updateDots()
        }
    }
    
    var numberOfPages: Int = 0 {
        didSet {
            updateDots()
        }
    }
    
    var dotImage: UIImage? {
        didSet {
            updateDots()
        }
    }
    
    var currentDotImage: UIImage? {
        didSet {
            updateDots()
        }
    }
    
    override var intrinsicContentSize: CGSize {
        let dotSize = dotImage?.size ?? CGSize(width: 10, height: 10)
        let width = CGFloat(numberOfPages) * dotSize.width
        let height = dotSize.height
        return CGSize(width: width, height: height)
    }
    
    override func layoutSubviews() {
        super.layoutSubviews()
        
        let dotSize = dotImage?.size ?? CGSize(width: 10, height: 10)
        let spacing: CGFloat = 8
        
        var x: CGFloat = 0
        let y: CGFloat = (bounds.height - dotSize.height) / 2
        
        for dotImageView in dotImageViews {
            dotImageView.frame = CGRect(x: x, y: y, width: dotSize.width, height: dotSize.height)
            x += dotSize.width + spacing
        }
    }
    
    private func updateDots() {
        // Remove existing dot image views
        for dotImageView in dotImageViews {
            dotImageView.removeFromSuperview()
        }
        dotImageViews.removeAll()
        
        // Create and add new dot image views
        let dotSize = dotImage?.size ?? CGSize(width: 10, height: 10)
        let spacing: CGFloat = 8
        
        var x: CGFloat = 0
        let y: CGFloat = (bounds.height - dotSize.height) / 2
        
        for _ in 0..<numberOfPages {
            let dotImageView = UIImageView()
            dotImageView.contentMode = .center
            addSubview(dotImageView)
            dotImageViews.append(dotImageView)
            
            dotImageView.frame = CGRect(x: x, y: y, width: dotSize.width, height: dotSize.height)
            x += dotSize.width + spacing
        }
        
        // Update dot images based on current page
        for (index, dotImageView) in dotImageViews.enumerated() {
            dotImageView.image = index == currentPage ? currentDotImage : dotImage
        }
    }
}

在视图控制器中为 CustomPageControl 创建一个出口：

@IBOutlet weak var customPageControl: CustomPageControl!

在视图控制器的代码中，设置 customPageControl 实例的属性以自定义其外观：

customPageControl.dotImage = UIImage(named: "dot_image")
customPageControl.currentDotImage = UIImage(named: "current_dot_image")
customPageControl.numberOfPages = 5
customPageControl.currentPage = 2

将“dot_image”和“current_dot_image”替换为点图像的实际名称。