由于第一次使用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
并没有卡片的式样，而且生成的骨架屏也不怎么美观。还需要在回调里面慢慢调试
代码语言：javascript复制 _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
代码语言：javascript复制#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
代码语言：javascript复制 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中卡片式样的骨架屏怎么做也麻烦告诉我下。
