iOS實(shí)現(xiàn)雙向滑動(dòng)條效果
最近做項(xiàng)目,碰到一種雙向滑動(dòng)條,自己實(shí)現(xiàn)了一下,隨便寫一下思路,方便以后開發(fā),避免重復(fù)寫代碼,以后粘貼就行了。封裝了一下,代碼如下:
#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;
運(yùn)行結(jié)果如下:
demo:https://github.com/jiangtaidi/HLDoubleSlideView.git
以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助。
相關(guān)文章
iOS tableView實(shí)現(xiàn)頭部拉伸并改變導(dǎo)航條漸變色
這篇文章主要為大家詳細(xì)介紹了iOS tableView實(shí)現(xiàn)頭部拉伸并改變導(dǎo)航條漸變色,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-05-05iOS獲取當(dāng)前時(shí)間和當(dāng)前時(shí)間戳的方法
這篇文章主要介紹了iOS獲取當(dāng)前時(shí)間和當(dāng)前時(shí)間戳,獲取當(dāng)前時(shí)間戳有兩種方法以秒位單位的,下面通過本文給大家分享iOS獲取當(dāng)前時(shí)間和當(dāng)前時(shí)間戳的方法,一起看看吧2017-01-01iOS 將系統(tǒng)自帶的button改裝成上圖片下文字的樣子
這篇文章主要介紹了 iOS 將系統(tǒng)自帶的button改裝成上圖片下文字的樣子,代碼是通過繼承UIButton,然后再重寫layoutSubviews方法,對(duì)自帶的圖片和titleLabel進(jìn)行重新的layout。下面通過本文給大家分享下實(shí)現(xiàn)代碼2016-12-12ios uicollectionview實(shí)現(xiàn)橫向滾動(dòng)
這篇文章主要為大家詳細(xì)介紹了ios uicollectionview實(shí)現(xiàn)橫向滾動(dòng),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-03-03在iOS中使用OpenGL ES實(shí)現(xiàn)繪畫板的方法
這篇文章主要介紹了在iOS中使用OpenGL ES實(shí)現(xiàn)繪畫板的方法,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03