在定义的像素范围内从绿色过渡到红色 UIColor

Question

我有这个水平条（矩形区域）代表 0 到 5V 的电压。例如，如果电压为 2V，则该条将以绿色填充至 2V 标记。

从0-2.1V，代表电压的区域颜色应该是绿色。从 2.9-5V，颜色应该是红色的。

我想从 2.1-2.9 进行颜色过渡，从绿色到红色。我尝试了从另一个 Whosebug 主题获得的一种解决方案，但我不喜欢结果，因为光谱中有太多看起来不属于它们的颜色。

这是解决方案（80 的范围是 2.90 - 2.10 = .80）：

- (void)updateLayerProperties {
    CGRect barRect = self.bounds;
    barRect.size.width = (self.bounds.size.width * self.value)/3.5;
    UIBezierPath *path = [UIBezierPath bezierPathWithRect:barRect];
    self.barLayer.path = path.CGPath;
    if (self.value >= 1.30 && self.value <= 1.70) {
        self.barLayer.fillColor = [UIColor colorWithRed:((255 * (self.value - 1.00)) / 80)
                                                  green:((255 * (80 - (self.value - 1.00))) / 80)
                                                   blue:0
                                                  alpha:1.0].CGColor;
    } else {
        self.barLayer.fillColor = (self.value >= self.threshold) ? self.fullColor.CGColor : self.emptyColor.CGColor;
    }
    self.layer.borderWidth = self.borderWidth;
    self.layer.borderColor = self.borderColor.CGColor;
    self.layer.cornerRadius = 2.0f;
    self.layer.masksToBounds = YES;
}

最初，我只有 0-2.5V 是绿色，2.5-5V 是红色...但这看起来很糟糕，所以我正在尝试。

是否可以使用某种类型的动画来代替根据电压值计算颜色？假设过渡间隙是 2.1 - 2.9，过渡应该知道如何显示绿色和红色之间的最佳颜色。谢谢

Bar image, with value > 2.9

Answer 1

这应该让你开始：

//
//  GradientBarView.h
//
//  Created by Don Mag on 4/5/18.
//

#import <UIKit/UIKit.h>

@interface GradientBarView : UIView

@end

//
//  GradientBarView.m
//
//  Created by Don Mag on 4/5/18.
//

#import "GradientBarView.h"

@interface GradientBarView ()
@property (strong, nonatomic) CAGradientLayer *gradLayer;
@end

@implementation GradientBarView

- (id)initWithFrame:(CGRect)frame {
    self = [super initWithFrame:frame];
    if (self) {
        [self commonInit];
    }
    return self;
}

- (id)initWithCoder:(NSCoder *)aDecoder {
    if ((self = [super initWithCoder:aDecoder])) {
        [self commonInit];
    }
    return self;
}


- (void)commonInit {

    // instantiate the gradient layer
    _gradLayer = [CAGradientLayer new];

    // initial size
    _gradLayer.frame = self.bounds;

    // 4 colors, so we can have solid - gradient - solid
    _gradLayer.colors = @[
                          (__bridge id)[UIColor greenColor].CGColor,
                          (__bridge id)[UIColor greenColor].CGColor,
                          (__bridge id)[UIColor redColor].CGColor,
                          (__bridge id)[UIColor redColor].CGColor,
                          ];

    // 0.0 -> 2.1 should be green
    // 2.1 -> 2.9 should be a green-to-red gradient
    // 2.9 -> 5.0 should be red

    _gradLayer.locations = @[
                             @(0.0),
                             @(2.1 / 5.0),
                             @(2.9 / 5.0),
                             @(1.0)
                             ];

    // make it horizontal
    _gradLayer.startPoint = CGPointMake(0.0, 0.5);
    _gradLayer.endPoint = CGPointMake(1.0, 0.5);

    // add the gradient layer
    [self.layer addSublayer:_gradLayer];

}

- (void)layoutSubviews {
    _gradLayer.frame = self.bounds;
}

@end

//
//  GradBarViewController.h
//
//  Created by Don Mag on 4/5/18.
//

#import <UIKit/UIKit.h>

@interface GradBarViewController : UIViewController

@end

//
//  GradBarViewController.m
//
//  Created by Don Mag on 4/5/18.
//

#import "GradBarViewController.h"
#import "GradientBarView.h"

@interface GradBarViewController ()
@property (strong, nonatomic) GradientBarView *gradBarView;
@end

@implementation GradBarViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.

    // instantiate a GradientBarView
    _gradBarView = [GradientBarView new];

    // we'll use autolayout
    _gradBarView.translatesAutoresizingMaskIntoConstraints = NO;

    // add the view
    [self.view addSubview:_gradBarView];

    // center a 300 x 40 view

    /* center horizontally to superview */
    [NSLayoutConstraint constraintWithItem:_gradBarView
                                 attribute:NSLayoutAttributeCenterX
                                 relatedBy:NSLayoutRelationEqual
                                    toItem:self.view
                                 attribute: NSLayoutAttributeCenterX
                                multiplier:1.0
                                  constant:0].active = YES;

    /* center vertically to superview */
    [NSLayoutConstraint constraintWithItem:_gradBarView
                                 attribute:NSLayoutAttributeCenterY
                                 relatedBy:NSLayoutRelationEqual
                                    toItem:self.view
                                 attribute: NSLayoutAttributeCenterY
                                multiplier:1.0
                                  constant:0].active = YES;

    /* Fixed width */
    [NSLayoutConstraint constraintWithItem:_gradBarView
                                 attribute:NSLayoutAttributeWidth
                                 relatedBy:NSLayoutRelationEqual
                                    toItem:nil
                                 attribute:NSLayoutAttributeNotAnAttribute
                                multiplier:1.0
                                  constant:300.0].active = YES;
    /* Fixed Height */
    [NSLayoutConstraint constraintWithItem:_gradBarView
                                 attribute:NSLayoutAttributeHeight
                                 relatedBy:NSLayoutRelationEqual
                                    toItem:nil
                                 attribute:NSLayoutAttributeNotAnAttribute
                                multiplier:1.0
                                  constant:40.0].active = YES;

}

@end

结果（点击图片查看full-size）：

我会留给您查找如何屏蔽视图，以便您只显示左侧的 X-number 个点。

在定义的像素范围内从绿色过渡到红色 UIColor

Transition from Green to Red UIColor within a defined pixel range

animation

uiview

uicolor

ios

uibezierpath