iOS可复用控件之调节控件

GitHub地址：https://github.com/runThor/HTAdjustView

效果：

实现：

//  HTAdjustView.h

#import <UIKit/UIKit.h>

@interface HTAdjustView : UIView

// 设置名称、当前值、单位、上限值、下限值
- (void)setName:(NSString *)name
          value:(CGFloat)value
           unit:(NSString *)unit
       maxValue:(CGFloat)maxValue
       minValue:(CGFloat)minValue;

@end

//  HTAdjustView.m

#import "HTAdjustView.h"

@interface HTAdjustView ()

@property (nonatomic, strong) UIImageView *adjustView;  // 调节按钮
@property (nonatomic, strong) UIImageView *adjustBackView;  // 背景视图
@property (nonatomic, assign) BOOL prepareToMove;  // 调节按钮是否可以移动
@property (nonatomic, strong) UIButton *valueBtn;  // 当前值
@property (nonatomic, strong) UIButton *nameBtn;  // 名称
@property (nonatomic, copy) NSString *unit;  // 单位
@property (nonatomic, assign) CGFloat maxValue;  // 上限值
@property (nonatomic, assign) CGFloat minValue;  // 下限值
@property (nonatomic, assign) CGFloat maxValueY;  // 最大值位置的y坐标
@property (nonatomic, assign) CGFloat minValueY;  // 最小值位置的y坐标
@property (nonatomic, assign) CGFloat displayValue;  // 当前用于展示的值
@property (nonatomic, strong) UIImageView *adjustProgressView;  // 进度条
@property (nonatomic, strong) UIImageView *scaleView;  // 刻度视图

@end

@implementation HTAdjustView

- (instancetype)initWithFrame:(CGRect)frame {
    if (self = [super initWithFrame:frame]) {
        // 初始化视图
        [self loadViews];
    }
    
    return self;
}

// 初始化视图
- (void)loadViews {
    self.valueBtn = [[UIButton alloc] initWithFrame:CGRectMake(self.frame.size.width * 0.05, 0, self.frame.size.width * 0.9, self.frame.size.height * 0.1)];
    [self.valueBtn setTitle:@"N/A" forState:UIControlStateNormal];
    [self.valueBtn setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];
    self.valueBtn.titleLabel.font = [UIFont systemFontOfSize:11];
    [self.valueBtn setBackgroundImage:[UIImage imageNamed:@"valueBg"] forState:UIControlStateNormal];
    self.valueBtn.enabled = NO;
    [self addSubview:self.valueBtn];
    
    self.adjustBackView = [[UIImageView alloc] initWithFrame:CGRectMake(self.frame.size.width * 0.35, self.frame.size.height * 0.15, self.frame.size.width * 0.1, self.frame.size.height * 0.7)];
    self.adjustBackView.image = [UIImage imageNamed:@"adjustBg"];
    [self addSubview:self.adjustBackView];
    
    self.scaleView = [[UIImageView alloc] initWithFrame:CGRectMake(self.frame.size.width * 0.55, self.frame.size.height * 0.15, self.frame.size.width * 0.1, self.frame.size.height * 0.7)];
    self.scaleView.image = [UIImage imageNamed:@"scaleBg"];
    [self addSubview:self.scaleView];
    
    self.adjustProgressView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, self.adjustBackView.frame.size.width, self.adjustBackView.frame.size.height)];
    self.adjustProgressView.image = [UIImage imageNamed:@"progressBg"];
    [self.adjustBackView addSubview:self.adjustProgressView];
    self.adjustBackView.layer.masksToBounds = YES;
    
    self.adjustView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, self.frame.size.width * 0.2, self.frame.size.width * 0.2)];
    [self.adjustView setCenter:self.adjustBackView.center];
    self.adjustView.image = [UIImage imageNamed:@"adjustBtn"];
    [self addSubview:self.adjustView];
    
    self.nameBtn = [[UIButton alloc] initWithFrame:CGRectMake(1, self.frame.size.height * 0.9, self.frame.size.width - 2, self.frame.size.height * 0.1 - 1)];
    [self.nameBtn setBackgroundImage:[UIImage imageNamed:@"nameBg"] forState:UIControlStateNormal];
    [self.nameBtn setTitle:@"N/A" forState:UIControlStateNormal];
    [self.nameBtn setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];
    self.nameBtn.titleLabel.font = [UIFont systemFontOfSize:12];
    self.nameBtn.enabled = NO;
    [self addSubview:self.nameBtn];
    
    self.minValueY = self.adjustBackView.frame.origin.y + self.adjustBackView.frame.size.height - self.adjustView.frame.size.height/2;
    self.maxValueY = self.adjustBackView.frame.origin.y + self.adjustView.frame.size.height/2;
}


- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {
    CGPoint touchPoint = [[touches anyObject] locationInView:self];
    // 触摸位置在有效范围内，则可以移动调节按钮
    if (touchPoint.x <= self.adjustView.frame.origin.x + self.adjustView.frame.size.width + 10 && touchPoint.x >= self.adjustView.frame.origin.x - 10 &&  touchPoint.y <= self.adjustView.frame.origin.y + self.adjustView.frame.size.height + 10 && touchPoint.y >= self.adjustView.frame.origin.y - 10) {
        
        self.prepareToMove = YES;
    }
}


- (void)touchesMoved:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {
    if (self.prepareToMove == YES) {
        // 移动调节按钮
        CGPoint touchLocation = [[touches anyObject] locationInView:self];
        CGPoint preTouchLocation = [[touches anyObject] previousLocationInView:self];
        CGFloat moveDistance = touchLocation.y - preTouchLocation.y;
        
        CGFloat totalValueHeight = self.minValueY - self.maxValueY;
        
        CGFloat currentCenterY = self.adjustView.center.y + moveDistance;
        
        if (currentCenterY < self.maxValueY) {
            currentCenterY = self.maxValueY;
        } else if (currentCenterY > self.minValueY) {
            currentCenterY = self.minValueY;
        }
        
        [self.adjustView setCenter:CGPointMake(self.adjustView.center.x, currentCenterY)];
        // 进度条跟随调节按钮变化
        self.adjustProgressView.frame = CGRectMake(0, currentCenterY - self.adjustBackView.frame.origin.y, self.adjustProgressView.frame.size.width, self.adjustProgressView.frame.size.height);
        
        // 根据上下限计算展示值
        CGFloat ratio = (self.minValueY - currentCenterY)/totalValueHeight;
        self.displayValue = ratio * (self.maxValue - self.minValue) + self.minValue;
        NSString *valueStr = [NSString stringWithFormat:@"%.1f%@", self.displayValue, self.unit];
        [self.valueBtn setTitle:valueStr forState:UIControlStateNormal];
    }
}

- (void)touchesEnded:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {
    self.prepareToMove = NO;
}

// 设置名称、展示值、单位、上限值、下限值
- (void)setName:(NSString *)name
          value:(CGFloat)value
           unit:(NSString *)unit
       maxValue:(CGFloat)maxValue
       minValue:(CGFloat)minValue {
    [self.nameBtn setTitle:name forState:UIControlStateNormal];
    self.displayValue = value;
    [self.valueBtn setTitle:[NSString stringWithFormat:@"%.1f%@", value, unit] forState:UIControlStateNormal];
    self.unit = unit;
    self.maxValue = maxValue;
    self.minValue = minValue;
    
    CGFloat ratio = (value - self.minValue)/(self.maxValue - self.minValue);
    CGFloat currentCenterY = self.minValueY - (self.minValueY - self.maxValueY) * ratio;
    [self.adjustView setCenter:CGPointMake(self.adjustView.center.x, currentCenterY)];
    
    self.adjustProgressView.frame = CGRectMake(0, currentCenterY - self.adjustBackView.frame.origin.y, self.adjustProgressView.frame.size.width, self.adjustProgressView.frame.size.height);
}

@end

使用：

//  ViewController.m

#import "ViewController.h"
#import "HTAdjustView.h"

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    
    self.view.backgroundColor = [UIColor grayColor];

    HTAdjustView *adjustView = [[HTAdjustView alloc] initWithFrame:CGRectMake(0, 0, 50, 200)];
    [adjustView setCenter:CGPointMake(self.view.frame.size.width/2, self.view.frame.size.height/2)];
    [adjustView setName:@"水泵" value:80 unit:@"L" maxValue:150 minValue:30];
    [self.view addSubview:adjustView];
}


- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}


@end