We know that in iOS development, there is a control that is often used, that is, the sliding bar (UISlider), which can meet our sliding value needs. But now there is a requirement, which is to require a vertical slide bar, and UISlider cannot be set to vertical slide, so we need to define a control ourselves to achieve vertical requirements.
After sorting out, we can draw the following basic requirements:
- Can slide up and down
- Buttons can customize pictures
- The minimum value can be set
- Maximum value can be set
- Real-time values can be obtained during sliding
- The final value can be obtained at the end of the slide
- You can set the progress background color
Our implementation principle is to implement a custom UIView, then add the controls you need to use, and add certain gesture functions to the controls to achieve vertical sliding. A separate class is implemented, with few functions, but it can meet the above basic needs. The code is as follows. The macros used in the code can be replaced by themselves and used out of the box, which is simple and clear:
// // // // // Created by huang zhengguo on 2019/8/30. // Copyright © 2019 huang zhengguo . All rights reserved. // #import <UIKit/> 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); /** * Initialize the slider * * @param frame size * @param title title * @param progressColor progress color * @param thumbImage Sliding button background * * @return Vertical slider * */ - (instancetype)initWithFrame:(CGRect)frame title:(NSString *)title progressColor:(UIColor *)progressColor thumImage:(NSString *)thumImage; @end NS_ASSUME_NONNULL_END
//
//
//
//
// Created by huang zhengguo on 2019/8/30.
// Copyright © 2019 zhengguohuang. All rights reserved.
//
#import ""
#define THUM_BTN_WIDTH 30.0
#define THUM_BTN_HEIGHT 50.0
@interface VerticalSlider()
@property (strong, nonatomic) UIButton *thumBtn;
// Use two labels to represent progress, one background, one progress@property (strong, nonatomic) UILabel *backLabel;
@property (strong, nonatomic) UILabel *progressLabel;
// Bottom title@property (strong, nonatomic) UILabel *titleLabel;
// Value title@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]) {
// Slide button = [[UIButton alloc] init];
[ setBackgroundImage:[UIImage imageNamed:thumImage] forState:UIControlStateNormal];
= NO;
UIPanGestureRecognizer *panGestureRecognizer = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(thumbPanAction:)];
[ addGestureRecognizer:panGestureRecognizer];
[self addSubview:];
// Progress bar = [[UILabel alloc] init];
= [progressColor colorWithAlphaComponent:0.3];
= NO;
[self addSubview:];
= [[UILabel alloc] init];
= progressColor;
= NO;
[self addSubview:];
// Bottom title = [[UILabel alloc] init];
= NO;
= NSTextAlignmentCenter;
= [UIColor whiteColor];
= title;
[self addSubview:];
// Top value = [[UILabel alloc] init];
= NO;
= NSTextAlignmentCenter;
= [UIColor whiteColor];
[self addSubview:];
[self bringSubviewToFront:];
[self setConstraints];
// Initialize the data = 0.0;
}
return self;
}
#pragma mark --- button drag method- (void)thumbPanAction:(UIPanGestureRecognizer *)panGestureRecognizer {
// Convert coordinates CGPoint point = [panGestureRecognizer translationInView:self];
CGFloat yOriginPoint = + ;
if (yOriginPoint >= && yOriginPoint <= ( + - THUM_BTN_HEIGHT)) {
= CGRectMake(, + , THUM_BTN_WIDTH, THUM_BTN_HEIGHT);
= 1.0 - (yOriginPoint - ) / ( - THUM_BTN_HEIGHT);
if () {
KMYLOG(@"colorValue = %f", );
();
}
}
// Convert to the coordinates of the original coordinate system [panGestureRecognizer setTranslation:CGPointMake(0, 0) inView:self];
if ( == UIGestureRecognizerStateEnded) {
if () {
KMYLOG(@"End Slide");
// Convert to string and float to float, to go to two decimal places ([[NSString stringWithFormat:@"%.2f", ] floatValue]);
}
}
}
- (void)setValue:(float)value {
_value = value;
= CGRectMake(, ( - THUM_BTN_HEIGHT) * (1 - value) + , THUM_BTN_WIDTH, THUM_BTN_HEIGHT);
= CGRectMake(, + THUM_BTN_HEIGHT, , + - - THUM_BTN_HEIGHT);
= [NSString stringWithFormat:@"%.0f%%", value * 100];
}
- (void)setConstraints {
NSArray *titleLabelArray = @[, ];
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 == ) {
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 == ) {
NSLayoutConstraint *labelTopLayoutConstraint = [NSLayoutConstraint constraintWithItem:label attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self attribute:NSLayoutAttributeTop multiplier:1.0 constant:0.0];
[self addConstraint:labelTopLayoutConstraint];
}
}
NSArray *labelArray = @[, ];
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: 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 == ) {
NSLayoutConstraint *progressTopLayoutConstraint = [NSLayoutConstraint constraintWithItem:label attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem: 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: attribute:NSLayoutAttributeCenterX relatedBy:NSLayoutRelationEqual toItem:self attribute:NSLayoutAttributeCenterX multiplier:1.0 constant:0.0];
NSLayoutConstraint *thumBtnBottomLayoutConstraint = [NSLayoutConstraint constraintWithItem: attribute:NSLayoutAttributeBottom relatedBy:NSLayoutRelationEqual toItem: attribute:NSLayoutAttributeBottom multiplier:1.0 constant:0.0];
NSLayoutConstraint *thumBtnWidthLayoutConstraint = [NSLayoutConstraint constraintWithItem: attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1.0 constant:THUM_BTN_WIDTH];
NSLayoutConstraint *thumBtnHeightLayoutConstraint = [NSLayoutConstraint constraintWithItem: 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];
= CGRectMake(, ( - THUM_BTN_HEIGHT) * (1 - ) + , THUM_BTN_WIDTH, THUM_BTN_HEIGHT);
= CGRectMake(, + THUM_BTN_HEIGHT, , + - - 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
}
*/
@endThe 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.