iOS实现多个垂直滑动条并列视图

 更新时间:2022年03月21日 11:22:12   作者:hzgisme  
这篇文章主要为大家详细介绍了iOS实现多个垂直滑动条并列视图,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了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
 
/**
 * 初始化手动调光界面
 *
 * @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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • ios UITableView 自定义右滑删除的实现代码

    ios UITableView 自定义右滑删除的实现代码

    这篇文章主要介绍了ios UITableView 自定义右滑删除的实现代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-07-07
  • iOS应用中使用Toolbar工具栏方式切换视图的方法详解

    iOS应用中使用Toolbar工具栏方式切换视图的方法详解

    这篇文章主要介绍了iOS应用中使用Toolbar工具栏方式切换视图的方法,文中讲解了UIToolbar的相关编写以及使用xib方式创建可切换视图程序的例子,需要的朋友可以参考下
    2016-04-04
  • IOS 常见的循环引用总结

    IOS 常见的循环引用总结

    这篇文章主要介绍了IOS 常见的循环引用总结的相关资料,循环引用,指的是多个对象相互引用时,使得引用形成一个环形,导致外部无法真正是否掉这块环形内存。其实有点类似死锁,需要的朋友可以参考下
    2017-03-03
  • iOS UICollectionView实现横向滑动

    iOS UICollectionView实现横向滑动

    这篇文章主要为大家详细介绍了iOS UICollectionView实现横向滑动,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-03-03
  • iOS实现头部拉伸效果

    iOS实现头部拉伸效果

    这篇文章主要为大家详细介绍了iOS实现头部拉伸效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-05-05
  • iOS表情键盘的简单实现代码

    iOS表情键盘的简单实现代码

    这篇文章主要为大家详细介绍了iOS表情键盘的简单实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-03-03
  • iOS中视频播放的基本方法总结

    iOS中视频播放的基本方法总结

    这篇文章主要给大家介绍了关于iOS中视频播放的基本方法的相关资料,文中分别介绍了MPMoviePlayerController、MPMoviePlayerViewController、AVPlayer以及AVPlayerViewController四种方法,需要的朋友可以参考下
    2018-07-07
  • iOS开发UI篇—xib的简单使用实例

    iOS开发UI篇—xib的简单使用实例

    本篇文章主要介绍了iOS开发UI篇—xib的简单使用,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。
    2016-11-11
  • ios实现UITableView之间圆角和间隙

    ios实现UITableView之间圆角和间隙

    这篇文章主要为大家详细介绍了ios实现UITableView之间圆角和间隙,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-08-08
  • IOS 开发之 UITextField限制字数的方法

    IOS 开发之 UITextField限制字数的方法

    这篇文章主要介绍了IOS 开发之 UITextField限制字数的方法的相关资料,这里提供实现限制最大字数的方法,需要的朋友可以参考下
    2017-08-08

最新评论