文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

iOS自定义水平滚动条、进度条

2022-05-21 05:17

关注

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联动交互

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程网。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-移动开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯