美文网首页程序员iOS Developer
Swift3.0: Storyboard实现毛玻璃效果以及对IB

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

作者: 风御轩 | 来源:发表于2017-07-20 16:45 被阅读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天的内容)

相关文章

网友评论

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

    本文链接:https://www.haomeiwen.com/subject/jqcjkxtx.html