快速更改带有图像的页面控制点

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()*/
    // Do any additional setup after loading the view.
}
override func didReceiveMemoryWarning() {
    super.didReceiveMemoryWarning()
    // Dispose of any resources that can be recreated.
}
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”替换为点图像的实际名称。