iOS自定義水平滾動條、進度條

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

#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;
  
  //分數(shù)標簽
  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，通過這個視圖增加以下點擊區(qū)域）
  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;
 }
 
 //更新分數(shù)標簽位置
 _scoreLabel.centerX = _bubbleImage.centerX;
 
 //分數(shù)，四舍五入取整
 _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