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 = @"非常滿意"; }} @endDemo 下載鏈接
猜你喜歡：自定義垂直滾動條，可與scrollView聯動交互。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
