iOS实现多个垂直滑动条并列视图
短信预约 -IT技能 免费直播动态提醒
本文实例为大家分享了iOS实现多个垂直滑动条并列视图的具体代码，供大家参考，具体内容如下
上一篇文章我们实现了一个垂直滑动条的类 (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
- (instancetype)initWithFrame:(CGRect)frame sliderCount:(NSInteger)sliderCount channelColors:(NSArray *)channelColors sliderTitles:(NSArray *)sliderTitle sliderValues:(NSArray *)sliderValue;
- (void)updateSliderViewWith:(NSArray *)sliderValueArray;
- (void)updateManualDimmingViewWithColorPercent:(NSArray *)colorPercentValueArray;
// 滑动条滑动
@property(nonatomic, copy) SliderValueBlock colorDimmingBlock;
// 滑动条结束滑动
@property(nonatomic, copy) SliderValueBlock colorDimmingEndBlock;
@end
NS_ASSUME_NONNULL_ENDVerticalSliderDimmingView.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]];
}
@end以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程网。
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
