当前位置：首页 > 教程 > 操作系统 > iOS系统 > iOS实现双向滑动条效果

iOS实现双向滑动条效果
日期：2020-08-20 10:18:34 来源：脚本之家

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

#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;

运行结果如下：