在IOS中创建自定义UI控件,且使相关属性显示在Xcode属性栏中

吴统威 on 编程语言 SWIFT | 2015-03-26 14:49:56.0

其实这篇文章是基于近期使用IOS自带的控件,创建复杂的界面的时候,布局也变得复杂的情况,需要将其改善而变得简单易维护.为了实现这个目的,也在谷歌中找了很多资料,那看看怎么实现自定义的控件!我们来创建一个简单的带label的输入框

首先我们必须要创建一个UIView的子类,然后声明其为在视图中需要显示为UI控件(这是我的理解) 在这个类中加入注解@@IBDesignable

@IBDesignable class CustomUI:UIView{

当然这样这个UI控件就可以在视图中使用了.但是控件需要实现相关的功能,我们加入一些简单的属性

@IBInspectable var viewColor:UIColor = UIColor.blackColor(){
     didSet{
        setView()
     }
    
}
    
@IBInspectable var inputColor:UIColor = UIColor.orangeColor(){
    didSet{
        setView()
    }
}
    
    
@IBInspectable var labeltext:NSString = String(){
    didSet{
        setView()
    }
}

这时候我们在storyboard里面增加个UIView设置class为CustomUI,属性栏会出现这几个属性的设置

setView这个方法是为了在改变属性值之后,更新UI界面,UI界面的控件Label和UITextField都使用了自动布局,以适应不同的屏幕

 private func setView(){
        layer.backgroundColor = viewColor.CGColor
        
        //
        let label:UILabel = UILabel(frame: CGRect(x: 0, y:0, width: 80, height: 25))
        label.text = labeltext as String
        self.addSubview(label)
        label.backgroundColor = UIColor.whiteColor()
        
        //
        let input:UITextField = UITextField(frame: CGRect(x:label.frame.width,y:0,width:200,height:35))
        input.layer.backgroundColor = inputColor.CGColor
        self.addSubview(input)
        
        //
        
        
        
        //设置Labl启用NSLayoutConstraint
        label.setTranslatesAutoresizingMaskIntoConstraints(false)
        //设置label左边距离父视图左边的距离
        self.addConstraint(NSLayoutConstraint(item: label, attribute: NSLayoutAttribute.Left, relatedBy: NSLayoutRelation.Equal, toItem: self, attribute: NSLayoutAttribute.Left, multiplier: 1, constant: 10))
        //设置label高度,相对于父视图而言
        self.addConstraint(NSLayoutConstraint(item: label, attribute: NSLayoutAttribute.Height, relatedBy: NSLayoutRelation.Equal, toItem: self, attribute: NSLayoutAttribute.Height, multiplier: 1, constant: -5))
        //设置与input之间的距离
        self.addConstraint(NSLayoutConstraint(item: label, attribute: NSLayoutAttribute.Right, relatedBy: NSLayoutRelation.Equal, toItem: input, attribute: NSLayoutAttribute.Left, multiplier: 1, constant:-10))
        //设置label在父视图中垂直居中
        self.addConstraint(NSLayoutConstraint(item: label, attribute: NSLayoutAttribute.CenterY, relatedBy: NSLayoutRelation.Equal, toItem: self, attribute: NSLayoutAttribute.CenterY, multiplier: 1, constant: 0))
        
        
        //启用NSLayoutConstraint
        input.setTranslatesAutoresizingMaskIntoConstraints(false)
        //在父视图垂直居中
        var layout = NSLayoutConstraint(item: input, attribute: NSLayoutAttribute.CenterY, relatedBy: NSLayoutRelation.Equal, toItem: self, attribute: NSLayoutAttribute.CenterY, multiplier: 1.0, constant: 0)
        //距离父视图右边的多少像素
        let layout2 = NSLayoutConstraint(item: input, attribute: NSLayoutAttribute.Right, relatedBy: NSLayoutRelation.Equal, toItem: self, attribute: NSLayoutAttribute.Right, multiplier:1, constant: -10)
        //距离父视图左边
        let layout3 = NSLayoutConstraint(item: input, attribute: NSLayoutAttribute.Left, relatedBy: NSLayoutRelation.Equal, toItem: self, attribute: NSLayoutAttribute.Left, multiplier:1, constant: label.frame.width+20)
        //与label高度一致
        let layout4 = NSLayoutConstraint(item: input, attribute: NSLayoutAttribute.Height, relatedBy: NSLayoutRelation.Equal, toItem: label, attribute: NSLayoutAttribute.Height, multiplier:1, constant: 0)
        
        self.addConstraint(layout4)
        self.addConstraint(layout3)
        self.addConstraint(layout2)
        self.addConstraint(layout)
        self.setNeedsDisplay()
        
        //
        
    }

这里重要的代码就写完了,效果

全部代码

import UIKit

//IBInspectable 这个属性可以显示在代码编辑器的右边中
@IBDesignable class CustomUI:UIView{
    
    @IBInspectable var viewColor:UIColor = UIColor.blackColor(){
        
        didSet{
            setView()
        }
        
        
    }
    
    
    @IBInspectable var inputColor:UIColor = UIColor.orangeColor(){
        didSet{
            setView()
        }
    }
    
    
    @IBInspectable var labeltext:NSString = String(){
        didSet{
            setView()
        }
    }
    
    
    override init() {
        super.init()
        setView()
    }
    
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        setView()
    }
    
    //这个是必须要写的初始函数
    required init(coder aDecoder: NSCoder) {
        
        super.init(coder: aDecoder)
        setView()
        
    }
    
    
    
    private func setView(){
        layer.backgroundColor = viewColor.CGColor
        
        //
        let label:UILabel = UILabel(frame: CGRect(x: 0, y:0, width: 80, height: 25))
        label.text = labeltext as String
        self.addSubview(label)
        label.backgroundColor = UIColor.whiteColor()
        
        //
        let input:UITextField = UITextField(frame: CGRect(x:label.frame.width,y:0,width:200,height:35))
        input.layer.backgroundColor = inputColor.CGColor
        self.addSubview(input)
        
        //
        
        
        
        //设置Labl启用NSLayoutConstraint
        label.setTranslatesAutoresizingMaskIntoConstraints(false)
        //设置label左边距离父视图左边的距离
        self.addConstraint(NSLayoutConstraint(item: label, attribute: NSLayoutAttribute.Left, relatedBy: NSLayoutRelation.Equal, toItem: self, attribute: NSLayoutAttribute.Left, multiplier: 1, constant: 10))
        //设置label高度,相对于父视图而言
        self.addConstraint(NSLayoutConstraint(item: label, attribute: NSLayoutAttribute.Height, relatedBy: NSLayoutRelation.Equal, toItem: self, attribute: NSLayoutAttribute.Height, multiplier: 1, constant: -5))
        //设置与input之间的距离
        self.addConstraint(NSLayoutConstraint(item: label, attribute: NSLayoutAttribute.Right, relatedBy: NSLayoutRelation.Equal, toItem: input, attribute: NSLayoutAttribute.Left, multiplier: 1, constant:-10))
        //设置label在父视图中垂直居中
        self.addConstraint(NSLayoutConstraint(item: label, attribute: NSLayoutAttribute.CenterY, relatedBy: NSLayoutRelation.Equal, toItem: self, attribute: NSLayoutAttribute.CenterY, multiplier: 1, constant: 0))
        
        
        //启用NSLayoutConstraint
        input.setTranslatesAutoresizingMaskIntoConstraints(false)
        //在父视图垂直居中
        var layout = NSLayoutConstraint(item: input, attribute: NSLayoutAttribute.CenterY, relatedBy: NSLayoutRelation.Equal, toItem: self, attribute: NSLayoutAttribute.CenterY, multiplier: 1.0, constant: 0)
        //距离父视图右边的多少像素
        let layout2 = NSLayoutConstraint(item: input, attribute: NSLayoutAttribute.Right, relatedBy: NSLayoutRelation.Equal, toItem: self, attribute: NSLayoutAttribute.Right, multiplier:1, constant: -10)
        //距离父视图左边
        let layout3 = NSLayoutConstraint(item: input, attribute: NSLayoutAttribute.Left, relatedBy: NSLayoutRelation.Equal, toItem: self, attribute: NSLayoutAttribute.Left, multiplier:1, constant: label.frame.width+20)
        //与label高度一致
        let layout4 = NSLayoutConstraint(item: input, attribute: NSLayoutAttribute.Height, relatedBy: NSLayoutRelation.Equal, toItem: label, attribute: NSLayoutAttribute.Height, multiplier:1, constant: 0)
        
        self.addConstraint(layout4)
        self.addConstraint(layout3)
        self.addConstraint(layout2)
        self.addConstraint(layout)
        self.setNeedsDisplay()
        
        //
        
    }
    
    
    
    
    
}

android项目没有android.jar这个依赖包的解决办法

The Swift Code之应用程序的启动过程