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

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

时间: 2022-03-20

iOS实现双向滑动条效果

最近做项目,碰到一种双向滑动条,自己实现了一下,随便写一下思路,方便以后开发,避免重复写代码,以后粘贴就行了.封装了一下,代码如下: #import <UIKit/UIKit.h> typedef NSString* (^HLDoubleSlideViewSwitchStrBock)(CGFloat count); @interface HLDoubleSlideView : UIView @property(nonatomic,assign)CGFloat maxValue; @proper

iOS Segment带滑动条切换效果

本文实例为大家分享了vue + element ui实现锚点定位的具体代码,供大家参考,具体内容如下 #import "ViewController.h"   @interface ViewController ()   @property (nonatomic,strong) NSArray *arrTitle;   @property (nonatomic,strong) UIView *flyBar;   @end   @implementation ViewController

iOS实现垂直滑动条效果

我们知道在 iOS 开发中,有一个控件经常用到,那就是滑动条(UISlider),可以满足我们滑动取值的需求.但是现在有一个需求,就是需要一个垂直的滑动条,而 UISlider 并不能设置为垂直滑动,所以我们就需要自己定义一个控件来实现垂直的要求. 整理之后,我们可以得出需要以下的基本需求: 可以上下滑动 按钮可以自定义图片 可以设置最小值 可以设置最大值 可以在滑动过程中获取实时的值 可以在滑动结束时获取到最终的值 可以设置进度背景色 我们的实现原理就是实现一个自定义的 UIView,然后在上

iOS实现音频进度条效果

前几天开发群里有一个老兄问了一个开发问题,他们的需求是要做一个类似音频进度条的东西,我感觉设计还不错,于是就写了个小demo供大家参考,在争得了他的同意的情况下写下这篇文章. 话不多说先上效果图 看到这个效果的时候我感觉相对比较难的点有两点: 一.是这个进度条的进度颜色变化,这里思路还是比较清晰的,直接用layer的mask来做就可以. 二.第二点就是这个各各条条的高度不一致又没有规律可言,在各个方法中我最终选择用随机数来做.   好了思路清晰了,那就开始撸代码了. 首先创建一个View CYX

Android SeekBar实现滑动条效果

本文实例为大家分享了Android SeekBar实现滑动条效果的具体代码,供大家参考,具体内容如下 SeekBar是ProgressBar的一个子类,下面我们用一个可以改变并显示当前进度的拖动条例子来演示一下它的使用: 1.main.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/

高仿网易新闻顶部滑动条效果实现代码

这个是网易新闻的主界面,我们知道底部可以用tabhost实现,这个很容易,我们在其他软件中也会经常用到. 至于顶部的滑动条,个人感觉还是比较漂亮的所以今天也模仿了下,网易顶部滑动条的效果,由于初次模仿这种效果,可能有些地方还不够完美,不过基本已经实现,希望大家能够喜欢. 废话不多说,下面上代码: 首先是布局layout下的main.xml 复制代码 代码如下: <?xmlversion="1.0"encoding="utf-8"?> <Relati

基于iOS实现音乐震动条效果

一.简单分析 音乐震动条不需要与用户交互.我们可以使用复制层来操作.添加震动条.添加动画. 复制层说明 //创建复制层 -(void)createRepl{ //复制层 CAReplicatorLayer * repL = [CAReplicatorLayer layer]; repL.frame = self.contentV.bounds; //复制6份 repL.instanceCount = 6; //形变,每一个形变都是相对于上一个复制出来的子层开始的 repL.instanceTra

iOS中利用CoreAnimation实现一个时间的进度条效果

在iOS中实现进度条通常都是通过不停的设置progress来完成的,这样的进度条适用于网络加载(上传下载文件.图片等).但是对于录制视频这样的需求的话,如果是按照每秒来设置进度的话,显得有点麻烦,于是我就想直接用CoreAnimation来按时间做动画,只要设置最大时间,其他的就不用管了,然后在视频暂停与继续录制时,对动画进行暂停和恢复即可.录制视频的效果如下: 你可以在这里下载demo 那么接下来就是如何用CoreAnimation实现一个进度条控件了. 首先呢,让我们创建一个继承自CASha

jQuery实现带滑动条的菜单效果代码

本文实例讲述了jQuery实现带滑动条的菜单效果代码.分享给大家供大家参考.具体如下: 这是一款带滑动条的jQuery滑动菜单,菜单下边有一个蓝色的线条,鼠标移上哪里它就跟向哪里,可以指引当前菜单的位置,另外,动画效果是基于jquery的animate(),对此有兴趣学习的正好可参考下代码. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-move-buttom-line-style-codes/ 具体代码如下: <!DOCTYPE

模仿iOS版微信的滑动View效果

前言 最近经常交替使用Android和iOS手机.对于两个系统,从我们常用的列表来看,Android一般的列表菜单是通过长按出来的,而iOS是通过滑动出现的.比如我们常用的微信,对于Android版本,长按某个聊天好友,会弹出 标为未读,置顶聊天,删除聊天 选项:对于iOS的版本,右滑,会显示出 标为未读,删除 选项 ---------------------------------我是分割线--------------------------------- 1. 滑动View 1.1 内容展示

iOS仿网易新闻滚动导航条效果

本文实例为大家分享了iOS滚动导航条效果展示的具体代码,供大家参考,具体内容如下 实现效果 效果:选择不同的栏目,下面出现不同的视图,栏目条可以滚动:下面的视图也可以滚动,滚动时上面对应的栏目要选中颜色为红色: 滚动的导航条包括两部分:标题滚动视图(UIScrollView),内容滚动视图(UIScrollView) 实现代码 1.首先实现Main.storyboard 2.创建多个子控制器:头条.科技.汽车.体育.视频.图片.热点 // 头条ViewController, 其它控制器和这个控制

js实现滑动进度条效果

本文实例为大家分享了js实现滑动进度条效果的具体代码,供大家参考,具体内容如下 进度条: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>js滑动进度条效果</title> <style> *{margin:0;padding:0;user-select:none;} .progress-bar{position:relativ