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)容,希望對大家的學(xué)習(xí)有所幫助。
相關(guān)文章
iOS tableView實(shí)現(xiàn)頭部拉伸并改變導(dǎo)航條漸變色
這篇文章主要為大家詳細(xì)介紹了iOS tableView實(shí)現(xiàn)頭部拉伸并改變導(dǎo)航條漸變色,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-05-05
iOS獲取當(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-01
iOS 將系統(tǒng)自帶的button改裝成上圖片下文字的樣子
這篇文章主要介紹了 iOS 將系統(tǒng)自帶的button改裝成上圖片下文字的樣子,代碼是通過繼承UIButton,然后再重寫layoutSubviews方法,對自帶的圖片和titleLabel進(jìn)行重新的layout。下面通過本文給大家分享下實(shí)現(xiàn)代碼2016-12-12
ios 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ì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03

