第一个Xcode项目(2) - Auto Layout - 布局

［相关信息：Xcode7.2 ; Swift2.0］

先回顾一下效果图

看起来还不错的设计图

第一行图标已经完成了，那第二行色块圆也是同理，跟第一行的Button放在一个View容器里，然后添加各种约束 (色块的宽高都为40)，这里图就不一一贴了。直接上完成图

第二行色块完成图
设置第一行按钮的背景为图标 删除第二行Button的文字，然后运行下App (Command+R)
运行效果图

嗯，效果好像有什么地方不一样 -> 它怎么不是圆的！！属性面板上好像也没看到设置圆角的地方。难道要用代码才能设置！！？

经过一番折腾和努力，发现可以在属性面板上直接设置，好，让我来娓娓道来

设置Button的圆角值，边框的颜色和宽度

设置好之后运行看下效果 (Command+R)

运行后的效果 咦～～为什么颜色是黑色！？然后我改了红色，绿色，蓝色，然后它显示的都是黑色！！

让我们看看问题在哪里？

代码里看看怎么设置borderColor

override func viewDidLoad() {
    super.viewDidLoad()// Do any additional setup after loading the view, typically from a nib.
    let button = UIButton.init()
    button.layer.borderColor = UIColor.redColor().CGColor
}

首先我们在代码里初始化了一个Button控件，然后在设置borderColor发现，它接受的颜色类型为CGColor。CGColor？什么鬼？

百度一下，我就知道

CGColor主要用于CoreGaphics框架之中，CGColor其实是个结构体，而我们通常在使用的CGColor的时候使用的是它的引用类型CGColorRef。CGColor主要由CGColorSapce和Color Components两个部分组成，同样的颜色组成，如果颜色空间不同的话，解析出来的结果可能会有所不同。这就像我们在处理图片数据的时候，如果把RGBA格式当成BGRA格式处理的结果可想而知。在Quartz 2D中CGColor常用来设置context的填充颜色，设置透明度等。

不知道这个解释在说个卵。

那再来看看我们给它的是什么Color？......经过调查显示 -> User Defined Runtime Attributes里面设置Color是UIColor
这样一来，Button接收的颜色和我们给予的颜色类型不统一，那我们就无法改变它的颜色了。

作为一个初学者能遇到的问题，其它大大肯定回答过这个问题，所以我找到了以下的解决方案：

//User Defined Runtime Attributes, UIColor -> CGColor
extension CALayer{
    public func setBorderColorFromUIColor(color: UIColor) {
        self.borderColor = color.CGColor
    }
}

扩展CAlayer，为它添加一个UIColor转CGColor的方法

然后我们改一下User Defined Runtime Attributes里面的设置
把layer.borderColor -> layer.borderColorFromUIColor

修改User Defined Runtime Attributes

最后我们来运行一下APP，看下效果 (Command+R)

运行后的效果
Perfect！！！收工～