服务器之家:专注于服务器技术及软件下载分享
分类导航

PHP教程|ASP.NET教程|Java教程|ASP教程|编程技术|正则表达式|C/C++|IOS|C#|Swift|Android|VB|R语言|JavaScript|易语言|vb.net|

服务器之家 - 编程语言 - IOS - iOS 无卡顿同时使用圆角、阴影和边框的实现

iOS 无卡顿同时使用圆角、阴影和边框的实现

2021-05-28 16:39LayoutBoy IOS

这篇文章主要介绍了iOS 无卡顿同时使用圆角、阴影和边框的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

在 ios 开发中,最怕看到设计稿里圆角阴影边框同时出现,这三兄弟简直就是性能杀手。

优化的方法百度一下有很多,虽然方法不同但是原理都一样。

分享一个我自己一直使用的方法:在一个 view 里只应用一种效果,然后通过组合的方式达到效果。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
override init(frame: cgrect) {
  super.init(frame: frame)
 
  imageview = uiimageview(image: uiimage(named: "img"))
  imageview.layer.cornerradius = 14
  imageview.layer.maskstobounds = true
  backgroundview = imageview
 
  shadowview = shadowview()
  shadowview.layer.cornerradius = 20
  shadowview.applyshadow(.black, cgsize(width: 0, height: 15), 0.2, 40)
  insertsubview(shadowview, belowsubview: imageview)
 
  contentview.layer.cornerradius = 14
  contentview.layer.borderwidth = 1
  contentview.layer.bordercolor = uicolor.orange.cgcolor
  contentview.layer.maskstobounds = true
}

 

iOS 无卡顿同时使用圆角、阴影和边框的实现

层次结构:

  • contentview: 描绘边框,放在最上层。
  • imageview: 显示圆角,放在中间,用于背景图。
  • shadowview: 显示阴影,放在最底层。代码很简单,只是封装了一下阴影参数:
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
class shadowview: uiview {
  private var shadowcolor: uicolor?
  private var shadowopacity: cgfloat = 1
  private var shadowoffset: cgsize = cgsize(width: 0, height: 3)
  private var shadowblur: cgfloat = 6
 
  override func layoutsubviews() {
    super.layoutsubviews()
 
    updateshadow()
  }
 
  func applyshadow(_ color: uicolor?, _ offset: cgsize, _ opacity: cgfloat, _ blur: cgfloat) {
    shadowcolor = color
    shadowoffset = offset
    shadowopacity = opacity
    shadowblur = blur
 
    updateshadow()
  }
 
  private func updateshadow() {
    layer.shadowcolor = shadowcolor?.cgcolor
    layer.shadowoffset = shadowoffset
    layer.shadowopacity = float(shadowopacity)
    layer.shadowradius = shadowblur * 0.5
    layer.shadowpath = uibezierpath(roundedrect: self.bounds, cornerradius: layer.cornerradius).cgpath
  }
}

分开单独绘制速度很快,使用 uicollectionview 进行滚动测试,生成的 cell 数量是 1 万个。

测试机器是 5s + ios 12.4.4,快速滑动无任何卡顿。

给一个测试 demo 大家体验一下:

github:shadow_view_demo

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持服务器之家。

原文链接:https://juejin.im/post/5e19ea4ee51d4501fa4679c3

延伸 · 阅读

精彩推荐
  • IOSiOS中tableview 两级cell的展开与收回的示例代码

    iOS中tableview 两级cell的展开与收回的示例代码

    本篇文章主要介绍了iOS中tableview 两级cell的展开与收回的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧...

    J_Kang3862021-04-22
  • IOSiOS布局渲染之UIView方法的调用时机详解

    iOS布局渲染之UIView方法的调用时机详解

    在你刚开始开发 iOS 应用时,最难避免或者是调试的就是和布局相关的问题,下面这篇文章主要给大家介绍了关于iOS布局渲染之UIView方法调用时机的相关资料...

    windtersharp7642021-05-04
  • IOS解析iOS开发中的FirstResponder第一响应对象

    解析iOS开发中的FirstResponder第一响应对象

    这篇文章主要介绍了解析iOS开发中的FirstResponder第一响应对象,包括View的FirstResponder的释放问题,需要的朋友可以参考下...

    一片枫叶4662020-12-25
  • IOSIOS开发之字典转字符串的实例详解

    IOS开发之字典转字符串的实例详解

    这篇文章主要介绍了IOS开发之字典转字符串的实例详解的相关资料,希望通过本文能帮助到大家,让大家掌握这样的方法,需要的朋友可以参考下...

    苦练内功5832021-04-01
  • IOS关于iOS自适应cell行高的那些事儿

    关于iOS自适应cell行高的那些事儿

    这篇文章主要给大家介绍了关于iOS自适应cell行高的那些事儿,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的...

    daisy6092021-05-17
  • IOSiOS 雷达效果实例详解

    iOS 雷达效果实例详解

    这篇文章主要介绍了iOS 雷达效果实例详解的相关资料,需要的朋友可以参考下...

    SimpleWorld11022021-01-28
  • IOSIOS 屏幕适配方案实现缩放window的示例代码

    IOS 屏幕适配方案实现缩放window的示例代码

    这篇文章主要介绍了IOS 屏幕适配方案实现缩放window的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要...

    xiari5772021-06-01
  • IOSiOS通过逆向理解Block的内存模型

    iOS通过逆向理解Block的内存模型

    自从对 iOS 的逆向初窥门径后,我也经常通过它来分析一些比较大的应用,参考一下这些应用中某些功能的实现。这个探索的过程乐趣多多,不仅能满足自...

    Swiftyper12832021-03-03