iOS implements multiple vertical slider parallel view

This example shares the specific code for iOS to implement multiple vertical slider parallel views for your reference. The specific content is as follows

Previous articleWe implemented a vertical slider class (VerticalSlider) is used to meet the needs of vertical sliding. So in this article, let’s put multiple vertical slide bars together, which can be side by side with multiple vertical slide bars in a view, which is also a practical application scenario.

need:

Display multiple vertical sliders simultaneously
Each slider height is the same as the view height and automatically changes with the view height.
All sliders have the same width, and the width is the view width divided by the number of sliders
Update the view based on the value of the provided slider
Pass the index and value of the slider

The requirements are relatively simple. You can implement it by customizing a view (UIView):

//
//  
// 
//
//  Created by huang zhengguo on 2019/8/30.
//  Copyright © 2019 huang zhengguo. All rights reserved.
//
 
#import &lt;UIKit/&gt;
 
NS_ASSUME_NONNULL_BEGIN
 
typedef void (^SliderValueBlock) (NSInteger,float);
 
@interface VerticalSliderDimmingView : UIView
 
/**
 * Initialize the manual dimming interface
 *
 * @param frame size
 * @param sliderCount Number of sliders
 * @param channelColors Sliding bar color
 * @param sliderTitle Sliderbar title
 * @param sliderValue slider value
 *
 */
- (instancetype)initWithFrame:(CGRect)frame sliderCount:(NSInteger)sliderCount channelColors:(NSArray *)channelColors sliderTitles:(NSArray *)sliderTitle sliderValues:(NSArray *)sliderValue;
 
/**
 * Update slider
 *
 * @param sliderValueArray All channel color values
 *
 */
- (void)updateSliderViewWith:(NSArray *)sliderValueArray;
 
/**
 * Update slider
 *
 * @param colorPercentValueArray All channel color percentage
 *
 */
- (void)updateManualDimmingViewWithColorPercent:(NSArray *)colorPercentValueArray;
 
// Slide bars@property(nonatomic, copy) SliderValueBlock colorDimmingBlock;
 
// Sliding bar ends sliding@property(nonatomic, copy) SliderValueBlock colorDimmingEndBlock;
 
@end
 
NS_ASSUME_NONNULL_END

//
//  
// 
//
//  Created by huang zhengguo on 2019/8/30.
//  Copyright © 2019. All rights reserved.
//
 
#import ""
#import ""
 
@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]) {
         = NO;
        
        VerticalSlider *lastSlider = nil;
        
        [ removeAllObjects];
        for (int i=0; i&lt;sliderCount; i++) {
            VerticalSlider *slider = [[VerticalSlider alloc] initWithFrame:CGRectZero title:[sliderTitle objectAtIndex:i] progressColor:[channelColors objectAtIndex:i] thumImage:@""];
            
             = MIN_LIGHT_VALUE;
             = MAX_LIGHT_VALUE;
             = NO;
             = 20000 + i;
             = [sliderValue[i] integerValue] / 1000.0;
             = ^(float colorValue) {
                if () {
                    ( - 20000, colorValue * MAX_LIGHT_VALUE);
                }
            };
            
             = ^(float colorValue) {
                // Pass the color value when the slide ends                if () {
                    ( - 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];
            }
 
            // Process the last one            if (i == sliderCount - 1) {
                [self setSliderConstraintsWithItem:slider toItem:self toItem:lastSlider isFirst:NO isLast:YES];
            }
            
            lastSlider = slider;
            
            [ addObject:slider];
        }
    }
    
    return self;
}
 
- (void)sliderTouchUpInSideAction:(UISlider *)slider {
    // Pass the color value when d ends sliding    if () {
        ( - 20000, );
    }
}
 
#pragma mark --- Update view based on data- (void)updateSliderViewWith:(NSArray *)sliderValueArray {
    // Refresh slider    for (int i=0;i&lt;;i++) {
        VerticalSlider *slider = [ objectAtIndex:i];
         = [sliderValueArray[i] floatValue] / 1000.0;
    }
}
 
#pragma mark --- Update view by percentage- (void)updateManualDimmingViewWithColorPercent:(NSArray *)colorPercentValueArray {
    for (int i=0; i&lt;; i++) {
        UISlider *slider = [ objectAtIndex:i];
         = (float)[[colorPercentValueArray objectAtIndex:i] floatValue] * 10;
    }
}
 
#pragma mark --- Add sliding contract- (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];
    }
    
    // The last one    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

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.