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!
//@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
由此就完成了,就可以使用了