UIImageView 添加四边阴影与圆角

kicinio

于 2021-06-22 22:03:46 发布

阅读量1k

点赞数

分类专栏： # iOS 控件文章标签： ios swift xcode

本文链接：https://blog.csdn.net/kicinio/article/details/118118784

版权

iOS 控件专栏收录该内容

25 篇文章 2 订阅

订阅专栏

前言：
Apple Music的“正在播放”视图中展示精妙绝伦的UImageView控件效果，其动态景深与圆角矩形构成了超现代化的设计风格与理念。下面是其使用过程中的效果：
在这里插入图片描述

设置圆角矩形与阴影：

    private var imageView: UIImageView!
    
    private func initView(){
        imageView = UIImageView()
        
        let image = UIImage(named: "taylor")
        imageView.image = image
        imageView.layer.masksToBounds = true
        imageView.layer.cornerRadius = 10
        imageView.layer.shadowOpacity = 0.2
        imageView.layer.shadowColor = UIColor.black.cgColor
        imageView.layer.shadowOffset = CGSize(width: 7, height: 7)
        imageView.layer.shadowRadius = 10

        
        imageView.frame = CGRect(x: 20, y: 100, width: (self.view.frame.width - 80), height: (self.view.frame.width - 80))
        imageView.frame = rootView.frame
        imageView.center.equalTo(self.view.bounds.origin)

        self.view.addSubview(imageView)
    }

看上去这段代码没问题，运行效果如下：
在这里插入图片描述

但最终效果算不上差强人意。

设置了shadow与layer属性为什么只展示了一个圆角属性？

这就要看maskToBounds属性了。这个属性设为ture后，会将多余部分裁剪，阴影是超出视图部分进行绘制的，理所当然被裁减。

那么舍弃圆角绘制阴影时效果如何？请看下面：
在这里插入图片描述
效果同样不能算得上差强人意。Apple Music中显示的是四个边都为景深效果，这里只有俩黑框子。那么接下来该如何进行？

我们首先需要了解shadow的几个属性

view.layer.shadowOpacity = 0.5//默认0–完全透明
view.layer.shadowColor = UIColor.black.cgColor //默认黑色。这里也可以用Color Literal双击选颜色
view.layer.shadowRadius = 10 //默认是3
view.layer.shadowOffset = CGSize(width: 0.0, height: -3.0)//默认是(0.0, -3.0)
view.layer.shadowPath = UIBezierPath(rect: view.bounds).cgPath // 阴影路径

这里我查询了相关资料，直接对一个控件进行圆角和阴影同时设置效果是不可信的。那么就需要多个控件了。下面是思路：

先绘制一个UIView，设置其阴影属性，阴影路径先空着；接着实例化UIImageView，设置其圆角属性，将其添加到UIView上；最后设置UIView的阴影路径比UIImageView稍大即可。这里需要说明的是，要完全达到Apple的那种效果需要设置BlurView，只不过考虑到性能问题这里不采用。
代码：

    private var imageView: UIImageView!
    private var rootView: UIView!
    
    private func initView(){
        imageView = UIImageView()
        rootView = UIView()
        
        rootView.layer.shadowOpacity = 0.2
        rootView.layer.shadowColor = UIColor.black.cgColor
        rootView.layer.shadowOffset = CGSize(width: 7, height: 7)
        rootView.layer.shadowRadius = 10
        
        let image = UIImage(named: "taylor")
        imageView.image = image
        imageView.layer.masksToBounds = true
        imageView.layer.cornerRadius = 10

        
        rootView.frame = CGRect(x: 20, y: 100, width: (self.view.frame.width - 80), height: (self.view.frame.width - 80))
        imageView.frame = rootView.frame
        rootView.center.equalTo(self.view.bounds.origin)
        self.view.addSubview(rootView)
        self.rootView.addSubview(imageView)
        
        let frame = CGRect(x: 10, y: 90, width: (self.view.frame.width - 70), height: (self.view.frame.width - 70))
        rootView.layer.shadowPath = UIBezierPath(rect: frame).cgPath
    }