html 滑动条 双向滑动,iOS实现双向滑动条效果

最近做项目，碰到一种双向滑动条，自己实现了一下，随便写一下思路，方便以后开发，避免重复写代码，以后粘贴就行了。封装了一下，代码如下：

#import

typedef NSString* (^HLDoubleSlideViewSwitchStrBock)(CGFloat count);

@interface HLDoubleSlideView : UIView

@property(nonatomic,assign)CGFloat maxValue;

@property(nonatomic,assign)CGFloat minValue;

@property(nonatomic,assign)CGFloat currentLeftValue;

@property(nonatomic,assign)CGFloat currentRightValue;

//格式化显示文本

@property(nonatomic,copy)HLDoubleSlideViewSwitchStrBock block;

@end

源文件如下：

#import "HLDoubleSlideView.h"

#import "UIView+Add.h"

@interface HLDoubleSlideView ()

@property(nonatomic,strong)UIImageView *leftImageView;

@property(nonatomic,strong)UIImageView *rightImageView;

@property(nonatomic,strong)UILabel *leftLabel;

@property(nonatomic,strong)UILabel *rightLabel;

@property(nonatomic,strong)UIButton *leftBtn;

@property(nonatomic,strong)UIButton *rightBtn;

@property(nonatomic,assign)CGFloat leftBtnOrgx;

@property(nonatomic,assign)CGFloat rightBtnOrgx;

@end

@implementation HLDoubleSlideView

-(id)init

{

if (self = [super init]) {

[self setupUI];

}

return self;

}

-(void)setupUI

{

_leftImageView = [[UIImageView alloc] init];

_leftImageView.image = [UIImage imageNamed:@"progressImage"];

_leftImageView.frame = CGRectMake(0, 5, 60, 40);

[self addSubview:_leftImageView];

_leftLabel = [[UILabel alloc] initWithFrame:_leftImageView.bounds];

_leftLabel.backgroundColor = [UIColor clearColor];

_leftLabel.font = [UIFont systemFontOfSize:13];

_leftLabel.textAlignment = NSTextAlignmentCenter;

_leftLabel.textColor = [UIColor whiteColor];

[_leftImageView addSubview:_leftLabel];

_rightImageView = [[UIImageView alloc] init];

_rightImageView.image = [UIImage imageNamed:@"progressImage"];

_rightImageView.frame = CGRectMake(0, 5, 60, 40);

[self addSubview:_rightImageView];

_rightLabel = [[UILabel alloc] initWithFrame:_rightImageView.bounds];

_rightLabel.backgroundColor = [UIColor clearColor];

_rightLabel.font = [UIFont systemFontOfSize:13];

_rightLabel.textAlignment = NSTextAlignmentCenter;

_rightLabel.textColor = [UIColor whiteColor];

[_rightImageView addSubview:_rightLabel];

_leftBtn = [UIButton buttonWithType:UIButtonTypeCustom];

_leftBtn.frame = CGRectMake(0, 50, 20,20);

_leftBtn.backgroundColor = [UIColor blueColor];

_leftBtn.layer.cornerRadius = 10;

[self addSubview:_leftBtn];

UIPanGestureRecognizer *panGesture = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(tapGestureAction:)];

panGesture.delegate = self;

[_leftBtn addGestureRecognizer:panGesture];

_leftImageView.centerX = _leftBtn.centerX;

_rightBtn = [UIButton buttonWithType:UIButtonTypeCustom];

_rightBtn.backgroundColor = [UIColor blueColor];

_rightBtn.frame = CGRectMake(240, 50, 20, 20);

_rightBtn.layer.cornerRadius = 10;

panGesture = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(tapGestureAction:)];

panGesture.delegate = self;

[_rightBtn addGestureRecognizer:panGesture];

_rightImageView.centerX = _rightBtn.centerX;

[self addSubview:_rightBtn];

}

- (BOOL)gestureRecognizerShouldBegin:(UIGestureRecognizer *)gestureRecognizer

{

return YES;

}

-(UIView*)hitTest:(CGPoint)point withEvent:(UIEvent *)event

{

NSLog(@"doubleView hitTest");

return [super hitTest:point withEvent:event];

}

-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event

{

NSLog(@"began");

[super touchesBegan:touches withEvent:event];

}

-(void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event

{

NSLog(@"move");

[super touchesMoved:touches withEvent:event];

}

-(void)layoutSubviews

{

CGFloat centenX = (_currentLeftValue - _minValue) * (self.bounds.size.width - 20)/(_maxValue - _minValue) + 10;

_leftBtn.centerX = centenX;

if (_currentLeftValue != 0) {

CGFloat centenX = (_currentRightValue - _minValue) * (self.bounds.size.width - 20) / (_maxValue - _minValue) + 10;

_rightBtn.centerX = centenX;

}

else

{

_rightBtn.centerX = self.bounds.size.width - 10;

}

_leftImageView.centerX = _leftBtn.centerX;

_rightImageView.centerX = _rightBtn.centerX;

if (_block) {

_leftLabel.text = _block(_currentLeftValue);

_rightLabel.text = _block(_currentRightValue);

}

}

-(void)tapGestureAction:(UIPanGestureRecognizer*)panGesture

{

UIView *vw = panGesture.view;

CGPoint transPoint = [panGesture translationInView:self];

NSLog(@"x:%lf,y:%lf",transPoint.x,transPoint.y);

switch (panGesture.state) {

case UIGestureRecognizerStateBegan:

{

if ([vw isEqual:_leftBtn])

{

_leftBtnOrgx = _leftBtn.orgX;

NSLog(@"拖拽左边按钮");

}

else if([vw isEqual:_rightBtn])

{

_rightBtnOrgx = _rightBtn.orgX;

NSLog(@"拖拽右边按钮");

}

}

break;

case UIGestureRecognizerStateChanged:

{

if ([vw isEqual:_leftBtn])

{

CGFloat orginX = _leftBtn.orgX;

_leftBtn.orgX = _leftBtnOrgx + transPoint.x;

if (_leftBtn.orgX < 0) {

_leftBtn.orgX = 0;

}

else if(_leftBtn.orgX >= _rightBtn.orgX - 20)

{

_leftBtn.orgX = orginX;

}

_leftImageView.centerX = _leftBtn.centerX;

}

else if([vw isEqual:_rightBtn])

{

CGFloat orginX = _rightBtn.orgX;

_rightBtn.orgX = _rightBtnOrgx + transPoint.x;

if (_rightBtn.orgX >= self.bounds.size.width - 20) {

_rightBtn.orgX = self.bounds.size.width - 20;

}

else if(_rightBtn.orgX <= _leftBtn.orgX + 20)

{

_rightBtn.orgX = orginX;

}

_rightImageView.centerX = _rightBtn.centerX;

}

}

break;

case UIGestureRecognizerStateEnded:

{

}

break;

default:

break;

}

_currentLeftValue = _minValue + (_maxValue - _minValue) * ((_leftBtn.centerX - 10) / (self.bounds.size.width - 20));

_currentRightValue = _minValue + (_maxValue - _minValue) * ((_rightBtn.centerX - 10) / (self.bounds.size.width - 20));

if (_block) {

_leftLabel.text = _block(_currentLeftValue);

_rightLabel.text = _block(_currentRightValue);

}

NSLog(@"leftValue:%lf,rightValue:%lf",_currentLeftValue,_currentRightValue);

[self setNeedsDisplay];

}

-(void)setCurrentLeftValue:(CGFloat)currentLeftValue

{

_currentLeftValue = currentLeftValue;

CGFloat centenX = (currentLeftValue - _minValue) * (self.bounds.size.width - 20)/(_maxValue - _minValue) + 10;

_leftBtn.centerX = centenX;

[self setNeedsDisplay];

}

-(void)setCurrentRightValue:(CGFloat)currentRightValue

{

_currentRightValue = currentRightValue;

CGFloat centenX = (_currentRightValue - _minValue) * (self.bounds.size.width - 20) / (_maxValue - _minValue) + 10;

_rightBtn.centerX = centenX;

[self setNeedsDisplay];

}

-(void)drawRect:(CGRect)rect

{

CGContextRef context = UIGraphicsGetCurrentContext();

CGContextSetLineCap(context, kCGLineCapRound);

CGContextSetLineWidth(context, 3);

[[UIColor grayColor] setStroke];

CGContextMoveToPoint(context, 0, 60);

CGContextAddLineToPoint(context, self.bounds.size.width, 60);

CGContextStrokePath(context);

[[UIColor redColor] setStroke];

CGContextMoveToPoint(context, _leftBtn.orgX + 10, 60);

CGContextAddLineToPoint(context, _rightBtn.orgX,60);

CGContextStrokePath(context);

}

@end

使用如下：

HLDoubleSlideView *doubleSlideView = [[HLDoubleSlideView alloc] init];

doubleSlideView.backgroundColor = [UIColor whiteColor];//HLColor(244, 244, 244);

doubleSlideView.minValue = 1000;

doubleSlideView.maxValue = 10000;

doubleSlideView.block = ^NSString*(CGFloat count)

{

return [NSString stringWithFormat:@"%.0f元",count];

};

[self.view addSubview:doubleSlideView];

doubleSlideView.frame = CGRectMake(60, 64, 250, 80);

doubleSlideView.currentLeftValue = 1200;

doubleSlideView.currentRightValue = 10000;

运行结果如下：

以上就是本文的全部内容，希望对大家的学习有所帮助。