iOS - 原生骨架屏之嵌套视图

嵌套视图如何产生骨架效果

1. 如果UITableView/UICollection内部的cell有嵌套的UITableView/UICollectionView视图时，需要将tabAnimated的属性containNestAnimation设置为YES

2. 嵌套在内部的UITableView/UICollectionView，同样地，需要绑定TABViewAnimated进行参数配置

下文具体解释

引导图

image.png

何为嵌套视图

下面将阐述TABAnimated中的几个概念：
控制视图，主控制视图，嵌套视图

控制视图：是指控制动画开关，能够通过扩展回调对动画进行预处理的视图。

主控制视图和嵌套视图举例阐述：

正常的一个UIView不是嵌套视图，
假设，一个UIView中的一个subViews是UICollectionView，
如果你将UIView作为控制视图，那么在这里，TABAnimated认为它是主控制视图，UICollectionView则是嵌套视图，也可以叫次控制视图。

之所以有“主次”的原因：

当UIView开启动画，TABAnimated会自动开启嵌套视图的动画，反之，关闭动画也是如此。那么其实嵌套视图是被动控制动画开关而已。

嵌套视图的动画预处理操作由它自身完成，
主控制视图的动画预处理操作只能操作非嵌套视图的部分。

视图层级

需要先说明一下这个页面的视图层级：
如图，四个红框所示的四个视图，其中最后一个是UICollectionView，其他虽然进行了一些封装，但是归根究底还是非表格类型的UIView。

image.png

主控制视图设置

首先说明一下，我将这个controller的self.view作为控制视图。
对于控制视图self.view，我是这么使用的：

self.view.tabAnimated = TABViewAnimated.new;
self.view.tabAnimated.categoryBlock = ^(UIView * _Nonnull view) {
      view.animation(2).height(12).reducedWidth(45).down(20);
      view.animation(6).height(12).left(5).down(20).width(30);
      view.animation(7).remove();
      view.animation(8).left(30).reducedWidth(60).down(4);
      view.animation(9).down(5);
};

嵌套视图设置

上述的主控制视图self.view：
它所做的动画的设置只针对这个控制中的所有非嵌套视图，也就是排除了第四个红框内的视图：UICollectionView

通过前文，嵌套视图需要自己通过扩展回调预处理动画，同时isNest赋值为YES：

self.collectionView.tabAnimated =
[TABCollectionAnimated animatedWithCellClass:[ListenListCollectionViewCell class]
                                        cellSize:[ListenListCollectionViewCell cellSize]];
    self.collectionView.tabAnimated.isNest = YES;
    self.collectionView.tabAnimated.animatedCount = 10;
    self.collectionView.tabAnimated.categoryBlock = ^(UIView * _Nonnull view) {
        view.animation(2).remove();
};

Tips

嵌套视图不需要再控制动画的开关了

最后编辑于：2020.12.25 20:30:53