iOS自定义水平滚动条、进度条
程序员文章站
2023-11-30 08:16:28
ios自定义水平滚动条、进度条,继承uiview,可点击轨道、滑动滑块交互。
先看一下效果图:
简单说一下逻辑,新建一个继承uiview的类,分别给轨道、滑块添加u...
ios自定义水平滚动条、进度条,继承uiview,可点击轨道、滑动滑块交互。
先看一下效果图:
简单说一下逻辑,新建一个继承uiview的类,分别给轨道、滑块添加uitapgesturerecognizer点击、uipangesturerecognizer滑动手势。获取偏移量,计算控件位置,刷新视图。
下面贴上核心代码:
显示视图,在控制器调用代码:
hwslider *slider = [[hwslider alloc] initwithframe:cgrectmake(10, 50, 300, 75)]; [self.view addsubview:slider];
hwslider:
#import <uikit/uikit.h> @interface hwslider : uiview @property (nonatomic, assign) nsinteger score; @end /*** ---------------分割线--------------- ***/ #import "hwslider.h" #import "uiview+additions.h" @interface hwslider () @property (nonatomic, weak) uiimageview *bubbleimage; @property (nonatomic, weak) uiimageview *arrowimage; @property (nonatomic, weak) uilabel *scorelabel; @property (nonatomic, weak) uilabel *levellable; @property (nonatomic, weak) uiview *trackview; @property (nonatomic, weak) uiimageview *thumb; @end @implementation hwslider - (instancetype)initwithframe:(cgrect)frame { if (self = [super initwithframe:frame]) { _score = 10; self.backgroundcolor = [uicolor whitecolor]; //气泡图片 uiimageview *bubbleimage = [[uiimageview alloc] initwithframe:cgrectmake(self.bounds.size.width - 70, 0, 74, 35)]; [bubbleimage setimage:[uiimage imagenamed:@"alert_teachereva_bubbleimage"]]; [self addsubview:bubbleimage]; _bubbleimage = bubbleimage; //分数标签 uilabel *scorelabel = [[uilabel alloc] initwithframe:cgrectmake(self.bounds.size.width - 71.5, 0, 74, 28)]; scorelabel.text = @"10"; scorelabel.textcolor = [uicolor blackcolor]; scorelabel.font = [uifont systemfontofsize:15.f]; scorelabel.textalignment = nstextalignmentcenter; [self addsubview:scorelabel]; _scorelabel = scorelabel; //气泡箭头 uiimageview *arrowimage = [[uiimageview alloc] initwithframe:cgrectmake(self.bounds.size.width - 16.5, 26, 13, 13)]; [arrowimage setimage:[uiimage imagenamed:@"alert_teachereva_arrowimage"]]; [self addsubview:arrowimage]; _arrowimage = arrowimage; //轨道可点击视图(轨道只设置了5pt,通过这个视图增加以下点击区域) uiview *tapview = [[uiview alloc] initwithframe:cgrectmake(0, 34, self.bounds.size.width, 20)]; [tapview addgesturerecognizer:[[uitapgesturerecognizer alloc] initwithtarget:self action:@selector(handletap:)]]; [self addsubview:tapview]; //轨道背景 uiview *backview = [[uiview alloc] initwithframe:cgrectmake(0, 7.5, self.bounds.size.width, 5)]; backview.backgroundcolor = [uicolor graycolor]; backview.layer.cornerradius = 2.5f; backview.layer.maskstobounds = yes; [tapview addsubview:backview]; //轨道前景 uiview *trackview = [[uiview alloc] initwithframe:cgrectmake(1.5, 9, self.bounds.size.width - 3, 2)]; trackview.backgroundcolor = [uicolor greencolor]; trackview.layer.cornerradius = 1.f; trackview.layer.maskstobounds = yes; [tapview addsubview:trackview]; _trackview = trackview; //滑块 uiimageview *thumb = [[uiimageview alloc] initwithframe:cgrectmake(self.bounds.size.width - 20, 34, 20, 20)]; [thumb setimage:[uiimage imagenamed:@"alert_teachereva_sliderimg"]]; thumb.userinteractionenabled = yes; thumb.contentmode = uiviewcontentmodecenter; [thumb addgesturerecognizer:[[uipangesturerecognizer alloc] initwithtarget:self action:@selector(handlepan:)]]; [self addsubview:thumb]; _thumb = thumb; //级别标签 uilabel *levellable = [[uilabel alloc] initwithframe:cgrectmake(0, cgrectgetmaxy(thumb.frame) + 7, self.bounds.size.width, 13)]; levellable.text = @"非常满意"; levellable.textcolor = [uicolor blackcolor]; levellable.font = [uifont systemfontofsize:13.f]; levellable.textalignment = nstextalignmentcenter; [self addsubview:levellable]; _levellable = levellable; } return self; } - (void)setscore:(nsinteger)score { _score = score; //刷新视图 [self reloadviewwiththumbceneterx:score / 10.0 * self.bounds.size.width]; } //点击滑动条 - (void)handletap:(uitapgesturerecognizer *)sender { //刷新视图 [self reloadviewwiththumbceneterx:[sender locationinview:self].x]; } //滑动滑块 - (void)handlepan:(uipangesturerecognizer *)sender { //获取偏移量 cgfloat movex = [sender translationinview:self].x; //重置偏移量,避免下次获取到的是原基础的增量 [sender settranslation:cgpointmake(0, 0) inview:self]; //计算当前中心值 cgfloat centerx = _thumb.centerx + movex; //防止瞬间大偏移量滑动影响显示效果 if (centerx < 10) centerx = 10; if (centerx > self.bounds.size.width - 10) centerx = self.bounds.size.width - 10; //刷新视图 [self reloadviewwiththumbceneterx:centerx]; } - (void)reloadviewwiththumbceneterx:(cgfloat)thumbceneterx { //更新轨道前景色 _trackview.framewidth = thumbceneterx; //更新滑块位置 _thumb.centerx = thumbceneterx; if (_thumb.centerx < 10) { _thumb.centerx = 10; }else if (_thumb.centerx > self.bounds.size.width - 10) { _thumb.centerx = self.bounds.size.width - 10; } //更新箭头位置 _arrowimage.centerx = _thumb.centerx; //更新气泡标签位置(气泡图片宽度74,实际内容宽度66) _bubbleimage.centerx = _thumb.centerx; if (_bubbleimage.centerx < 33) { _bubbleimage.centerx = 33; }else if (_bubbleimage.centerx > self.bounds.size.width - 33) { _bubbleimage.centerx = self.bounds.size.width - 33; } //更新分数标签位置 _scorelabel.centerx = _bubbleimage.centerx; //分数,四舍五入取整 _score = round(thumbceneterx / self.bounds.size.width * 10); //更新标签内容 _scorelabel.text = [nsstring stringwithformat:@"%ld", _score]; if (_score <= 3) { _levellable.text = @"极不满意"; }else if (_score <= 5) { _levellable.text = @"不满意"; }else if (_score <= 7) { _levellable.text = @"一般"; }else if (_score <= 9) { _levellable.text = @"满意"; }else if (_score == 10) { _levellable.text = @"非常满意"; } } @end
demo 下载链接
猜你喜欢:自定义垂直滚动条,可与scrollview联动交互。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。