iOS如何自定义水平滚动条、进度条
创始人
2024-12-19 23:04:00
0次

简单说一下逻辑,新建一个继承UIView的类,分别给轨道、滑块添加UITapGestureRecognizer点击、UIPanGestureRecognizer滑动手势。获取偏移量,计算控件位置,刷新视图。

下面贴上核心代码:

显示视图,在控制器调用代码:

HWSlider *slider = [[HWSlider alloc] initWithFrame:CGRectMake(10, 50, 300, 75)];[self.view addSubview:slider];

HWSlider:

#import @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

相关内容

热门资讯

空调连续工作多久需要停机休息 空调连续工作的时间取决于多个因素,包括空调的型号、功率、使用环境和维护情况等。一般来说,空调可以连续...
空调哪个符号是除湿的 空调除湿功能通常用一个水滴形状的符号表示。不同品牌和型号的空调遥控器可能会有所差异,但一般来说,除湿...
格力空调多长时间加一次氟利昂 1、一般情况下,空调对氟利昂的使用量是非常小的,所以在空调使用了四年左右的时候再考虑加也没问题。2、...
空调用多长时间需要加氟一次 一般情况下是五年。当出现以下这几种情况时,空调才需要加氟。1、空调的室内机和室外机各有两个接口,当接...
格调生活·C标思享荟:卡萨帝在... 9月12日的郑州龙湖金融岛,夜风轻拂,灯光璀璨。“C标时刻共传奇——卡萨帝思享荟暨20周年品牌盛典郑...
品牌价值破千亿、高端份额持续领... 9月12日,“C标时刻共传奇——卡萨帝思享荟暨20周年品牌盛典郑州站”在郑州龙湖金融岛举办。2026...
空调主板坏了修800还是换新的 空调主板坏了是修还是换新,需要考虑多个因素,以下是一些建议:1. 维修成本:如果维修费用较低,比如 ...
空调开多久需要休息多长时间 问题:空调开多久需要休息多长时间回答:1、在使用空调的过程中,一般空调开7~8个小时左右需要休息2~...
中央空调多长时间清洗一次 1、一般空调开机前清洗一次即可,空调开机中间时段再清洗一次,空调关机时清洗一次,这样比较合理。2、空...
中央空调氟利昂多久加一次 看空调制热和制冷程度,很多人的观点认为氟利昂必须一年放一次,其实这个观点是错误的,理解上面有点偏差,...