storyboard 开启实时渲染

在开发中，我们经常会遇到这样的需求，把图片、button设置成圆角的。通常会这么做：

imageView.layer.cornerRadius = newValue;
imageView.layer.masksToBounds =  yes

这样是设置好了，但是在运行之后我们才能看到效果，要看设置的漂不漂亮还得安装到手机运行起来才能看到。

现在有一种新的做法，就是开启storyboard 的实时渲染效果

新建一个工程，选择swift语言

将一个UIView 拖入到viewcontroller 中，添加好约束后，在viewcontroller中添加以下代码

extension UIView {
@IBInspectable var cornerRadius:CGFloat{
get{
return layer.cornerRadius;
}
set{
layer.cornerRadius = newValue;
layer.masksToBounds = (newValue > 0);
}
}
}

再来storyboard中看看

我们发现attributes inspector中多了一个属性



可以看到attributes inspector 中多了一个corner radius属性，然后设置一个数字，可以看到storyboard中对应的图片编程圆角的了。这样我们就可以在storyboard中实时预览效果了，但这样有个弊端，我们加的所有view 都是圆角的啦，



我只想给这个特定view加一个圆角

好吧，怎么做呢

新建一个文件，继承UIImageView

import UIKit

@IBDesignable

class RoundImageView:
UIImageView {

/*

// Only override drawRect: if you perform custom drawing.

// An empty implementation adversely affects performance during animation.

override func drawRect(rect: CGRect) {

// Drawing code

}

*/

@IBInspectable
var cornerRadius:CGFloat =
0 {

didSet{

layer.cornerRadius =
cornerRadius;

layer.masksToBounds =
cornerRadius > 0;

}

}

@IBInspectable
var borderWidth:CGFloat =
0 {

didSet{

layer.borderWidth =
borderWidth;

}

}

@IBInspectable
var borderColor :UIColor?{

didSet{

layer.borderColor =
borderColor?.CGColor;

}

}

}
这样，我们在storyboard中将我们要设置圆角的那个view 的identity inspector 中class 设置成RoundImageView，再来看看效果



这样是不是更好看呢。