这应该让您开始:
//
// 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
结果(单击图像以查看其全尺寸):
我将让您查看如何遮罩视图,以便您只显示左侧的X个点数。