效果图
思路: 根据ScrollView滚动的进度,计算出内部的指示视图需要移动的距离。是根据一个比例计算,要先计算出指示视图可以在内部移动的最大距离,然后根据scrollView 可以滚动的最大距离和当前滚动的距离计算出当前滚动的比例,根据相同的比例计算出指示条滚动的偏移量
核心代码
@interface LBScrollProgressView ()
/// 整个进度条
@property (nonatomic, strong) UIView *totalProcessView;
/// 进度条指示器
@property (nonatomic, strong) UIView *indicateProcessView;
@end
@implementation LBScrollProgressView
- (instancetype)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if (self) {
[self setUpUI];
[self setUpConstraints];
}
return self;
}
- (void)setUpUI
{
[self addSubview:self.totalProcessView];
[self addSubview:self.indicateProcessView];
}
- (void)setUpConstraints
{
[self.totalProcessView mas_makeConstraints:^(MASConstraintMaker *make) {
make.edges.mas_equalTo(0);
}];
[self.indicateProcessView mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.leading.bottom.mas_equalTo(0);
make.width.mas_equalTo(0);
}];
}
- (void)updateWithModel:(LBScrollProgressViewConfig *)model
{
if (![model isKindOfClass:LBScrollProgressViewConfig.class]) {
return;
}
if (model.process < 0) {
model.process = 0;
} else if (model.process > 1) {
model.process = 1;
}
self.totalProcessView.layer.cornerRadius = model.cornerRadius;
self.indicateProcessView.layer.cornerRadius = model.cornerRadius;
[self.indicateProcessView mas_updateConstraints:^(MASConstraintMaker *make) {
make.leading.mas_equalTo((model.totalWidth - model.indicateWidth) * model.process);
make.width.mas_equalTo(model.indicateWidth);
}];
self.totalProcessView.backgroundColor = model.bgColor;
self.indicateProcessView.backgroundColor = model.indicateColor;
}
#pragma mark - 懒加载
- (UIView *)totalProcessView
{
if (!_totalProcessView) {
_totalProcessView = [[UIView alloc] init];
}
return _totalProcessView;
}
- (UIView *)indicateProcessView
{
if (!_indicateProcessView) {
_indicateProcessView = [[UIView alloc] init];
}
return _indicateProcessView;
}