IOS之XIB结合UIView制作自定义组件

这里实现一个简单的进度条组件。用户可以自由设置进度条的进度、尺寸、文字颜色、进度条颜色、背景颜色。不同的是，我们这里创建的时候引入 xib 文件来实现布局。

1.自定义组件的创建

• 1.定义一个ProgressView继承自UIView，由于继承自UIview ，XIB文件无发直接勾选创建，我们需要自己创建一个XIB文件ProgressView.xib

• 2打开创建的xib文件将File’s Owner的Custom class设置为我们自定义的组件名称，注意： 修改的是File’s Owner的Custom class而不是ProgressView.xib中的 Custom class了。
  

• 3.然后将view中的Size设置成为Freefrom，并将其调整合适的
  

• 4 将view 中的各个标签设置好约束
  

• 5.将空间关联到ProgressView.swift中，并补充其代码

class ProgressView: UIView {

    //显示当前的进度
    @IBOutlet weak var progressLable: UILabel!
    
    //显示当前进度区域
    @IBOutlet var progressView: UIView!
    
    
    // 接下来我们需要加载整个XIB的View到当前view下
    var contentView: UIView!
    
    //进度
    @IBInspectable var percent: Int = 0 {
        didSet {
            if percent > 100 {
                percent = 100
            }else if percent < 0 {
                percent = 0
            }
            progressLable.text =  "\(percent)%"
            setNeedsLayout()
        }
    }
     
    //文本颜色
    @IBInspectable var color: UIColor = .white {
        didSet {
            progressLable.textColor = color
        }
    }
     
    //进度条颜色
    @IBInspectable var barColor: UIColor = UIColor.orange {
        didSet {
            progressView.backgroundColor = barColor
        }
    }
     
    //进度条背景颜色
    @IBInspectable var barBgColor: UIColor = UIColor.lightGray {
        didSet {
            layer.backgroundColor = barBgColor.cgColor
        }
    }
    //初始化默认属性配置
    func initSetup(){
        progressLable.text =  "\(self.percent)%"
        progressLable.textColor = self.color
        progressView.backgroundColor = self.barColor
        layer.backgroundColor = self.barBgColor.cgColor
    }
    
    //布局相关设置
       override func layoutSubviews() {
           super.layoutSubviews()
    
           var barFrame = bounds
           barFrame.size.width *= (CGFloat(self.percent) / 100)
           progressView.frame = barFrame
       }
    
    //通过代码创建走这个方法--》 最终走init（）方法
    override init(frame: CGRect) {
        super.init(frame: frame)
        
        contentView = loadNibView()
        addSubview(contentView)
        addConstraints()
        
        //初始化属性
        initSetup()
    }
    
    //自定义view的时候 ，为了使用 xib 和 纯代码创建。
    //注 ： required init?(coder aDecoder: NSCoder) 必须加上 ，里面实现 super.init(coder: aDecoder)。
    //系统默认实现是 fatalError("init(coder:) has not been implemented") ，xib初始化的时候会crash。
    //通过xib创建的走这个方法 --》 然后在走awakeFromNib() 方法
    required init?(coder: NSCoder) {
        super.init(coder: coder)
        contentView = loadNibView()
        addSubview(contentView)
        addConstraints()
        
        //初始化属性
        initSetup()
    }
    
    
    //MARK: -- 加载XIB的方法
    func loadNibView() -> UIView {
        let className = type(of: self)//返回当前self的类型
        let bundle = Bundle(for: className)
        //取得xib的名称 因为swift中的类的类型是 命名空间（target name).类名
        let name = NSStringFromClass(className).components(separatedBy: ".").last
        //加载xib的view
        let nib = UINib.init(nibName: name!, bundle: bundle)
        let view = nib.instantiate(withOwner: self, options: nil).first as! UIView
        
        return view
        
    }
    
    //给View添加约束
    func addConstraints() -> Void {
        contentView.translatesAutoresizingMaskIntoConstraints = false
        addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "H:|-0-[contentView]-0-|", options: NSLayoutConstraint.FormatOptions.init(rawValue: 0), metrics: nil, views: ["contentView": contentView as Any]))
        addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "V:|-0-[contentView]-0-|", options: NSLayoutConstraint.FormatOptions.init(rawValue: 0), metrics: nil, views: ["contentView": contentView as Any]))
    }
    
}

2.自定义组件的使用

2.1在代码中使用自定义组件

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        
        let progressView = ProgressView.init(frame: CGRect.init(x: 0, y: 0, width: 100, height: 100))
        progressView.percent = 50
        view.addSubview(progressView)
    }


}

2.2 在Storyboard中使用自定义组件

• 在Storyboard中添加一个View组件
  
• 在Identity Inspector里把视图类改成MyProgressBar,然后在调整其他属性就可以了