iOS Skeleton View(骨架屏) 调研

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/zyb050607/article/details/80908822
Skeleton View(骨架屏)基本原理是添加控件形成真实的布局,等有数据时隐藏。 

Skeleton View 效果对比:A Bone to Pick with Skeleton Screens | Viget

iOS第三方库对比:

Swift: SkeletonView

实现原理:

对UIView进行扩展,增加skeletonable、skeletonLayer等属性。调用showSkeleton方法,对属性skeletonable为true的视图进行遍历,找到其最上层的、skeletonable为true的子View,然后创建skeletonLayer添加到上面,构成骨架图,动效效果亦是在skeletonLayer层。

需要隐藏效果时,调用hideSkeleton,同样进行遍历,移除skeletonLayer。

tableView使用:
简单的说,在显示占位的时候,将tableView的代理设置为通过某个对象,这个对象根据cell的Idenfier创建cell并添加占位显示。关闭显示占位的时候,将代理tableView的代理切回ViewController,正常显示。

调用hideSkeleton方法时,代理会自动切换


特点

不需手动写占位控件,不需处理圆角等问题,占位效果与实际控件布局一致。

缺点是有的控件是自适应大小,在未获得数据之前,控件位置是错误的,导致占位效果有问题。


OC: Somo

实现原理

同样是扩展UIView,添加属性somoContainer,表示占位视图的容器视图,其中每个占位区域都是一个SomoView。对于想要显示占位效果的View,需实现协议,在协议方法中返回SomoView列表。将这些SomoView添加到somoContainer,并显示。

tableView使用:
与上面Swift库类似,不过需要手动切换代理。

特点

优点:避免了上述自适应控件无数据时大小不正确的问题。

缺点:需要手工指定每个占位区域,且每个占位区域是UIView级别,不是CALayer。 




实际使用存在的问题:

  • 公司项目必须使用OC库。虽然上面两个库比较,Swift更加智能好用,最终还是选择改造了上述OC库,控件级别降为CALayer,并增加了自动添加占位区域功能,使【手工指定占位】和【自动添加占位】共存。自适应控件大小问题可以通过代理返回统一的填充了假数据的cell来解决。
  • UI希望占位的高度与实际控件的高度不一致,这个初步想法是控件展示为默认高度的条状矩形,center对齐;如果是高度较高自动拆分为多个条状矩形。应该还有很多要改进的地方。
  • UI希望的动画是全局统一的,不是各个区域分离的动画,这个需要改写。

猜你喜欢

转载自blog.csdn.net/zyb050607/article/details/80908822