经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » 移动开发 » iOS » 查看文章
3.iOS14下UIPageControl自定义样式
来源:cnblogs  作者:小小个子大个头  时间:2020/12/8 9:03:25  对本文有异议

3.iOS14下UIPageControl自定义样式

1.概览

首先在iOS14中UIPageControl中增加了几个新属性及方法:

/// 表示当前的背景样式,枚举值
open var backgroundStyle: UIPageControl.BackgroundStyle
/// 只读属性,表示当前处于离散互动还是连续互动
open var interactionState: UIPageControl.InteractionState { get }
/// 表示是否开始连续互动,默认true
open var allowsContinuousInteraction: Bool
/// 指示器样式统一调整,默认nil,样式为圆点
open var preferredIndicatorImage: UIImage?
/// 获取page处对应的图片,没有设置则为nil
open func indicatorImage(forPage page: Int) -> UIImage?
/// 设置page处对应的图片
open func setIndicatorImage(_ image: UIImage?, forPage page: Int)

同时废弃了一个方法和属性:

/// 设置该属性后,延缓更新指示器,直到调用updateCurrentPageDisplay为止
open var defersCurrentPageDisplay: Bool
/// 更新指示器
open func updateCurrentPageDisplay()

2.部分新增属性及方法

2.1 preferredIndicatorImage

let control = UIPageControl()
control.numberOfPages = 10
control.frame = CGRect(x: 0, y: 300, width: 350, height: 30)
control.pageIndicatorTintColor = .systemRed
control.currentPageIndicatorTintColor = .systemGreen
if #available(iOS 14.0, *) {
    control.preferredIndicatorImage = UIImage(named:"heart")
}
self.view.addSubview(control)

preferredIndicatorImage可以将指示器图片替换成任意我们想要的图片
preferredIndicatorImage-w171

2.2 setIndicatorImage(UIImage?, forPage: Int)

可以设置任意page对应的图片,如果image为nil的话则显示圆点

let indicatorImages = ["summy", "cloudy", "rainy", "thunder"]
if #available(iOS 14.0, *) {
    for (idx, imageName) in indicatorImages.enumerated() {
        control.setIndicatorImage(UIImage(named:imageName), forPage: idx)
    }
}

setIndicatorImage-w238

2.3 自定义样式

通过iOS14中新增的几个属性,只能实现简单的自定义样式,想要实现完全的自定义仍旧需要采用之前的办法,在这之前先看一下UIPageControl在iOS14中层级的变化

[iOS 13]
[iOS 14]

圆点有原先UIView一个视图变成了由_UIPageControlContentView_UIPageControlIndicatorContentView_UIPageIndicatorView组合的视图,由于_UIPageIndicatorView是一个UIImageView,所以我们可以直接使用这个视图来呈现

if #available(iOS 14.0, *) {
    guard let dotContentView = findIndicatorContentView() else {
        return
    }
    
    for (index, view) in dotContentView.subviews.enumerated() {
        if view.isKind(of: UIImageView.self) {
            self.currentPageIndicatorTintColor = self.currentTintColor
            self.pageIndicatorTintColor = self.inactiveTintColor
            
            let indicatorView = view as! UIImageView
            indicatorView.image = nil
            if index == self.currentPage {
                indicatorView.image = currentImage.withRenderingMode(.alwaysTemplate)
            } else {
                indicatorView.image = inactiveImage.withRenderingMode(.alwaysTemplate)
            }
        }
    }
}

@available(iOS 14.0, *)
func findIndicatorContentView() -> UIView? {
    for contentView in self.subviews {
        if let contentViewClass = NSClassFromString("_UIPageControlContentView"), contentView.isKind(of: contentViewClass) {
            for indicatorContentView in contentView.subviews {
                if let indicatorContentViewClass = NSClassFromString("_UIPageControlIndicatorContentView"), indicatorContentView.isKind(of: indicatorContentViewClass) {
                    return indicatorContentView
                }
            }
        }
    }
    return nil
}
[自定义pageControl]

3.代码地址

小小个子大个头

原文链接:http://www.cnblogs.com/4zjq/p/14034333.html

 友情链接: NPS