首頁 > 軟體

iOS實現垂直滑動條效果

2022-03-21 13:00:10

我們知道在 iOS 開發中，有一個控制元件經常用到，那就是滑動條（UISlider），可以滿足我們滑動取值的需求。但是現在有一個需求，就是需要一個垂直的滑動條，而 UISlider 並不能設定為垂直滑動，所以我們就需要自己定義一個控制元件來實現垂直的要求。

整理之後，我們可以得出需要以下的基本需求：

  • 可以上下滑動
  • 按鈕可以自定義圖片
  • 可以設定最小值
  • 可以設定最大值
  • 可以在滑動過程中獲取實時的值
  • 可以在滑動結束時獲取到最終的值
  • 可以設定進度背景色

我們的實現原理就是實現一個自定義的 UIView，然後在上面新增需要用到的控制元件，對控制元件新增一定的手勢功能，從而實現垂直滑動。實現了一個單獨的類，功能不多，但是能滿足以上基本的需求，程式碼如下，程式碼中用到的宏可以自行替換，開箱即用，簡單明瞭：

VerticalSlider.h

//
//  VerticalSlider.h
//  
//
//  Created by huang zhengguo on 2019/8/30.
//  Copyright © 2019 huang zhengguo . All rights reserved.
//
 
#import <UIKit/UIKit.h>
 
NS_ASSUME_NONNULL_BEGIN
 
@interface VerticalSlider : UIView
 
@property (assign, nonatomic) float value;
@property (strong, nonatomic) UIImage *thumImage;
@property (assign, nonatomic) float minimumValue;
@property (assign, nonatomic) float maximumValue;
 
@property (copy, nonatomic) void (^passValue) (float);
@property (copy, nonatomic) void (^passEndValue) (float);
 
/**
 * 初始化滑動條
 *
 * @param frame 大小
 * @param title 標題
 * @param progressColor 進度顏色
 * @param thumImage 滑動按鈕背景
 *
 * @return 垂直滑動條
 *
 */
- (instancetype)initWithFrame:(CGRect)frame title:(NSString *)title progressColor:(UIColor *)progressColor thumImage:(NSString *)thumImage;
 
@end
 
NS_ASSUME_NONNULL_END

VerticalSlider.m

//
//  VerticalSlider.m
// 
//
//  Created by huang zhengguo on 2019/8/30.
//  Copyright © 2019 zhengguohuang. All rights reserved.
//
 
#import "VerticalSlider.h"
 
#define THUM_BTN_WIDTH 30.0
#define THUM_BTN_HEIGHT 50.0
 
@interface VerticalSlider()
 
@property (strong, nonatomic) UIButton *thumBtn;
// 使用兩個label表示進度，一個背景，一個進度
@property (strong, nonatomic) UILabel *backLabel;
@property (strong, nonatomic) UILabel *progressLabel;
// 底部標題
@property (strong, nonatomic) UILabel *titleLabel;
// 值標題
@property (strong, nonatomic) UILabel *valueLabel;
 
@end
 
@implementation VerticalSlider
 
- (instancetype)initWithFrame:(CGRect)frame title:(NSString *)title progressColor:(UIColor *)progressColor thumImage:(NSString *)thumImage {
    if (self = [super initWithFrame:frame]) {
        // 滑動按鈕
        self.thumBtn = [[UIButton alloc] init];
 
        [self.thumBtn setBackgroundImage:[UIImage imageNamed:thumImage] forState:UIControlStateNormal];
        self.thumBtn.translatesAutoresizingMaskIntoConstraints = NO;
        
        UIPanGestureRecognizer *panGestureRecognizer = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(thumbPanAction:)];
 
        [self.thumBtn addGestureRecognizer:panGestureRecognizer];
        [self addSubview:self.thumBtn];
 
        // 進度條
        self.backLabel = [[UILabel alloc] init];
 
        self.backLabel.backgroundColor = [progressColor colorWithAlphaComponent:0.3];
        self.backLabel.translatesAutoresizingMaskIntoConstraints = NO;
 
        [self addSubview:self.backLabel];
 
        self.progressLabel = [[UILabel alloc] init];
 
        self.progressLabel.backgroundColor = progressColor;
        self.progressLabel.translatesAutoresizingMaskIntoConstraints = NO;
 
        [self addSubview:self.progressLabel];
 
        // 底部標題
        self.titleLabel = [[UILabel alloc] init];
 
        self.titleLabel.translatesAutoresizingMaskIntoConstraints = NO;
        self.titleLabel.textAlignment = NSTextAlignmentCenter;
        self.titleLabel.textColor = [UIColor whiteColor];
        self.titleLabel.text = title;
 
        [self addSubview:self.titleLabel];
 
        // 頂部值
        self.valueLabel = [[UILabel alloc] init];
 
        self.valueLabel.translatesAutoresizingMaskIntoConstraints = NO;
        self.valueLabel.textAlignment = NSTextAlignmentCenter;
        self.valueLabel.textColor = [UIColor whiteColor];
 
        [self addSubview:self.valueLabel];
 
        [self bringSubviewToFront:self.thumBtn];
 
        [self setConstraints];
        
        // 初始化資料
        self.value = 0.0;
    }
    
    return self;
}
 
#pragma mark --- 按鈕拖動方法
- (void)thumbPanAction:(UIPanGestureRecognizer *)panGestureRecognizer {
    // 轉換座標
    CGPoint point = [panGestureRecognizer translationInView:self];
    
    CGFloat yOriginPoint = panGestureRecognizer.view.frame.origin.y + point.y;
    if (yOriginPoint >=self.backLabel.frame.origin.y && yOriginPoint <= (self.backLabel.frame.origin.y + self.backLabel.frame.size.height - THUM_BTN_HEIGHT)) {
        panGestureRecognizer.view.frame = CGRectMake(panGestureRecognizer.view.frame.origin.x, panGestureRecognizer.view.frame.origin.y + point.y, THUM_BTN_WIDTH, THUM_BTN_HEIGHT);
        
        self.value = 1.0 - (yOriginPoint - self.backLabel.frame.origin.y) / (self.backLabel.frame.size.height - THUM_BTN_HEIGHT);
        if (self.passValue) {
            KMYLOG(@"colorValue = %f", self.value);
            self.passValue(self.value);
        }
    }
 
    // 轉換成原來座標系的座標
    [panGestureRecognizer setTranslation:CGPointMake(0, 0) inView:self];
    
    if (panGestureRecognizer.state == UIGestureRecognizerStateEnded) {
        if (self.passEndValue) {
            KMYLOG(@"結束滑動");
            // 轉為字串，又轉為float，是為了去的兩位小數的浮點數
            self.passEndValue([[NSString stringWithFormat:@"%.2f", self.value] floatValue]);
        }
    }
}
 
- (void)setValue:(float)value {
    _value = value;
 
    self.thumBtn.frame = CGRectMake(self.thumBtn.frame.origin.x, (self.backLabel.frame.size.height - THUM_BTN_HEIGHT) * (1 - value) + self.backLabel.frame.origin.y, THUM_BTN_WIDTH, THUM_BTN_HEIGHT);
    self.progressLabel.frame = CGRectMake(self.progressLabel.frame.origin.x, self.thumBtn.frame.origin.y + THUM_BTN_HEIGHT, self.progressLabel.frame.size.width, self.backLabel.frame.origin.y + self.backLabel.frame.size.height - self.thumBtn.frame.origin.y - THUM_BTN_HEIGHT);
    self.valueLabel.text = [NSString stringWithFormat:@"%.0f%%", value * 100];
}
 
- (void)setConstraints {
    NSArray *titleLabelArray = @[self.titleLabel, self.valueLabel];
    for (UILabel *label in titleLabelArray) {
        NSLayoutConstraint *labelLeadingLayoutConstraint = [NSLayoutConstraint constraintWithItem:label attribute:NSLayoutAttributeLeading relatedBy:NSLayoutRelationEqual toItem:self attribute:NSLayoutAttributeLeading multiplier:1.0 constant:0.0];
        NSLayoutConstraint *labelTrailingLayoutConstraint = [NSLayoutConstraint constraintWithItem:label attribute:NSLayoutAttributeTrailing relatedBy:NSLayoutRelationEqual toItem:self attribute:NSLayoutAttributeTrailing multiplier:1.0 constant:0.0];
        NSLayoutConstraint *labelHeightLayoutConstraint = [NSLayoutConstraint constraintWithItem:label attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1.0 constant:30.0];
 
        [self addConstraints:@[labelLeadingLayoutConstraint, labelTrailingLayoutConstraint, labelHeightLayoutConstraint]];
 
        if (label == self.titleLabel) {
            NSLayoutConstraint *labelBottomLayoutConstraint = [NSLayoutConstraint constraintWithItem:label attribute:NSLayoutAttributeBottom relatedBy:NSLayoutRelationEqual toItem:self attribute:NSLayoutAttributeBottom multiplier:1.0 constant:0.0];
 
            [self addConstraint:labelBottomLayoutConstraint];
        } else if (label == self.valueLabel) {
            NSLayoutConstraint *labelTopLayoutConstraint = [NSLayoutConstraint constraintWithItem:label attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self attribute:NSLayoutAttributeTop multiplier:1.0 constant:0.0];
 
            [self addConstraint:labelTopLayoutConstraint];
        }
    }
    
    NSArray *labelArray = @[self.backLabel, self.progressLabel];
    for (UILabel *label in labelArray) {
        NSLayoutConstraint *progressCenterXLayoutConstraint = [NSLayoutConstraint constraintWithItem:label attribute:NSLayoutAttributeCenterX relatedBy:NSLayoutRelationEqual toItem:self attribute:NSLayoutAttributeCenterX multiplier:1.0 constant:0.0];
        NSLayoutConstraint *progressBottomLayoutConstraint = [NSLayoutConstraint constraintWithItem:label attribute:NSLayoutAttributeBottom relatedBy:NSLayoutRelationEqual toItem:self.titleLabel attribute:NSLayoutAttributeTop multiplier:1.0 constant:-8.0];
        NSLayoutConstraint *progressWidthLayoutConstraint = [NSLayoutConstraint constraintWithItem:label attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1.0 constant:3.0];
 
        [self addConstraints:@[progressCenterXLayoutConstraint, progressBottomLayoutConstraint, progressWidthLayoutConstraint]];
 
        if (label == self.backLabel) {
            NSLayoutConstraint *progressTopLayoutConstraint = [NSLayoutConstraint constraintWithItem:label attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self.valueLabel attribute:NSLayoutAttributeBottom multiplier:1.0 constant:0.0];
 
            [self addConstraint:progressTopLayoutConstraint];
        } else {
            NSLayoutConstraint *progressHeightLayoutConstraint = [NSLayoutConstraint constraintWithItem:label attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1.0 constant:0.0];
 
            [self addConstraint:progressHeightLayoutConstraint];
        }
    }
 
    NSLayoutConstraint *thumBtnCenterXLayoutConstraint = [NSLayoutConstraint constraintWithItem:self.thumBtn attribute:NSLayoutAttributeCenterX relatedBy:NSLayoutRelationEqual toItem:self attribute:NSLayoutAttributeCenterX multiplier:1.0 constant:0.0];
    NSLayoutConstraint *thumBtnBottomLayoutConstraint = [NSLayoutConstraint constraintWithItem:self.thumBtn attribute:NSLayoutAttributeBottom relatedBy:NSLayoutRelationEqual toItem:self.backLabel attribute:NSLayoutAttributeBottom multiplier:1.0 constant:0.0];
    NSLayoutConstraint *thumBtnWidthLayoutConstraint = [NSLayoutConstraint constraintWithItem:self.thumBtn attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1.0 constant:THUM_BTN_WIDTH];
    NSLayoutConstraint *thumBtnHeightLayoutConstraint = [NSLayoutConstraint constraintWithItem:self.thumBtn attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1.0 constant:THUM_BTN_HEIGHT];
 
    [self addConstraints:@[thumBtnCenterXLayoutConstraint, thumBtnBottomLayoutConstraint, thumBtnWidthLayoutConstraint, thumBtnHeightLayoutConstraint]];
}
 
- (void)layoutSubviews {
    [super layoutSubviews];
    
    self.thumBtn.frame = CGRectMake(self.thumBtn.frame.origin.x, (self.backLabel.frame.size.height - THUM_BTN_HEIGHT) * (1 - self.value) + self.backLabel.frame.origin.y, THUM_BTN_WIDTH, THUM_BTN_HEIGHT);
    self.progressLabel.frame = CGRectMake(self.progressLabel.frame.origin.x, self.thumBtn.frame.origin.y + THUM_BTN_HEIGHT, self.progressLabel.frame.size.width, self.backLabel.frame.origin.y + self.backLabel.frame.size.height - self.thumBtn.frame.origin.y - THUM_BTN_HEIGHT);
}
 
/*
// Only override drawRect: if you perform custom drawing.
// An empty implementation adversely affects performance during animation.
- (void)drawRect:(CGRect)rect {
    // Drawing code
}
*/
 
@end

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援it145.com。


相關文章

  • 德漢姆中學就讀條件 德漢姆中學就讀條件

    <em>Mac</em>Book项目 2009年学校开始实施<em>Mac</em>Book项目,所有师生配备一本<em>Mac</em>Book,并同步更新了校园无线网络。学校每周进行电脑技术更新,每月发送技术支持资料,极大改变了教学及学习方式。因此2011

    2021-06-01 09:32:01

  • 黑科技的輕簡出行，告別「電量焦慮症」：Anker氮化鎵超能充系列 黑科技的輕簡出行，告別「電量焦慮症」：Anker氮化鎵超能充系列

    综合看Anker超能充系列的性价比很高，并且与不仅和iPhone12/苹果<em>Mac</em>Book很配，而且适合多设备充电需求的日常使用或差旅场景，不管是安卓还是Switch同样也能用得上它，希望这次分享能给准备购入充电器的小伙伴们有所

    2021-06-01 09:31:42

  • 吳亦凡廠牌首秀，L4WUDU居然忘詞了，Rapper和明星比還是有差距！ 吳亦凡廠牌首秀，L4WUDU居然忘詞了，Rapper和明星比還是有差距！

    除了L4WUDU与吴亦凡已经多次共事，成为了明面上的厂牌成员，吴亦凡还曾带领20XXCLUB全队参加2020年的一场音乐节，这也是20XXCLUB首次全员合照，王嗣尧Turbo、陈彦希Regi、<em>Mac</em> Ova Seas、林渝植等人全部出场。然而让

    2021-06-01 09:31:34

  • IPFS、Chia、Bzz和ICP挖礦該怎麼選？哪一個更有優勢？ IPFS、Chia、Bzz和ICP挖礦該怎麼選？哪一個更有優勢？

    目前应用IPFS的机构：1 谷歌<em>浏览器</em>支持IPFS分布式协议 2 万维网 (历史档案博物馆)数据库 3 火狐<em>浏览器</em>支持 IPFS分布式协议 4 EOS 等数字货币数据存储 5 美国国会图书馆，历史资料永久保存在 IPFS 6 加

    2021-06-01 09:31:24

  • 有哪些事是買了雪佛蘭後才知道的？美事偷著樂，開拓者車主隨聊 有哪些事是買了雪佛蘭後才知道的？美事偷著樂，開拓者車主隨聊

    开拓者的车机是兼容苹果和<em>安卓</em>，虽然我不怎么用，但确实兼顾了我家人的很多需求：副驾的门板还配有解锁开关，有的时候老婆开车，下车的时候偶尔会忘记解锁，我在副驾驶可以自己开门：第二排设计很好，不仅配置了一个很大的

    2021-06-01 09:30:48

  • iPhone12在618最新定價，跌價幅度超過1400元，還等iPhone13嗎？ iPhone12在618最新定價，跌價幅度超過1400元，還等iPhone13嗎？

    不仅是<em>安卓</em>手机，苹果手机的降价力度也是前所未有了，iPhone12也“跳水价”了，发布价是6799元，如今已经跌至5308元，降价幅度超过1400元，最新定价确认了。iPhone12是苹果首款5G手机，同时也是全球首款5nm芯片的智能机，它

    2021-06-01 09:30:45

IT145.com E-mail:sddin#qq.com