欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

iOS实现双向滑动条效果

程序员文章站 2023-11-12 10:00:52
最近做项目,碰到一种双向滑动条,自己实现了一下,随便写一下思路,方便以后开发,避免重复写代码,以后粘贴就行了。封装了一下,代码如下: #import

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

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

运行结果如下:

iOS实现双向滑动条效果

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

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