Question

我在我的应用程序中使用UIPageControl for tutorial屏幕。这是UIPageViewController的基本用法，用户可以在信息屏幕上滑动以获取有关应用程序使用情况的基本信息，而每次滑动都会更新屏幕底部的UIPageControl点。

这是具有彩色的常规点的外观

这就是我想做的（可以是任何图标）

我想要实现的是用我自己的图像替换默认的页面控制圈，并设置其活动和非活动色调的颜色。此自定义实现的原因是因为在界面生成器中，只有可调整的页面控件的可视部分是色调和当前页面颜色，以及默认大小的圆形项目。

因此，我想用页面控件的图像实现相同的内容。一个例子会很有用。

Answer 1

这是达到预期效果的一个例子

class CustomPageControl: UIPageControl {
   let imgActive: UIImage = #imageLiteral(resourceName: "activeImg").withRenderingMode(.alwaysTemplate)
   let imgInactive: UIImage = #imageLiteral(resourceName: "inactiveImg")

   let customActiveYOffset: CGFloat = 5.0
   let customInactiveYOffset: CGFloat = 3.0
   var hasCustomTintColor: Bool = false
   let customActiveDotColor: UIColor = UIColor(rgb: 0xe62f3e, alphaVal: 1.0)

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

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

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

   func updateDots() {
      var i = 0
      let activeSize = self.imgActive.size
      let inactiveSize = self.imgInactive.size
      let activeRect = CGRect(x: 0, y: 0, width: activeSize.width / 2, height: activeSize.height / 2)
      let inactiveRect = CGRect(x: 0, y: 0, width: inactiveSize.width, height: inactiveSize.height)

      for view in self.subviews {
          if let imageView = self.imageForSubview(view) {
              if i == self.currentPage {
                imageView.image = self.imgActive
                if self.hasCustomTintColor {
                    imageView.tintColor = customActiveDotColor
                }
                imageView.frame = activeRect
                imageView.frame.origin.y = imageView.frame.origin.y - customActiveYOffet
              } else {
                imageView.image = self.imgInactive
                imageView.frame = inactiveRect
                imageView.frame.origin.y = imageView.frame.origin.y - customInactiveYOffset
              }
              i = i + 1
          } else {
              var dotImage = self.imgInactive
              if i == self.currentPage {
                  dotImage = self.imgActive
              }
              view.clipsToBounds = false
              let addedImageView: UIImageView = UIImageView(image: dotImage)
              if dotImage == self.imgActive {
                 addedImageView.frame = activeRect
                 addedImageView.frame.origin.y = addedImageView.frame.origin.y - customActiveYOffet
                if self.hasCustomTintColor {
                    addedImageView.tintColor = customActiveDotColor
                }
             } else {
                 addedImageView.frame.origin.y = addedImageView.frame.origin.y - customInactiveYOffset
             }
             view.addSubview(addedImageView)
             i = i + 1
          }
      }
  }

 func imageForSubview(_ 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
}

尝试和/或修改，看看效果是否良好。

子类化UIPageControl来自定义活动和非活动点图像

1 个答案: