iOS-swift使用xib自定义控件

1.新建一个自定义组件实现类 MyImageLable（ 继承 UIView),因为是继承 UIView，“Also create XIB file”无法勾选。后面我们会手动创建一个 xib 文件并关联。


2.再新建一个同名的 XIB 文件

3.进行 xib与自定义组件类(MyImageLable)关联
注意：修改的是 MyImageLable.xib 中 File’s Owner 的 Custom Class，不要修改成 MyProgressBar.xib 里 View 的 Custom Class 了。

4.将 xib 文件中 View 的 Size 修改为 Freedom 并将其调整成合适的尺寸。

5.放置控件添加约束

6.编写自定义控件类MyImageLable
注意：在类的前面要添加 @IBDesignable,在属性观察器前设置@IBInspectable

//
//  MyImageLable.swift
//  H56580E2E
//
//

import UIKit

@IBDesignable class MyImageLable: UIView {
    //显示省份的标签
    @IBOutlet var label_ad: UILabel!
    //显示定位的图标
    @IBOutlet var image_ad: UIImageView!
    
    //为图标设置点击事件
    var rightImgClick:(() -> ())?
    
    //@IBInspectable:保证视图能够实时预览显示
    @IBInspectable var ad_str:String = "陕西省"{
        //设置属性观察器,保证属性值改变后实时刷新
        didSet{
            label_ad.text=ad_str
        }
    }
    
    //设置image图片
    @IBInspectable var img_str:String = "loc"{
        didSet{
            image_ad.image = UIImage(named: img_str)
        }
    }
    //设置image图片颜色
    @IBInspectable var img_color:UIColor = UIColor.black{
        didSet{
            image_ad.tintColor = img_color
        }
    }
    
    //设置颜色
    @IBInspectable var ad_color:UIColor = UIColor.black{
        didSet{
            label_ad.textColor = ad_color
        }
    }
    //初始化属性配置
    func initial(){
        label_ad.text = self.ad_str
        label_ad.textColor = self.ad_color
        image_ad.image = UIImage(named: self.img_str)
        image_ad.tintColor = self.img_color
        //右侧图标的点击事件
        let rightTapGesture = UITapGestureRecognizer(target: self, action: #selector(rightClick))
        right_img.addGestureRecognizer(rightTapGesture)
        right_img.isUserInteractionEnabled = true
    }
    //右边图标的点击事件
    @objc func rightClick(){
        if rightImgClick != nil{
            rightImgClick!()
        }
    }

   /*点击事件的使用方法
    *topNavBarView.rightImgClick = {
            print("点击")
        }*/
    
    /*** 下面的几个方法都是为了让这个自定义类能将xib里的view加载进来。这个是通用的，我们不需修改。 ****/
    var contentView:UIView!
    
    //初始化时将xib中的view添加进来
    override init(frame: CGRect) {
        super.init(frame: frame)
        contentView = loadViewFromNib()
        addSubview(contentView)
        addConstraints()
        //初始化属性配置
        initial()
    }
    
    //初始化时将xib中的view添加进来
    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        contentView = loadViewFromNib()
        addSubview(contentView)
        addConstraints()
        //初始化属性配置
        initial()
    }
    //加载xib
    func loadViewFromNib() -> UIView {
        let className = type(of: self)
        let bundle = Bundle(for: className)
        let name = NSStringFromClass(className).components(separatedBy: ".").last
        let nib = UINib(nibName: name!, bundle: bundle)
        let view = nib.instantiate(withOwner: self, options: nil).first as! UIView
        return view
    }
    //设置好xib视图约束
    func addConstraints() {
        contentView.translatesAutoresizingMaskIntoConstraints = false
        var constraint = NSLayoutConstraint(item: contentView, attribute: .leading,
                                            relatedBy: .equal, toItem: self, attribute: .leading,
                                            multiplier: 1, constant: 0)
        addConstraint(constraint)
        constraint = NSLayoutConstraint(item: contentView, attribute: .trailing,
                                        relatedBy: .equal, toItem: self, attribute: .trailing,
                                        multiplier: 1, constant: 0)
        addConstraint(constraint)
        constraint = NSLayoutConstraint(item: contentView, attribute: .top, relatedBy: .equal,
                                        toItem: self, attribute: .top, multiplier: 1, constant: 0)
        addConstraint(constraint)
        constraint = NSLayoutConstraint(item: contentView, attribute: .bottom,
                                        relatedBy: .equal, toItem: self, attribute: .bottom,
                                        multiplier: 1, constant: 0)
        addConstraint(constraint)
    }
    
}

7.在.storyBoard中使用自定义组件

8.在 Custom Class里把视图类改成MyImageLable

由此就完成了,就可以使用了

参考的博主地址