iOS开发Skeleton Screen/加载占位图

相信大家都看见过微博上，或者看到这个控件的占位图，预加载的动画效果图，这个在web上已经很成熟了，最近有空闲，就研究了一下，其实还是很好实现的。

place_hold.png

先说OC版，在GitHub上下载安装包 [链接](https://github.com/mayqiyue/OCSkeleton）
下载完成以后你会看到

image.png

研究了一下他的代码，看示例代码可以看出来用到了继承，然后添加到CAGradientLayer动画组里面滑动方向分左右两个方向

 typedef enum {
OCDirectionRight = 0,
OCDirectionLeft,} OCDirection

示例代码里面已经在tableView代理方法中这样写

-(NSInteger)tableView:(UITableView *)tableVie numberOfRowsInSection:(NSInteger)section  {
return self.view.frame.size.height/70;
}

这里你稍微做一下调整在真实项目中

  -(NSInteger)tableView:(UITableView *)tableVie numberOfRowsInSection:(NSInteger)section  {
if（self.dataSoure.count>0）{    return self.dataSoure.count }else{
return self.view.frame.size.height/70;}
}

示例代码这段代码

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
OCSkeletonCell *cell = [tableView dequeueReusableCellWithIdentifier:@"cellid" forIndexPath:indexPath];
for (CAGradientLayer *layer in cell.gradientLayers) {
    UIColor *baseColor = cell.titlePlaceholderView.backgroundColor;
    layer.colors = @[(id)baseColor.CGColor, (id)brightened(baseColor, 0.93).CGColor,(id) baseColor.CGColor];
}
return cell;

}

真实项目中做一个判断

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{

OCSkeletonCell *cell = [tableView dequeueReusableCellWithIdentifier:@"cellid" forIndexPath:indexPath];              if（self.dataSourc.count>0）{
-- 这里是给cell赋值    }else{
for (CAGradientLayer *layer in cell.gradientLayers) {
    UIColor *baseColor = [UIColor grayColor] ;
    layer.colors = @[(id)baseColor.CGColor, (id)brightened(baseColor, 0.93).CGColor,(id) baseColor.CGColor];
} }
 return cell;

}

这里是你动画的方向是向右还是向左

- (void)tableView:(UITableView *)tableView willDisplayCell:(自定义的cell )cell forRowAtIndexPath:(NSIndexPath *)indexPath{
[cell slideToDir:OCDirectionRight animations:nil];}

有个小细节要注意就是你的控件继承

image.png

就是你的cell了里面肯定有UILabel 或者UIbutton 分别继承他的父类，可以参考#import "OCGradientContainerView.h"里面的代码重新复制一份就行了，然后在自定义的cell里的加上他需要动画的数组中这个是关键

- (NSArray *)gradientLayers {
if (self.titlePlaceholderView && self.subtitlePlaceholderView) {
    return @[self.titlePlaceholderView.gradientLayer, self.subtitlePlaceholderView.gradientLayer];
}
return nil;}

好了，swift版本的链接也发出来链接
用法跟OC版本是一样的

好了快去试试吧！