UILabel over UIProgressView 具有多种颜色 [英] UILabel over UIProgressView with multiple colors

问题描述

所以我还没有这样做，我正在尝试如何做到这一点.所以我做了一个 UITableView 并且每个单元格都有一个关联的 NSTimer.现在在每个自定义 UITableViewCell 中，我都有一个 UIProgressView 作为背景，拉伸以填充单元格.现在我想在 UIProgressView 上添加一个带有剩余时间的 UILabel.但是由于进度条填充颜色和背景颜色明显不同(海军蓝色进度填充和白色背景/未填充区域)，我想知道如何在进度条填充时动态更改文本颜色.与 UILabel 中海军蓝色填充的部分一样，文本颜色应为白色.在白色背景上的部分，文本应该是黑色的.

头文件

#import @interface ZWProgressView : UIView@property (nonatomic,assign) CGFloat 进度；@property (nonatomic, strong) UIColor *normalTextColor;@property (nonatomic, strong) UIColor *maskedTextColor;@property (nonatomic, strong) UIView *container;@property (nonatomic, strong) UIView *progressBar;@property (nonatomic, strong) UILabel *progressLabel;@property (nonatomic, strong) UILabel *maskedProgressLabel;@property (nonatomic, strong) UIView *mask;@结尾

实现文件

#import "ZWProgressView.h"@接口 ZWProgressView(){NSLayoutConstraint *progressBarWidthConstraint;NSLayoutConstraint *progressBarMaskWidthConstraint;}@结尾@implementation ZWProgressView- (id)initWithFrame:(CGRect)frame{self = [super initWithFrame:frame];如果(自我){//初始化代码self.frame = 框架；[自初始化视图];[self addAllConstraints];}回归自我；}-(void)initView{self.layer.cornerRadius = 2.0;self.backgroundColor = [UIColor colorWithRed:0.85 green:0.85 blue:0.85 alpha:1.0];self.normalTextColor = [UIColor colorWithRed:0.2 green:0.2 blue:0.2 alpha:1.0];self.maskedTextColor = [UIColor whiteColor];self.container = [[UIView alloc] init];self.container.layer.borderWidth = 1.0;self.container.layer.borderColor = [UIColor grayColor].CGColor;self.container.backgroundColor = [UIColor whiteColor];self.container.layer.cornerRadius = 3.0;self.container.clipsToBounds = YES;self.progressBar = [[UIView alloc] init];self.progressBar.backgroundColor = [UIColor colorWithRed:0.2 green:0.3 blue:0.8 alpha:1.0];self.progressLabel = [[UILabel alloc] init];self.progressLabel.font = [UIFont fontWithName:@"Arial-BoldMT" size:30];self.progressLabel.textAlignment = NSTextAlignmentCenter;self.progressLabel.textColor = self.normalTextColor;self.progressLabel.clipsToBounds = YES;self.maskedProgressLabel = [[UILabel alloc] init];self.maskedProgressLabel.font = self.progressLabel.font;self.maskedProgressLabel.textAlignment = self.progressLabel.textAlignment;self.maskedProgressLabel.textColor = self.maskedTextColor;self.maskedProgressLabel.clipsToBounds = YES;self.mask = [[UIView alloc] init];[self.container addSubview:self.progressBar];[self.container addSubview:self.progressLabel];[self.container addSubview:self.maskedProgressLabel];[self.container addSubview:self.mask];[self addSubview:self.container];}-(void)addAllConstraints{self.container.translatesAutoresizingMaskIntoConstraints = NO;self.progressBar.translatesAutoresizingMaskIntoConstraints = NO;self.progressLabel.translatesAutoresizingMaskIntoConstraints = NO;self.maskedProgressLabel.translatesAutoresizingMaskIntoConstraints = NO;self.mask.translatesAutoresizingMaskIntoConstraints = NO;id views = @{@"container": self.container, @"progressBar": self.progressBar, @"progressLabel": self.progressLabel, @"maskedProgressLabel": self.maskedProgressLabel, @"mask": self.mask};//容器约束[self addConstraints:[NSLayoutConstraint constraintWithVisualFormat:@"H:|-5-[container]-5-|"选项:0 指标:nil 视图:视图]]；[self addConstraints:[NSLayoutConstraint constraintWithVisualFormat:@"V:|-5-[container]-5-|"选项:0 指标:nil 视图:视图]]；//进度条约束[self.container addConstraints:[NSLayoutConstraint constraintWithVisualFormat:@"H:|[progressBar]" options:0 metrics:nil views:views]];progressBarWidthConstraint = [NSLayoutConstraint constraintWithItem:self.progressBar 属性:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:nil 属性:NSLayoutAttributeWidth multiplier:1.0 constant:0];[self.container addConstraint:progressBarWidthConstraint];[self.container addConstraints:[NSLayoutConstraint constraintWithVisualFormat:@"V:|[progressBar]|"选项:0 指标:nil 视图:视图]]；//进度标签约束[self.container addConstraints:[NSLayoutConstraint constraintWithVisualFormat:@"H:|[progressLabel]|"选项:0 指标:nil 视图:视图]]；[self.container addConstraints:[NSLayoutConstraint constraintWithVisualFormat:@"V:|[progressLabel]|"选项:0 指标:nil 视图:视图]]；//maskedProgressLabel 约束[self.container addConstraints:[NSLayoutConstraint constraintWithVisualFormat:@"H:|[maskedProgressLabel]|"选项:0 指标:nil 视图:视图]]；[self.container addConstraints:[NSLayoutConstraint constraintWithVisualFormat:@"V:|[maskedProgressLabel]|"选项:0 指标:nil 视图:视图]]；//掩码约束[self.container addConstraints:[NSLayoutConstraint constraintWithVisualFormat:@"H:|[mask]" options:0 metrics:nil views:views]];[self.container addConstraints:[NSLayoutConstraint constraintWithVisualFormat:@"V:|[mask]|"选项:0 指标:nil 视图:视图]]；progressBarMaskWidthConstraint = [NSLayoutConstraint constraintWithItem:self.mask 属性:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:nil 属性:NSLayoutAttributeWidth multiplier:1.0 constant:0];[self.container addConstraint:progressBarMaskWidthConstraint];}-(void)setProgress:(CGFloat)progress{int 百分比 = 进度 * 100；NSString *strProgress = [[NSString alloc] initWithFormat:@"%d%%", 百分比];self.progressLabel.text = strProgress;self.maskedProgressLabel.text = strProgress;//------------------------------------------------------------------//为 |-5-[progressBar]-5-| 减去 10 个像素填充//进度条的约束//------------------------------------------------------------------progressBarWidthConstraint.constant = 进度 * (self.bounds.size.width - 10.0);progressBarMaskWidthConstraint.constant = progressBarWidthConstraint.constant;[自我布局IfNeeded];[自我更新掩码];}-(void)updateMask{//------------------------------------------------------------------------//屏蔽代码取自:////https://stackoverflow.com/questions/11391058/simply-mask-a-uiview-with-a-rectangle//------------------------------------------------------------------------CAShapeLayer *maskLayer = [[CAShapeLayer alloc] init];CGRect maskRect = CGRectMake(0, 0, progressBarMaskWidthConstraint.constant, self.mask.bounds.size.height);CGPathRef 路径 = CGPathCreateWithRect(maskRect, NULL);maskLayer.path = 路径；CGPathRelease(路径);self.maskedProgressLabel.layer.mask = maskLayer;}@结尾

So I haven't done this yet, I'm trying to play out how to do this. So I make a UITableView and each cell has an associated NSTimer. Now in each custom UITableViewCell I have a UIProgressView as the background, stretched to fill the cell. Now I want to add a UILabel with remaining time onto of the UIProgressView. But since the progress bar fill color and background color are dramatically different (navy blue progress fill and white background/non filled area), I'm wondering how to dynamically change the text color as the progress bar gets filled. Like the part of the UILabel that is on the navy blue fill, the text color should be white. The part that is on the white background, the text should be black. Something like this, but in objective-c.

解决方案

Just hacked this up for you :)

The Result

Here's a simulator result of ZWProgressView:

The View Controller File

Here's an example usage:

#import "ViewController.h"
#import "ZWProgressView.h"

@interface ViewController ()

@end

@implementation ViewController

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

    ZWProgressView *progressView = [[ZWProgressView alloc] init];
    progressView.frame = CGRectMake((self.view.bounds.size.width - 200) / 2.0, self.view.bounds.size.height / 2.0 - 25.0, 200, 50);

    progressView.progress = 0.47;

    [self.view addSubview:progressView];
}

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

@end

The ZWProgressView Class

Note: masking code taken from:

Simply mask a UIView with a rectangle

The header file

#import <UIKit/UIKit.h>

@interface ZWProgressView : UIView

@property (nonatomic, assign) CGFloat progress;
@property (nonatomic, strong) UIColor *normalTextColor;
@property (nonatomic, strong) UIColor *maskedTextColor;

@property (nonatomic, strong) UIView *container;
@property (nonatomic, strong) UIView *progressBar;
@property (nonatomic, strong) UILabel *progressLabel;
@property (nonatomic, strong) UILabel *maskedProgressLabel;
@property (nonatomic, strong) UIView *mask;

@end

The implementation file

#import "ZWProgressView.h"

@interface ZWProgressView()
{
    NSLayoutConstraint *progressBarWidthConstraint;
    NSLayoutConstraint *progressBarMaskWidthConstraint;
}

@end

@implementation ZWProgressView

- (id)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        // Initialization code

        self.frame = frame;

        [self initView];
        [self addAllConstraints];
    }
    return self;
}

-(void)initView
{
    self.layer.cornerRadius = 2.0;
    self.backgroundColor = [UIColor colorWithRed:0.85 green:0.85 blue:0.85 alpha:1.0];

    self.normalTextColor = [UIColor colorWithRed:0.2 green:0.2 blue:0.2 alpha:1.0];
    self.maskedTextColor = [UIColor whiteColor];

    self.container = [[UIView alloc] init];
    self.container.layer.borderWidth = 1.0;
    self.container.layer.borderColor = [UIColor grayColor].CGColor;
    self.container.backgroundColor = [UIColor whiteColor];
    self.container.layer.cornerRadius = 3.0;
    self.container.clipsToBounds = YES;

    self.progressBar = [[UIView alloc] init];
    self.progressBar.backgroundColor = [UIColor colorWithRed:0.2 green:0.3 blue:0.8 alpha:1.0];

    self.progressLabel = [[UILabel alloc] init];
    self.progressLabel.font = [UIFont fontWithName:@"Arial-BoldMT" size:30];
    self.progressLabel.textAlignment = NSTextAlignmentCenter;
    self.progressLabel.textColor = self.normalTextColor;
    self.progressLabel.clipsToBounds = YES;

    self.maskedProgressLabel = [[UILabel alloc] init];
    self.maskedProgressLabel.font = self.progressLabel.font;
    self.maskedProgressLabel.textAlignment = self.progressLabel.textAlignment;
    self.maskedProgressLabel.textColor = self.maskedTextColor;
    self.maskedProgressLabel.clipsToBounds = YES;

    self.mask = [[UIView alloc] init];

    [self.container addSubview:self.progressBar];
    [self.container addSubview:self.progressLabel];
    [self.container addSubview:self.maskedProgressLabel];
    [self.container addSubview:self.mask];

    [self addSubview:self.container];
}

-(void)addAllConstraints
{
    self.container.translatesAutoresizingMaskIntoConstraints = NO;
    self.progressBar.translatesAutoresizingMaskIntoConstraints = NO;
    self.progressLabel.translatesAutoresizingMaskIntoConstraints = NO;
    self.maskedProgressLabel.translatesAutoresizingMaskIntoConstraints = NO;
    self.mask.translatesAutoresizingMaskIntoConstraints = NO;

    id views = @{@"container": self.container, @"progressBar": self.progressBar, @"progressLabel": self.progressLabel, @"maskedProgressLabel": self.maskedProgressLabel, @"mask": self.mask};

    // container constraint

    [self addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-5-[container]-5-|" options:0 metrics:nil views:views]];
    [self addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-5-[container]-5-|" options:0 metrics:nil views:views]];

    // progressBar constraint

    [self.container addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|[progressBar]" options:0 metrics:nil views:views]];

    progressBarWidthConstraint = [NSLayoutConstraint constraintWithItem:self.progressBar attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeWidth multiplier:1.0 constant:0];

    [self.container addConstraint:progressBarWidthConstraint];

    [self.container addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|[progressBar]|" options:0 metrics:nil views:views]];

    // progressLabel constraint

    [self.container addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|[progressLabel]|" options:0 metrics:nil views:views]];
    [self.container addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|[progressLabel]|" options:0 metrics:nil views:views]];

    // maskedProgressLabel constraint
    [self.container addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|[maskedProgressLabel]|" options:0 metrics:nil views:views]];
    [self.container addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|[maskedProgressLabel]|" options:0 metrics:nil views:views]];

    // mask constraint
    [self.container addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|[mask]" options:0 metrics:nil views:views]];
    [self.container addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|[mask]|" options:0 metrics:nil views:views]];

    progressBarMaskWidthConstraint = [NSLayoutConstraint constraintWithItem:self.mask attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeWidth multiplier:1.0 constant:0];

    [self.container addConstraint:progressBarMaskWidthConstraint];
}

-(void)setProgress:(CGFloat)progress
{
    int percentage = progress * 100;

    NSString *strProgress = [[NSString alloc] initWithFormat:@"%d%%", percentage];

    self.progressLabel.text = strProgress;
    self.maskedProgressLabel.text = strProgress;

    // ------------------------------------------------------------------
    // subtracting 10 pixel for the |-5-[progressBar]-5-| padding in
    // the constraint for the progresBar
    // ------------------------------------------------------------------
    progressBarWidthConstraint.constant = progress * (self.bounds.size.width - 10.0);
    progressBarMaskWidthConstraint.constant = progressBarWidthConstraint.constant;

    [self layoutIfNeeded];

    [self updateMask];
}

-(void)updateMask
{
    // ------------------------------------------------------------------------
    // Masking code taken from:
    //
    // https://stackoverflow.com/questions/11391058/simply-mask-a-uiview-with-a-rectangle
    // ------------------------------------------------------------------------

    CAShapeLayer *maskLayer = [[CAShapeLayer alloc] init];
    CGRect maskRect = CGRectMake(0, 0, progressBarMaskWidthConstraint.constant, self.mask.bounds.size.height);

    CGPathRef path = CGPathCreateWithRect(maskRect, NULL);

    maskLayer.path = path;

    CGPathRelease(path);

    self.maskedProgressLabel.layer.mask = maskLayer;
}

@end

这篇关于UILabel over UIProgressView 具有多种颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！