iOS中自定义进度条设置半透明背景(Swift 3)

在显示进度条的时候，有时候会发现用自带的progressView可自定义的属性比较少，并不能满足某些需求，继承UIView重新实现一个也挺方便的，自定义progress view 代码如下：

import Foundation
import UIKit

class DOVProgressView: UIView {


    private let textLabel = UILabel()


    private let bar = UIView()

    public var progress: Float = 0{
        didSet{
            percent = Int(progress * 100)
        }
    }

    var percent: Int = 0 {
        didSet {
            if percent > 100 {
                percent = 100
            }else if percent < 0 {
                percent = 0
            }
            textLabel.text =  "\(percent)%"
            setNeedsLayout()
        }
    }

    //文本颜色
    var color: UIColor = UIColor.black {
        didSet {
            textLabel.textColor = color
        }
    }

    //进度条颜色
    var barColor: UIColor = UIColor.orange {
        didSet {
            bar.backgroundColor = barColor
        }
    }

    //进度条背景颜色
    var barBgColor: UIColor = UIColor.white {
        didSet {
            layer.backgroundColor = barBgColor.cgColor
        }
    }


    override init(frame: CGRect) {
        super.init(frame: frame)

        initialSetup()
    }


    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)

        initialSetup()
    }

    private func initialSetup(){
        bar.backgroundColor = self.barColor
        addSubview(bar)

        self.layer.cornerRadius = CGFloat(12)
        self.layer.masksToBounds = true
        self.bar.layer.cornerRadius = CGFloat(12)
        self.bar.layer.masksToBounds = true

        textLabel.textAlignment = .center
        textLabel.numberOfLines = 0
        textLabel.textColor = self.color
        textLabel.text = "\(self.percent)%"
        addSubview(textLabel)
    }


    override func layoutSubviews() {
        super.layoutSubviews()

        layer.backgroundColor = self.barBgColor.cgColor

        var barFrame = bounds
        barFrame.size.width *= (CGFloat(self.percent) / 100)
        bar.frame = barFrame

        textLabel.frame = bounds
    }
}

自定义进度条后，想让进度条显示在一个半透明的背景上，这样的操作还是经常遇到的，可以直接在屏幕上加一个Window，然后把自定义的进度条显示在上面，代码如下：

import Foundation
import UIKit

class DOVUserInteractiveManager: NSObject {

    private var _boardWindow : UIWindow?

    static let shared : CXEUserInteractiveManager = {
        let instance = CXEUserInteractiveManager.init()
        return instance
    }()

    //    MARK:load界面
    var boardWindow : UIWindow {
        if(self._boardWindow == nil) {

            let window : UIWindow = UIWindow(frame: UIScreen.main.bounds)
            window.windowLevel = UIWindowLevelStatusBar
            window.backgroundColor = UIColor.gray.withAlphaComponent(0.7)
            window.isUserInteractionEnabled = true
            window.makeKeyAndVisible()


            self._boardWindow = window
        }
        return self._boardWindow!
    }

    public func diss() {
        self.boardWindow.isHidden = true
        self.boardWindow.removeFromSuperview()
    }

    public func show(_ view : UIView) {
        self.boardWindow.addSubview(view)
        self.boardWindow.isHidden = false
    }

}

使用方法如下：

import UIKit

class ViewController: UIViewController {

    var timer:Timer?
    var progress:Float = 0

    override func viewDidLoad() {
        super.viewDidLoad()

        let button = UIButton(type: .system)
        button.setTitle("点我点我点我", for: .normal)
        button.frame = CGRect(x:0, y:0, width:Int(UIScreen.main.bounds.width.native * 0.8), height:30)
        button.center = CGPoint(x: UIScreen.main.bounds.midX, y: UIScreen.main.bounds.midY - 50)
        button.addTarget(self, action: #selector(self.onClike), for: .touchUpInside)

        self.view.addSubview(button)

    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }

    func onClike(){
        let progressView = CXEProgressView(frame: CGRect(x:0, y:0, width:Int(UIScreen.main.bounds.width.native * 0.8), height:22))
        progressView.center = CGPoint(x: UIScreen.main.bounds.midX, y: UIScreen.main.bounds.midY)
        DOVUserInteractiveManager.shared.show(progressView)

        let cancelProgressButton = UIButton(type: .system)
        cancelProgressButton.frame = CGRect(x: 0, y: 0, width: Int(UIScreen.main.bounds.width.native * 0.8), height: 60)
        cancelProgressButton.center = CGPoint(x: UIScreen.main.bounds.midX, y: UIScreen.main.bounds.midY + 80)
        let attributes:[String:Any] = [NSFontAttributeName: UIFont.systemFont(ofSize: 15)]
        cancelProgressButton.setAttributedTitle(NSAttributedString(string:"你再点我试试", attributes: attributes), for: .normal)
        cancelProgressButton.tintColor = UIColor.white
        cancelProgressButton.addTarget(self, action: #selector(self.onCancleProgress), for: .touchUpInside)
        DOVUserInteractiveManager.shared.show(cancelProgressButton)

        timer = Timer.scheduledTimer(withTimeInterval: 0.5, repeats: true){_ in 
            progressView.progress = self.progress
            self.progress += 0.1
        }
    }

    func onCancleProgress(){
        CXEUserInteractiveManager.shared.diss()
        self.timer?.invalidate()
    }
}


Contact GitHub API Training Shop Blog About

Demo下载：https://github.com/Willib/CustomProgress

效果如下：