iOS TABAnimated 使用技巧一

由于第一次使用TABAnimated，遇到了很多问题，首先就是对xib支持不怎么友好。

如图UI设计卡片的式样


截屏2021-07-20 09.46.11.png

Xib中这样布局


截屏2021-07-20 09.47.09.png

加载中骨架屏是这样的


Simulator Screen Shot - iPhone 12 Pro - 2021-07-20 at 09.49.36.png

并没有卡片的式样，而且生成的骨架屏也不怎么美观。还需要在回调里面慢慢调试

  _tableView.tabAnimated.adjustWithClassBlock = ^(TABComponentManager *manager, __unsafe_unretained Class targetClass) {
              manager.animation(1).down(3).height(12);
              manager.animation(2).height(12).width(110);
              manager.animation(3).down(-5).height(12);
        };

我看了官方的demo，卡片式样是用纯代码写的，试了几次xib 的卡片骨架屏式样始终没有出来，也许是方法不对。但是我也不想把cell重新有纯代码在写一遍。于是就找到了一个新方法。而且生成的骨架屏也符合要求，首先用纯代码把标红色的部分全部用View代替，


WechatIMG187.jpeg
#import <UIKit/UIKit.h>

NS_ASSUME_NONNULL_BEGIN

@interface TaskTabAnimatedCell : UITableViewCell

@property (nonatomic, strong) UIView *backView;
@property (nonatomic, strong) UIImageView *leftImg;
@property (nonatomic, strong) UIView *titleView;
@property (nonatomic, strong) UIView *statusView;
@property (nonatomic, strong) UIView *contentView1;
@property (nonatomic, strong) UIView *contentView2;
@property (nonatomic, strong) UIView *contentView3;
@property (nonatomic, strong) UIView *bottomView;


@end

NS_ASSUME_NONNULL_END

#import "TaskTabAnimatedCell.h"

@implementation TaskTabAnimatedCell

- (void)awakeFromNib {
    [super awakeFromNib];
    // Initialization code
}

- (void)setSelected:(BOOL)selected animated:(BOOL)animated {
    [super setSelected:selected animated:animated];

    // Configure the view for the selected state
}

- (instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier {
    if (self = [super initWithStyle:style reuseIdentifier:reuseIdentifier]) {
        
        UIView *view = [[UIView alloc] initWithFrame:CGRectMake(10, 10, kScreenWidth - 10*2, 232)];
        view.layer.cornerRadius = 8;
        // 给bgView边框设置阴影
        view.layer.shadowOpacity = 0.1;
        view.layer.shadowColor = UIColor.blackColor.CGColor;
        view.layer.shadowRadius = 5;
        view.layer.shadowOffset = CGSizeMake(1,1);
        self.backView = view;
        [self addSubview:view];
        
        [view addSubview:self.leftImg];
        [view addSubview:self.titleView];
        [view addSubview:self.statusView];
        [view addSubview:self.contentView1];
        [view addSubview:self.contentView2];
        [view addSubview:self.contentView3];
        [view addSubview:self.bottomView];
    }
    return self;
}

- (void)layoutSubviews {
    [super layoutSubviews];
    
    [self.titleView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.mas_equalTo(16);
        make.top.mas_equalTo(16);
        make.right.mas_equalTo(self.backView).mas_offset(-100);
        make.height.mas_equalTo(20);
    }];
    
    [self.statusView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.mas_equalTo(16);
        make.right.mas_equalTo(self.backView).mas_offset(0);
        make.height.mas_equalTo(24);
        make.width.mas_equalTo(73);
    }];
    
    [self.leftImg mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.mas_equalTo(16);
        make.top.mas_equalTo(self.titleView.mas_bottom).mas_offset(15);
        make.width.mas_equalTo(120);
        make.height.mas_equalTo(108);
    }];
    
    [self.contentView1 mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.mas_equalTo(self.titleView.mas_bottom).offset(15);
        make.left.mas_equalTo(self.leftImg.mas_right).offset(8);
        make.right.mas_equalTo(self.backView).mas_offset(-8);
        make.height.mas_equalTo(20);
    }];
    
    [self.contentView2 mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.mas_equalTo(self.contentView1.mas_bottom).offset(20);
        make.left.mas_equalTo(self.leftImg.mas_right).offset(8);
        make.right.mas_equalTo(self.backView).mas_offset(-8);
        make.height.mas_equalTo(20);
    }];
    
    [self.contentView3 mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.mas_equalTo(self.contentView2.mas_bottom).offset(20);
        make.left.mas_equalTo(self.leftImg.mas_right).offset(8);
        make.right.mas_equalTo(self.backView).mas_offset(-8);
        make.height.mas_equalTo(20);
    }];
    
    [self.bottomView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.mas_equalTo(self.leftImg.mas_bottom).offset(13);
        make.left.mas_equalTo(self.backView).mas_offset(16);
        make.right.mas_equalTo(self.backView).mas_offset(-16);
        make.height.mas_equalTo(48);
    }];
    
}

#pragma mark - Lazy Method

- (UIImageView *)leftImg {
    if (!_leftImg) {
        _leftImg = [[UIImageView alloc] init];
        _leftImg.layer.masksToBounds = YES;
        _leftImg.contentMode = UIViewContentModeScaleAspectFill;
        _leftImg.image = [UIImage imageNamed:@"test3.jpg"];
    }
    return _leftImg;
}

- (UIView *)titleView {
    if (!_titleView) {
        _titleView = [[UIView alloc] init];
    }
    return _titleView;
}

- (UIView *)statusView {
    if (!_statusView) {
        _statusView = [[UIView alloc] init];
    }
    return _statusView;
}

- (UIView *)contentView1 {
    if (!_contentView1) {
        _contentView1 = [[UIView alloc] init];
    }
    return _contentView1;
}

- (UIView *)contentView2 {
    if (!_contentView2) {
        _contentView2 = [[UIView alloc] init];
    }
    return _contentView2;
}

- (UIView *)contentView3 {
    if (!_contentView3) {
        _contentView3 = [[UIView alloc] init];
    }
    return _contentView3;
}

- (UIView *)bottomView {
    if (!_bottomView) {
        _bottomView = [[UIView alloc] init];
    }
    return _bottomView;
}

初始化骨架屏的时候class 用刚才纯代码写的cell，UITableView还是用之前的xib cell

    self.tableView.tabAnimated = [TABTableAnimated animatedWithCellClass:[TaskTabAnimatedCell class] cellHeight:240];
    self.tableView.tabAnimated.adjustBlock = ^(TABComponentManager * _Nonnull manager) {
    };

生成的骨架屏卡片式样也出来了，也美观了。而且也不需要把xib Cell用纯代码写一遍了，只需要用纯代码抽象一个骨架屏cell就可以了。

Simulator Screen Shot - iPhone 12 Pro - 2021-07-20 at 10.02.03.png

如果有好的使用技巧欢迎交流。或者您知道xib cell中卡片式样的骨架屏怎么做也麻烦告诉我下。

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 204,293评论 6赞 478
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 85,604评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 150,958评论 0赞 337
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,729评论 1赞 277
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,719评论 5赞 366
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,630评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,000评论 3赞 397
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,665评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,909评论 1赞 299
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,646评论 2赞 321
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,726评论 1赞 330
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,400评论 4赞 321
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,986评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,959评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,197评论 1赞 260
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 44,996评论 2赞 349
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,481评论 2赞 342