iOS TABAnimated 使用技巧一

赵哥窟

发布于 2021-07-21 10:48:02

1.1K0

发布于 2021-07-21 10:48:02

文章被收录于专栏：日常技术分享日常技术分享

由于第一次使用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就可以了。