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

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

(0)

相关推荐

  • iOS开发中的ViewController转场切换效果实现简介

    在iOS7之前,View Controller的切换主要有4种: Push/Pop,NavigationViewController Present and dismis Modal UITabBarController addChildViewController(一般用于自定义的继承于 UIViewController 的容器子类) iOS5,调用- (void)transitionFromViewController:(UIViewController *)fromViewControll

  • iOS开发之视图切换

    一.视图切换 UITabBarController (分页控制器) - 平行管理视图 UINavigationController (导航控制器) - 压栈出栈管理视图 模态窗口 二.UITabBarController分页控制器 UITabBarController是为了利用 页签切换视图 设计的控制器 该控制器有一个UITabBar控件,用户通过点击UITabBar进行视图切换 UITabBarController本身会不显示任何视图,它只是一个 容器控制器 为了减少视图间的耦合,所有UIT

  • iOS滑动解锁、滑动获取验证码效果的实现代码

    最近短信服务商要求公司的app在获取短信验证码时加上校验码,目前比较流行的是采用类似滑动解锁的方式,我们公司采取的就是这种方式,设计图如下所示: 这里校验内部的处理逻辑不作介绍,主要分享一下界面效果的实现, 下面贴出代码: 先子类化UISlider #import <UIKit/UIKit.h> #define SliderWidth 240 #define SliderHeight 40 #define SliderLabelTextColor [UIColor colorWithRed:1

  • Android实现IOS相机滑动控件

    IOS相比于Android,动画效果是一方面优势,IOS相机切换时滑动的动画很不错,看着是有一个3D的效果,而且变化感觉很自然.Android也可以通过Graphics下面的Camera可以实现3D效果,开始尝试着用这个做了一下,效果不理想,滑动之后各组文字之间的距离就变了,从立体空间来说这是合逻辑的,但是看着很别捏.IOS相机的滑动效果文字之间的间隔在滑动的时候是不变的. 后面通过调整TextView X方向的scale使文字看着紧凑一点,然后通过计算的距离的方式,在滑动的时候保持各组文字之间

  • IOS代码笔记之左右滑动效果

    本文实例为大家分享了ios实现左右滑动操作代码,供大家参考,具体内容如下 一.效果图 二.代码 RootViewController.m - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view. self.title=@"可以向左(右)滑动"; //向右滑动 UISwipeGestureRecognizer *recognizerLeft; recogniz

  • IOS实现点击滑动抽屉效果

    最近,看到好多Android上的抽屉效果,也忍不住想要自己写一个.在Android里面可以用SlidingDrawer,很方便的实现.IOS上面就只有自己写了.其实原理很简单就是 UIView 的移动,和一些手势的操作. 效果图: // // DrawerView.h // DrawerDemo // // Created by Zhouhaifeng on 12-3-27. // Copyright (c) 2012年 CJLU. All rights reserved. // #import

  • 浅析iOS多视图滑动点击切换的集成

    前言 多视图滑动点击切换这个视图在很多App都有用到,我对这个View进行了封装,外界只需要调用一个接口,就能实现这个效果,使用方法和系统的tabbarController很相似. 外界只需要调用下面这个接口即可集成. /** * 添加一个子控制器 */ - (void)addSubItemWithViewController:(UIViewController *)viewController; HYTabbarView效果图如下 HYTabbarView可灵活配置一屏宽显示多少个标题,以及标

  • IOS开发向右滑动返回前一个页面功能(demo)

    在ios7中,苹果的原生态应用几乎都能够通过向右滑动来返回到前一个页面,这样可以避免用户在单手操作时用大拇指去点击那个遥远的返回键(iphone5的这种返回被吐糟为反人类设计).然而现在android的手机市场上几乎很难找到小于4寸屏的手机了,几乎所有的应用都是通过点击左上角的返回来退到上一个页面,如果单手拿一个大屏手机,我是觉得会发疯.为此花了点时间写了个向右滑动返回的demo. 效果如下图: 此图为点击第一个Activity跳转到第二个Activity后,向右滑动再返回到第一个Activit

  • IOS仿今日头条滑动导航栏

    之前在我们平台给大家分享了网易首页导航封装类.网易首页导航封装类优化,今天在前两个的基础上仿下今日头条. 1.网易首页导航封装类中主要解决了上面导航的ScrollView和下面的页面的ScrollView联动的问题,以及上面导航栏的便宜量. 2.网易首页导航封装类优化中主要解决iOS7以上滑动返回功能中UIScreenEdgePanGestureRecognizer与ScrollView的滑动的手势冲突问题. 今天仿今日头条滑动导航和网易首页导航封装类优化相似,这个也是解决手势冲突,UIPanG

  • iOS实现双向滑动条效果

    最近做项目,碰到一种双向滑动条,自己实现了一下,随便写一下思路,方便以后开发,避免重复写代码,以后粘贴就行了.封装了一下,代码如下: #import <UIKit/UIKit.h> typedef NSString* (^HLDoubleSlideViewSwitchStrBock)(CGFloat count); @interface HLDoubleSlideView : UIView @property(nonatomic,assign)CGFloat maxValue; @proper

  • iOS实现垂直滑动条效果

    我们知道在 iOS 开发中,有一个控件经常用到,那就是滑动条(UISlider),可以满足我们滑动取值的需求.但是现在有一个需求,就是需要一个垂直的滑动条,而 UISlider 并不能设置为垂直滑动,所以我们就需要自己定义一个控件来实现垂直的要求. 整理之后,我们可以得出需要以下的基本需求: 可以上下滑动 按钮可以自定义图片 可以设置最小值 可以设置最大值 可以在滑动过程中获取实时的值 可以在滑动结束时获取到最终的值 可以设置进度背景色 我们的实现原理就是实现一个自定义的 UIView,然后在上

  • iOS实现音频进度条效果

    前几天开发群里有一个老兄问了一个开发问题,他们的需求是要做一个类似音频进度条的东西,我感觉设计还不错,于是就写了个小demo供大家参考,在争得了他的同意的情况下写下这篇文章. 话不多说先上效果图 看到这个效果的时候我感觉相对比较难的点有两点: 一.是这个进度条的进度颜色变化,这里思路还是比较清晰的,直接用layer的mask来做就可以. 二.第二点就是这个各各条条的高度不一致又没有规律可言,在各个方法中我最终选择用随机数来做.   好了思路清晰了,那就开始撸代码了. 首先创建一个View CYX

  • Android SeekBar实现滑动条效果

    本文实例为大家分享了Android SeekBar实现滑动条效果的具体代码,供大家参考,具体内容如下 SeekBar是ProgressBar的一个子类,下面我们用一个可以改变并显示当前进度的拖动条例子来演示一下它的使用: 1.main.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/

  • 使用Javascript开发sliding-nav带滑动条效果的导航插件

    本文介绍如何使用纯Javascript来开发一款简单的JS插件,本插件可以实现鼠标悬停在导航上时,下方的滑动条自动从当前菜单滑动到所选菜单当中去. 本项目的源代码寄宿于GitHub,记得点小星星哦: https://github.com/dosboy0716/sliding-nav 一.前言 效果如下图: 二.使用方法 本插件只需要如下的三步,就可以在您的项目中使用: 1.在</body>标记结束前,引用sliding-nav.js文件 2.在需要滑动条的菜单容器上加类名 sliding-na

  • 高仿网易新闻顶部滑动条效果实现代码

    这个是网易新闻的主界面,我们知道底部可以用tabhost实现,这个很容易,我们在其他软件中也会经常用到. 至于顶部的滑动条,个人感觉还是比较漂亮的所以今天也模仿了下,网易顶部滑动条的效果,由于初次模仿这种效果,可能有些地方还不够完美,不过基本已经实现,希望大家能够喜欢. 废话不多说,下面上代码: 首先是布局layout下的main.xml 复制代码 代码如下: <?xmlversion="1.0"encoding="utf-8"?> <Relati

  • iOS Segment带滑动条切换效果

    本文实例为大家分享了vue + element ui实现锚点定位的具体代码,供大家参考,具体内容如下 #import "ViewController.h"   @interface ViewController ()   @property (nonatomic,strong) NSArray *arrTitle;   @property (nonatomic,strong) UIView *flyBar;   @end   @implementation ViewController

  • 基于iOS实现音乐震动条效果

    一.简单分析 音乐震动条不需要与用户交互.我们可以使用复制层来操作.添加震动条.添加动画. 复制层说明 //创建复制层 -(void)createRepl{ //复制层 CAReplicatorLayer * repL = [CAReplicatorLayer layer]; repL.frame = self.contentV.bounds; //复制6份 repL.instanceCount = 6; //形变,每一个形变都是相对于上一个复制出来的子层开始的 repL.instanceTra

  • JS实现滑动条案例

    本文实例为大家分享了JS实现滑动条效果的具体代码,供大家参考,具体内容如下 在完成这个案例之前需要看一下这个博客:JS案例-添加缓动画 这个案例会用到上面博客的缓动画函数.实现效果如下: 完整代码如下: html代码: <!DOCTYPE html> <html lang="en">   <head>     <meta charset="UTF-8">     <meta http-equiv="X-

  • iOS实现背景滑动效果

    本文实例为大家分享了iOS实现背景滑动效果的具体代码,供大家参考,具体内容如下 第一步.在很多APP中,我们都可以看见那些特效绚丽的滑动选项条,那么如何才能够简单,快速的实现那样的效果呢 #import <UIKit/UIKit.h>      @interface ViewController : UIViewController{       NSMutableArray *btnArray;       NSMutableArray *titleArray;   }      @prop

随机推荐