iOS实现双向滑动条效果

更新时间：2020年08月20日 10:18:34 作者：jiangamh

这篇文章主要为大家详细介绍了iOS实现双向滑动条效果的相关代码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

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

#import <UIKit/UIKit.h>

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 ()<UIGestureRecognizerDelegate>

@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<UITouch *> *)touches withEvent:(UIEvent *)event
{
 NSLog(@"began");
 [super touchesBegan:touches withEvent:event];
}

-(void)touchesMoved:(NSSet<UITouch *> *)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;

运行结果如下：

demo:https://github.com/jiangtaidi/HLDoubleSlideView.git

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

您可能感兴趣的文章:

iOS
滑动

IOS内存泄漏检查方法及重写MLeakFinder
这篇文章主要介绍了IOS内存泄漏检查方法及如何重写MLeakFinder，帮助ios开发者维护自身程序，感兴趣的朋友可以了解下
2021-04-04
IOS接入facebook详解
这篇文章主要介绍了IOS接入facebook详解，对接入第三方SDK感兴趣的同学，可以参考下
2021-04-04
iOS横屏弹键盘的高度错误异常解决
这篇文章主要给大家介绍了关于iOS横屏弹键盘的高度错误异常解决的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-04-04
iOS App使用SQLite之句柄的定义及数据库的基本操作
SQLite中在定义过句柄之后就可以指向数据库,从而利用iOS应用程序进行打开或关闭等各种操作,这里我们就来看一下iOS App使用SQLite之句柄的定义及数据库的基本操作
2016-06-06
iOS App开发中用CGContextRef绘制基本图形的基本示例
这篇文章主要介绍了iOS App开发中用CGContextRef绘制基本图形的基本示例,CGContextRef同时可以进行图形颜色的填充以及文字的书写,需要的朋友可以参考下
2016-05-05
IOS 实现摇一摇的操作
这篇文章主要介绍了IOS 实现摇一摇的操作的相关资料,需要的朋友可以参考下
2016-10-10
iOS10全新推送功能实现代码
这篇文章主要为大家详细介绍了iOS10全新推送功能实现代码,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-09-09
iOS实现毛玻璃效果（无需要第三方）
这篇文章主要为大家详细介绍了iOS实现毛玻璃效果，无需要第三方，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2018-05-05
iOS项目的开发命名规范教程
为了团队各成员之间代码的互通、可读、易维护性，特制订此开发规范。下面这篇文章主要给大家介绍了关于iOS项目的开发命名规范的相关资料，需要的朋友可以参考借鉴，下面随着小编来一起学习学习吧。
2017-11-11
iOS中长按调出菜单组件UIMenuController的使用实例
UIMenuController即是用来制作我们平时对文本长按屏幕后显示出的复制粘贴等选项菜单,下面就来详细整理一下iOS中长按调出菜单组件UIMenuController的使用实例:
2016-06-06

iOS实现双向滑动条效果

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具