在日常开发中，一个App会有很多模块中的小模块相差不多。这时候我们就需要考虑公用 -- 自定义View ， 这样就可以避免很多重复的代码。
有哪些需要考虑的
- 首先要考虑不同的调用，纯代码的方式或者Xib 、Storyboard的方式都要可以使用
- 要有一定的可定制化 ，也就是暴露出来的属性
- 使用起来简单
实例
例如有这样的 View 在不同的地方有用到。
截图
很简单的一个视图，图片加文字加边框。
首先，新建一个UIView的子类ImageTextView , 在class前面添加open关键字 （我们要做成公用的）
删除drawRect相关方法，将下面代码复制进去
public override init(frame: CGRect) {
super.init(frame: frame)
#if !TARGET_INTERFACE_BUILDER // 非interfabuilder环境下
// 如果是从代码层面开始使用Autolayout,需要对使用的View的translatesAutoresizingMaskIntoConstraints的属性设置为false
translatesAutoresizingMaskIntoConstraints = false
#endif
prepareView()
}
required public init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
prepareView()
}
// 布局
func prepareView(){
}
init?(coder:)是从Xib或者Storyboard创建的时候会调用。 其他看注释咯 - _ -
为UIImageView添加一个扩展,方便创建UIImageView对象
extension UIImageView {
class func configuredImageView() -> UIImageView {
let imageView = UIImageView()
imageView.translatesAutoresizingMaskIntoConstraints = false
imageView.clipsToBounds = true
imageView.contentMode = .scaleAspectFill
return imageView
}
}
回到ImageTextView中声明图片和文本的变量
fileprivate let imageView = UIImageView.configuredImageView()
fileprivate lazy var textLabel = UILabel()
在prepareView中对图片和文本进行布局
// 布局
func prepareView(){
textLabel.translatesAutoresizingMaskIntoConstraints = false
textLabel.font = UIFont.systemFont(ofSize: CGFloat(textSize))
addSubview(imageView)
addSubview(textLabel)
imageView.setContentCompressionResistancePriority(1000, for: .horizontal )
NSLayoutConstraint.activate([
imageView.leftAnchor.constraint(equalTo: leftAnchor, constant:10 ) ,
imageView.centerYAnchor.constraint(equalTo: centerYAnchor) ,
textLabel.leftAnchor.constraint(equalTo: imageView.rightAnchor , constant:2 ) ,
textLabel.centerYAnchor.constraint(equalTo: centerYAnchor) ,
textLabel.rightAnchor.constraint(equalTo: rightAnchor, constant:-10)
])
layer.borderColor = UIColor.lightGray.cgColor
layer.borderWidth = 0.5
layer.cornerRadius = 3
}
这里的布局方法是iOS 9 开始支持的API ， 当然你也可以使用SnapKit
为了使我们的View可以在 InterfaceBuilder 中使用，在类前面使用注解 @IBDesignable
并暴露出可以自定义的属性
extension ImageTextView{
@IBInspectable
open var image:UIImage?{
get{
return imageView.image
}
set{
imageView.image = newValue
}
}
@IBInspectable
open var text:String?{
get{
return textLabel.text
}
set{
textLabel.text = newValue ?? ""
}
}
@IBInspectable
open var textColor:UIColor? {
get{
return textLabel.textColor
}
set{
textLabel.textColor = newValue
}
}
}
在变量声明下面在加上字体大小
// 这里使用 textSize 是因为 IBInspectable 暂时还不支持 UIFont
@IBInspectable
open var textSize:UInt = 17 {
didSet{
textLabel.font = UIFont.systemFont(ofSize: CGFloat(textSize))
}
}
这块由于暂时不支持UIFont所以使用了UInt
我们还可以在InterfaceBuilder渲染前做一些事情
override open func prepareForInterfaceBuilder() {
super.prepareForInterfaceBuilder()
// interface builder 渲染前执行 不会影响真正运行效果
layer.borderColor = UIColor.lightGray.cgColor
layer.borderWidth = 0.5
layer.cornerRadius = 3
}
到这里，这个自定义View就算完成了，看下载Storyboard中的使用吧
随便拖一个UIView
修改Class属性
截图
保存后就可以看到这些属性了
截图
设置完成后 InterfaceBuilder 立刻会渲染出来
截图
这里是我随便设了几个属性
截图
有了这个自定义的View，那么在任何地方有相似效果，我们只需要像拖UILabel一样把他拖出来简单的设置下属性就好了（也可以通过手写代码创建）。当然，这只是一个简单的demo，并没有涉及到事件Layer以及动画等，如果有兴趣下次再讲。
