iOS多个垂直滑动条并列视图
hzgisme 人气:0上一篇文章我们实现了一个垂直滑动条的类 (VerticalSlider),用来满足垂直滑动的需求。那么这篇文章我们来把多个垂直滑动条放到一起,可以在一个视图上并排多个垂直滑动条,也算是一个实际应用的场景。
需求:
- 同时展示多个垂直滑动条
- 每个滑动条高度和视图高度相同,随视图高度自动变化
- 所有滑动条宽度相同,宽度为视图宽度除以滑动条个数
- 根据提供的滑动条的值更新视图
- 传递滑动条的索引和值
需求还是比较简单的,自定义一个视图 (UIView) 就可以实现:
VerticalSliderDimmingView.h
// // VerticalSliderDimmingView.h // // // Created by huang zhengguo on 2019/8/30. // Copyright © 2019 huang zhengguo. All rights reserved. // #import <UIKit/UIKit.h> NS_ASSUME_NONNULL_BEGIN typedef void (^SliderValueBlock) (NSInteger,float); @interface VerticalSliderDimmingView : UIView /** * 初始化手动调光界面 * * @param frame 大小 * @param sliderCount 滑动条个数 * @param channelColors 滑动条颜色 * @param sliderTitle 滑动条标题 * @param sliderValue 滑动条值 * */ - (instancetype)initWithFrame:(CGRect)frame sliderCount:(NSInteger)sliderCount channelColors:(NSArray *)channelColors sliderTitles:(NSArray *)sliderTitle sliderValues:(NSArray *)sliderValue; /** * 更新滑动条 * * @param sliderValueArray 所有通道颜色值 * */ - (void)updateSliderViewWith:(NSArray *)sliderValueArray; /** * 更新滑动条 * * @param colorPercentValueArray 所有通道颜色百分比 * */ - (void)updateManualDimmingViewWithColorPercent:(NSArray *)colorPercentValueArray; // 滑动条滑动 @property(nonatomic, copy) SliderValueBlock colorDimmingBlock; // 滑动条结束滑动 @property(nonatomic, copy) SliderValueBlock colorDimmingEndBlock; @end NS_ASSUME_NONNULL_END
VerticalSliderDimmingView.m
// // VerticalSliderDimmingView.m // // // Created by huang zhengguo on 2019/8/30. // Copyright © 2019. All rights reserved. // #import "VerticalSliderDimmingView.h" #import "VerticalSlider.h" @interface VerticalSliderDimmingView() @property (strong, nonatomic) NSMutableArray *colorSliderArray; @end @implementation VerticalSliderDimmingView - (NSMutableArray *)colorSliderArray { if (!_colorSliderArray) { _colorSliderArray = [NSMutableArray array]; } return _colorSliderArray; } - (instancetype)initWithFrame:(CGRect)frame sliderCount:(NSInteger)sliderCount channelColors:(NSArray *)channelColors sliderTitles:(NSArray *)sliderTitle sliderValues:(NSArray *)sliderValue { if (self = [super initWithFrame:frame]) { self.translatesAutoresizingMaskIntoConstraints = NO; VerticalSlider *lastSlider = nil; [self.colorSliderArray removeAllObjects]; for (int i=0; i<sliderCount; i++) { VerticalSlider *slider = [[VerticalSlider alloc] initWithFrame:CGRectZero title:[sliderTitle objectAtIndex:i] progressColor:[channelColors objectAtIndex:i] thumImage:@"control.png"]; slider.minimumValue = MIN_LIGHT_VALUE; slider.maximumValue = MAX_LIGHT_VALUE; slider.translatesAutoresizingMaskIntoConstraints = NO; slider.tag = 20000 + i; slider.value = [sliderValue[i] integerValue] / 1000.0; slider.passValue = ^(float colorValue) { if (self.colorDimmingBlock) { self.colorDimmingBlock(slider.tag - 20000, colorValue * MAX_LIGHT_VALUE); } }; slider.passEndValue = ^(float colorValue) { // 传递结束滑动时的颜色值 if (self.colorDimmingEndBlock) { self.colorDimmingEndBlock(slider.tag - 20000, colorValue * MAX_LIGHT_VALUE); } }; [self addSubview:slider]; if (i == 0) { [self setSliderConstraintsWithItem:slider toItem:self toItem:self isFirst:YES isLast:NO]; } else { [self setSliderConstraintsWithItem:slider toItem:self toItem:lastSlider isFirst:NO isLast:NO]; } // 处理最后一个 if (i == sliderCount - 1) { [self setSliderConstraintsWithItem:slider toItem:self toItem:lastSlider isFirst:NO isLast:YES]; } lastSlider = slider; [self.colorSliderArray addObject:slider]; } } return self; } - (void)sliderTouchUpInSideAction:(UISlider *)slider { // 传递d结束滑动时的颜色值 if (self.colorDimmingEndBlock) { self.colorDimmingEndBlock(slider.tag - 20000, slider.value); } } #pragma mark --- 根据数据更新视图 - (void)updateSliderViewWith:(NSArray *)sliderValueArray { // 刷新滑动条 for (int i=0;i<self.colorSliderArray.count;i++) { VerticalSlider *slider = [self.colorSliderArray objectAtIndex:i]; slider.value = [sliderValueArray[i] floatValue] / 1000.0; } } #pragma mark --- 根据百分比更新视图 - (void)updateManualDimmingViewWithColorPercent:(NSArray *)colorPercentValueArray { for (int i=0; i<colorPercentValueArray.count; i++) { UISlider *slider = [self.colorSliderArray objectAtIndex:i]; slider.value = (float)[[colorPercentValueArray objectAtIndex:i] floatValue] * 10; } } #pragma mark --- 添加滑动条约束 - (void)setSliderConstraintsWithItem:(nullable id)view1 toItem:(nullable id)view2 toItem:(nullable id)view3 isFirst:(BOOL)isFirst isLast:(BOOL)isLast { NSLayoutConstraint *sliderTopLayoutConstraint = [NSLayoutConstraint constraintWithItem:view1 attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:view2 attribute:NSLayoutAttributeTop multiplier:1.0 constant:0.0]; NSLayoutConstraint *sliderLeadingLayoutConstraint = [NSLayoutConstraint constraintWithItem:view1 attribute:NSLayoutAttributeLeading relatedBy:NSLayoutRelationEqual toItem:view3 attribute:NSLayoutAttributeTrailing multiplier:1.0 constant:0.0]; NSLayoutConstraint *sliderBottomLayoutConstraint = [NSLayoutConstraint constraintWithItem:view1 attribute:NSLayoutAttributeBottom relatedBy:NSLayoutRelationEqual toItem:view2 attribute:NSLayoutAttributeBottom multiplier:1.0 constant:0.0]; if (!isFirst) { NSLayoutConstraint *sliderWithLayoutConstraint = [NSLayoutConstraint constraintWithItem:view1 attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:view3 attribute:NSLayoutAttributeWidth multiplier:1.0 constant:0.0]; [self addConstraint:sliderWithLayoutConstraint]; } else { sliderLeadingLayoutConstraint = [NSLayoutConstraint constraintWithItem:view1 attribute:NSLayoutAttributeLeading relatedBy:NSLayoutRelationEqual toItem:view2 attribute:NSLayoutAttributeLeading multiplier:1.0 constant:0.0]; } // 最后一个 if (isLast) { NSLayoutConstraint *sliderTrailingLayoutConstraint = [NSLayoutConstraint constraintWithItem:view1 attribute:NSLayoutAttributeTrailing relatedBy:NSLayoutRelationEqual toItem:view2 attribute:NSLayoutAttributeTrailing multiplier:1.0 constant:0.0]; [self addConstraint:sliderTrailingLayoutConstraint]; } [self addConstraints:@[sliderTopLayoutConstraint, sliderLeadingLayoutConstraint, sliderBottomLayoutConstraint]]; } /* // Only override drawRect: if you perform custom drawing. // An empty implementation adversely affects performance during animation. - (void)drawRect:(CGRect)rect { // Drawing code } */ @end
加载全部内容