iOS-swift使用xib自定义控件

1.新建一个自定义组件实现类 MyImageLable( 继承 UIView),因为是继承 UIView,“Also create XIB file”无法勾选。后面我们会手动创建一个 xib 文件并关联。
这里写图片描述
这里写图片描述
2.再新建一个同名的 XIB 文件
这里写图片描述

3.进行 xib与自定义组件类(MyImageLable)关联
注意:修改的是 MyImageLable.xib 中 File’s OwnerCustom Class,不要修改成 MyProgressBar.xib 里 ViewCustom 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!

    //@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
    }

    /*** 下面的几个方法都是为了让这个自定义类能将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.在Identity Inspector里把视图类改成MyImageLable
这里写图片描述

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

猜你喜欢

转载自blog.csdn.net/wa172126691/article/details/80267191