SkelectionView是以一种优雅的方式向用户展示正在发生的事情.相比菊花loading而言我个人认为更直观的让用户了解到了他们正在等待的内容.
这是个开源的SDK.支持的操作系统和SDK版本:iOS9.0+,swift4
安装
使用CocoaPods:
编辑podfile:
pod 'SkeletonView'
如何使用
1.导入SkeletonView
import SkeletonView
2.设置哪些view skeletonables,有两种方法可以实现
使用代码:
imageview.isSkeletonable = true
使用IB/Storyboards:
3.设置了视图之后,要show出来skeleton,这里有4中表现形式:
1)view.showSkeleton() //实体
2)view.showGradientSkeleton() //渐变
3)view.showAnimatedSkeleton() //实体动画
4)view.showAnimatedGradientSkeleton() //渐变动画
这里要注意一点,SkeletonView是递归的,所以如果要在所有可视化控件中显示Skeleton,你只需要在主容器视图中调用show方法.
好了,开始写代码吧
SkeletonView 兼容 UITableView 和 UICollectionView
如果想要在UITableView或UICollectionView中显示skeleton,你需要遵守SkeletonTableViewDataSource或SkeletonCollectionViewDataSource协议
并且重写三个方法
这三个方法跟之前的三个方法类似,第一个是返回section的数量;第二个是返回每个section的行数;第三个是让Skeleton知道cell的标识符,例如:return "CellIdentifier"
重要! 如果您使用可调整大小的单元格(tableView.rowHeight = UITableViewAutomaticDimension),则必须定义该单元格estimatedRowHeight
实例:
maintableview.rowHeight = UITableViewAutomaticDimension
maintableview.estimatedRowHeight = 120.0
自定义颜色
可以自定义Skeleton的颜色,有两种,有纯色跟渐变色
纯色:
maintableview.showSkeleton(usingColor: UIColor.gray)
渐变色:
let gradient=SkeletonGradient(baseColor: UIColor.midnightBlue)
maintableview.showGradientSkeleton(usingGradient: gradient)
自定义动画
SkeletonView现在有两种动画,一种是实心Skeleton一种是渐变滑动Skeleton
let animation = SkeletonAnimationBuilder().makeSlidingAnimation(withDirection: .leftRight)
let gradient = SkeletonGradient(baseColor: UIColor.midnightBlue)
maintableview.showAnimatedGradientSkeleton(usingGradient: gradient, animation: animation)
OK!开始动起来:
maintableview.startSkeletonAnimation()
这里着重讲一下我遇到的坑.我一切准备就绪跑起来之后发现我的tableview是一坨的一片灰色在那整屏闪动,cell里面的imageview跟label都不知道去哪了,table的DataSource的三个方法也走了,我以为是上面说的容器的问题,我就把上面的maintableview都换成了view(最最父视图)结果并没改变一屏幕在那闪的命运,折腾了半天才发现,不光tableview,imageview,label要isSkeletonable = true,连cell也要isSkeletonable = true.这下子世界终于清晰了.帮大家趟了此坑.