热门标签 | HotTags
当前位置:  开发笔记 > 开发工具 > 正文

iOS实现双向滑动条效果

这篇文章主要为大家详细介绍了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;

运行结果如下:

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

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


推荐阅读
  • 打开文件管理器_【教程】模组管理器3.1食用指南
    文编:byakko最近有部分小伙伴反应还不会使用unity模组管理器,现在我就给大家讲一下unity模组管理器——从下载到使用。完整视频版以下是无WiF ... [详细]
  • 在Docker中,将主机目录挂载到容器中作为volume使用时,常常会遇到文件权限问题。这是因为容器内外的UID不同所导致的。本文介绍了解决这个问题的方法,包括使用gosu和suexec工具以及在Dockerfile中配置volume的权限。通过这些方法,可以避免在使用Docker时出现无写权限的情况。 ... [详细]
  • EPICS Archiver Appliance存储waveform记录的尝试及资源需求分析
    本文介绍了EPICS Archiver Appliance存储waveform记录的尝试过程,并分析了其所需的资源容量。通过解决错误提示和调整内存大小,成功存储了波形数据。然后,讨论了储存环逐束团信号的意义,以及通过记录多圈的束团信号进行参数分析的可能性。波形数据的存储需求巨大,每天需要近250G,一年需要90T。然而,储存环逐束团信号具有重要意义,可以揭示出每个束团的纵向振荡频率和模式。 ... [详细]
  • 云原生边缘计算之KubeEdge简介及功能特点
    本文介绍了云原生边缘计算中的KubeEdge系统,该系统是一个开源系统,用于将容器化应用程序编排功能扩展到Edge的主机。它基于Kubernetes构建,并为网络应用程序提供基础架构支持。同时,KubeEdge具有离线模式、基于Kubernetes的节点、群集、应用程序和设备管理、资源优化等特点。此外,KubeEdge还支持跨平台工作,在私有、公共和混合云中都可以运行。同时,KubeEdge还提供数据管理和数据分析管道引擎的支持。最后,本文还介绍了KubeEdge系统生成证书的方法。 ... [详细]
  • 学习笔记(34):第三阶段4.2.6:SpringCloud Config配置中心的应用与原理第三阶段4.2.6SpringCloud Config配置中心的应用与原理
    立即学习:https:edu.csdn.netcourseplay29983432482?utm_sourceblogtoedu配置中心得核心逻辑springcloudconfi ... [详细]
  • 目录实现效果:实现环境实现方法一:基本思路主要代码JavaScript代码总结方法二主要代码总结方法三基本思路主要代码JavaScriptHTML总结实 ... [详细]
  • Centos7.6安装Gitlab教程及注意事项
    本文介绍了在Centos7.6系统下安装Gitlab的详细教程,并提供了一些注意事项。教程包括查看系统版本、安装必要的软件包、配置防火墙等步骤。同时,还强调了使用阿里云服务器时的特殊配置需求,以及建议至少4GB的可用RAM来运行GitLab。 ... [详细]
  • baresip android编译、运行教程1语音通话
    本文介绍了如何在安卓平台上编译和运行baresip android,包括下载相关的sdk和ndk,修改ndk路径和输出目录,以及创建一个c++的安卓工程并将目录考到cpp下。详细步骤可参考给出的链接和文档。 ... [详细]
  • 20211101CleverTap参与度和分析工具功能平台学习/实践
    1.应用场景主要用于学习CleverTap的使用,该平台主要用于客户保留与参与平台.为客户提供价值.这里接触到的原因,是目前公司用到该平台的服务~2.学习操作 ... [详细]
  • 如何用UE4制作2D游戏文档——计算篇
    篇首语:本文由编程笔记#小编为大家整理,主要介绍了如何用UE4制作2D游戏文档——计算篇相关的知识,希望对你有一定的参考价值。 ... [详细]
  • 使用在线工具jsonschema2pojo根据json生成java对象
    本文介绍了使用在线工具jsonschema2pojo根据json生成java对象的方法。通过该工具,用户只需将json字符串复制到输入框中,即可自动将其转换成java对象。该工具还能解析列表式的json数据,并将嵌套在内层的对象也解析出来。本文以请求github的api为例,展示了使用该工具的步骤和效果。 ... [详细]
  • Lodop中特殊符号打印设计和预览样式不同的问题解析
    本文主要解析了在Lodop中使用特殊符号打印设计和预览样式不同的问题。由于调用的本机ie引擎版本可能不同,导致在不同浏览器下样式解析不同。同时,未指定文字字体和样式设置也会导致打印设计和预览的差异。文章提出了通过指定具体字体和样式来解决问题的方法,并强调了以打印预览和虚拟打印机测试为准。 ... [详细]
  • 安装mysqlclient失败解决办法
    本文介绍了在MAC系统中,使用django使用mysql数据库报错的解决办法。通过源码安装mysqlclient或将mysql_config添加到系统环境变量中,可以解决安装mysqlclient失败的问题。同时,还介绍了查看mysql安装路径和使配置文件生效的方法。 ... [详细]
  • 本文介绍了在开发Android新闻App时,搭建本地服务器的步骤。通过使用XAMPP软件,可以一键式搭建起开发环境,包括Apache、MySQL、PHP、PERL。在本地服务器上新建数据库和表,并设置相应的属性。最后,给出了创建new表的SQL语句。这个教程适合初学者参考。 ... [详细]
  • 安卓select模态框样式改变_微软Office风格的多端(Web、安卓、iOS)组件库——Fabric UI...
    介绍FabricUI是微软开源的一套Office风格的多端组件库,共有三套针对性的组件,分别适用于web、android以及iOS,Fab ... [详细]
author-avatar
Angle健少
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有