(简)纯代码创建自定义控件

IOS控件库中自带的Button控件可以设置一张图像和标题，如图

可是如果我想要左右分别展示一张图片这个原生控件就无能为力了，就像下面这个按钮

这个按钮右边需要加一个右箭头图片，可是IOS原生的Button是不能加两张图片的（是不是看这个按钮有点熟悉？没错，微信「发现」里面的按钮就是这样的）
这个时候就需要我们自定义一个Button按钮控件了

OK,下面是最终效果图

那么，我们开始吧！

首先,先建立一个叫做CustomButton的SWIFT工程，选择Single View Application
接着command+N,选择Cocoa Touch Class，创建一个类名是CustomButton的类，继承自UIControl

完成上面两个步骤整个工程大概是这个样子的

恩~然后我们去Main.storyboard选中唯一的一个ViewController,再去identity inspector将它的Custom Class设置成工程自动生成的ViewController.swift（你不知道identity inspector是啥？好吧，就在面板右上角那一排小按钮左起第三个）完成后像下面这样

都弄好了吧？下面该写代码了！我们先用代码创建一个超简单的自定义控件吧！

打开ViewController.swift在viewDidLoad中加入以下代码

 //Creat a custom button let button = CustomButton() //创建实例 button.frame = CGRectMake(0, 100, 200, 50)//设置位置和大小 button.backgroundColor = UIColor.blackColor()//设置背景颜色 //Add to the View self.view.addSubview(button)//加入主View的子View

运行程序

你看，是不是多了个黑块？这就是咱们刚刚创建出来的CustomButton自定义控件~但是我们现在对它什么也不能做。

下面进入我们之前创建的CustomButton.swift文件，我们要为这个自定义的控件加一些有用的东西，比如两个UIImageView和一个UILable。在这之前，我们要先实现CustomButton的初始化方法，在CustomButton类中继承以下方法

    override init(frame: CGRect) {        super.init(frame:frame)    }    required init?(coder aDecoder: NSCoder) {        fatalError("init(coder:) has not been implemented")    }

再给CustomButton添加几个子 View，一个UILabel显示按钮标题，两个UIImageView显示左右图片。还要加入一个方法用来设置刚才这三个View的具体值，就叫做config()吧，这时候CustomButton整体是这个样子的

在这里我要说一下，为什么要实现init(frame:)这个方法，因为不管如何初始化这个类，这个方法是一定会被调用的，所以我们将在这个方法里放一些必要的初始化代码。
至于下面那个init?(coder aDecoder: NSCoder)函数，你如果继承了init(frame:)这个函数，就需要同时继承init?(coder aDecoder:NSCoder)

我们已经创建好了三个子view，现在需要把这三个view加入到我们的自定义控件中去，修改 init(frame:CGRect)如下：

override init(frame: CGRect) {        super.init(frame:frame)        //Add Subviews        self.addSubview(leftImageView)        self.addSubview(rightImageView)        self.addSubview(titleLabelView)}

这里的self指的是CustomButton本身，也就是我们创建的自定义控件，上面这一段将三个子view加入到我们的自定义控件中。
但是，这三个view还没确定在CustomButton显示的位置和大小，这就需要我们继承另一个函数，来确定这三个view的位置以及大小

override func layoutSubviews() {        let width = self.frame.width        let height = self.frame.height        leftImageView.frame = CGRect(x: 0, y:0, width: height, height: height)        rightImageView.frame = CGRect(x:width-height, y: 0, width: height, height: height)        titleLabelView.frame = CGRect(x: height, y: 0, width: width-height*2, height: height)        titleLabelView.textAlignment = NSTextAlignment.Left}

layoutSubviews()这个函数作用和它的名字是一样的，当需要重新布局子view的时候系统会自动调用这个函数，我们新加了三个view到我们的CustomButton当然需要重新布局了，所以这个函数会被调用。在这个函数中，我们分别设置了三个view的frame，并且将titleLabelView的文字对齐方式设置成了左对齐。

接着我们要填充之前建立的config()函数

 func config(leftImg:UIImage?,rightImg:UIImage?,title:String?) {        leftImageView.image = leftImg        rightImageView.image = rightImg        titleLabelView.text = title    }

将三个值赋值给响应的子view就可以了。现在CustomButton已经基本写完了，这个类整体应该是这个样子的

那么我们现在回到ViewController
将viewDidLoad()修改成这样

    override func viewDidLoad() {        super.viewDidLoad()        //Creat a custom button        let button = CustomButton()        button.frame = CGRectMake(0, 100, self.view.bounds.size.width, 32)        button.config(UIImage.init(named: "service"), rightImg: UIImage.init(named: "arrow_right"), title: "Title")        //Add to the View        self.view.addSubview(button)    }

这比之前的多了一句button.config(UIImage.init(named: "service"), rightImg: UIImage.init(named: "arrow_right"), title: "Title"),这句是用来配置我们自定义按钮的图片和标题的。图片要提前加入Assests.xcassets文件中，图片是32pix。

现在运行程序，可以看到，我们的自定义按钮已经显示出来了

但是当我们触摸这个自定义按钮的时候，会发现没有任何变化，这可和我们平时遇见的Button不一样，看来我们还需要对CustomButton进行修改。

打开CustomButton.swift，在init(frame:CGRect)的最后加入下面的代码

        self.addTarget(self, action: #selector(touchIn), forControlEvents: .TouchDown)        self.addTarget(self, action: #selector(touchExit), forControlEvents: .TouchDragExit)        self.addTarget(self, action: #selector(touchEnd), forControlEvents: .TouchUpInside)

这三行代码的意思是当这个自定义控件遇到了TouchDown TouchDragExit或者TouchUpInside事件的时候，分别会触发touchIn,touchExit,touchEnd其中之一的函数。

然后，我们在CustomButton类中再加入以下三个函数

func  touchIn() {        self.backgroundColor = UIColor.lightGrayColor().colorWithAlphaComponent(0.3)    }func touchExit() {        self.backgroundColor = UIColor.whiteColor()    }func touchEnd() {        self.backgroundColor = UIColor.whiteColor()    }

上面这段代码的主要工作是针对不同的触摸事件改变控件的背景颜色，当手指按压控件的时候，将控件的背景颜色设置成lightGrayColor()（后面的colorWithAlphaComponent(0.3)是设置透明度的，因为我觉得lightGrayColor()这个颜色还是太深了），当手指抬起或者离开控件的时候，将控件背景色设置成白色，也就是默认颜色，这样，控件就有了触摸效果了。

现在整个CustomButton是这个样子的

运行程序

到此这个自定义控件就设计完了，以后只要实例化CustomButton这个类，再调用config(_:)这个函数设置图片和标题就可以使用这个控件了。

那么下面说一下具体如何使用这个控件，打开ViewController.swift
在类中加入下面这个变量

 var num=0

在viewDidLoad()最后加入下面这句

button.addTarget(self, action: #selector(click), forControlEvents: .TouchUpInside)

再写一个新函数click()

func click() {        button.config(UIImage.init(named: "service"), rightImg: UIImage.init(named: "arrow_right"), title: String(num))        num += 1    }

现在ViewController整体是这样的

button.addTarget(self, action: #selector(click), forControlEvents: .TouchUpInside)这句话的意思是当用户点击自定义控件，触发TouchUpInside这个事件的时候，调用click这个函数，click这个函数中会改变自定义控件的标题名称。

运行程序

搞定!