程序员iOS Developer

Swift3.0: Storyboard实现毛玻璃效果以及对IB

2017-07-20  本文已影响139人  风御轩

最近公司项目收工,所以很清闲,于是抓紧时间开始练习swift,准备每天都做一个关于swift3.0的小练习,尽快适应编码习惯。

Storyboard实现毛玻璃效果很简单,直接将Visual Effect View 与View按照如下层级安放,然后将View的背景色设置为clearColor即可实现毛玻璃的效果:


view.png 毛玻璃效果.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
          }
    }
}
designable-button.png
 @IBDesignable class DesignableView: UIView {
      @IBInspectable var cornerRadius: CGFloat = 0{
          didSet{
              self.layer.cornerRadius = cornerRadius
           }
       }
}
designable-view.png

使用方法就是让希望有此效果的button或者view继承DesignableButton或者DesignableView即可出现相应属性,可以直接做修改。

具体代码详见我的仓库(此文章对应项目第3天的内容)

上一篇 下一篇

猜你喜欢

热点阅读