Swift3.0: Storyboard实现毛玻璃效果以及对IB
2017-07-20 本文已影响139人
风御轩
最近公司项目收工,所以很清闲,于是抓紧时间开始练习swift,准备每天都做一个关于swift3.0的小练习,尽快适应编码习惯。
Storyboard实现毛玻璃效果很简单,直接将Visual Effect View 与View按照如下层级安放,然后将View的背景色设置为clearColor即可实现毛玻璃的效果:
![](https://img.haomeiwen.com/i2167230/a12eae8a75497a29.png)
![](https://img.haomeiwen.com/i2167230/e8a292a358463ba4.png)
另外补充一点别的知识点就是关于IBDesignable的,使用 @IBDesignable 自定义 UIButton 与 UIView 在storyBoard中的可视化属性,可以通过右侧工具栏直接修改期望得到的圆角等属性,十分便利。
@IBDesignable class DesignableButton: UIButton {
@IBInspectable var borderWidth: CGFloat = 0.0{
didSet{
self.layer.borderWidth = borderWidth
}
}
@IBInspectable var borderColor: UIColor = UIColor.clear{
didSet{
self.layer.borderColor = borderColor.cgColor
}
}
@IBInspectable var cornerRadius: CGFloat = 0{
didSet{
self.layer.cornerRadius = cornerRadius
}
}
}
![](https://img.haomeiwen.com/i2167230/afd9d83aa748ec1c.png)
@IBDesignable class DesignableView: UIView {
@IBInspectable var cornerRadius: CGFloat = 0{
didSet{
self.layer.cornerRadius = cornerRadius
}
}
}
![](https://img.haomeiwen.com/i2167230/d14539f03ebaea68.png)
使用方法就是让希望有此效果的button或者view继承DesignableButton或者DesignableView即可出现相应属性,可以直接做修改。
具体代码详见我的仓库(此文章对应项目第3天的内容)