1. 程式人生 > >iOS中自定義進度條設定半透明背景(Swift 3)

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

效果如下:
執行截圖