创建方形而不是圆角边缘效果UIProgressView

Question

我有一个 UIProgressView，我试图使其具有方形而不是圆形边缘。我没有看到任何明显的方法来做到这一点，所以我的想法是使进度图像本身比其方形框架大一点，以便进度图像被裁剪成方形。然而，无论我如何改变进度图像的大小，我似乎都无法实现这种效果。谁能告诉我是否有办法实现我的目标？

这是我目前在 UIView 子类中的内容：

self.progressView = [[UIProgressView alloc] initWithProgressViewStyle:UIProgressViewStyleDefault];
self.progressView.trackImage = [PLStyle imageForColor:[PLColors greyLight] inFrame:CGRectMake(0, 0, 1, ProgressViewHeight)];
self.progressView.progressImage = [PLStyle imageForColor:[PLColors orange] inFrame:CGRectMake(0, 0, 1, ProgressViewHeight)];

[self.progressView setTranslatesAutoresizingMaskIntoConstraints:NO];
[self addSubview:self.progressView];

[self addConstraint:
 [NSLayoutConstraint constraintWithItem:self.progressView
                              attribute:NSLayoutAttributeLeading
                              relatedBy:NSLayoutRelationEqual
                                 toItem:self.imageView
                              attribute:NSLayoutAttributeTrailing
                             multiplier:1
                               constant:LeadingOrTrailingSpace]];

[self addConstraint:
 [NSLayoutConstraint constraintWithItem:self.progressView
                              attribute:NSLayoutAttributeCenterY
                              relatedBy:NSLayoutRelationEqual
                                 toItem:self
                              attribute:NSLayoutAttributeCenterY
                             multiplier:1
                               constant:0]];

[self addConstraint:
 [NSLayoutConstraint constraintWithItem:self.progressView
                              attribute:NSLayoutAttributeTrailing
                              relatedBy:NSLayoutRelationEqual
                                 toItem:self.counter
                              attribute:NSLayoutAttributeLeading
                             multiplier:1
                               constant:-LeadingOrTrailingSpace]];

[self addConstraint:
 [NSLayoutConstraint constraintWithItem:self.progressView
                              attribute:NSLayoutAttributeHeight
                              relatedBy:NSLayoutRelationEqual
                                 toItem:nil
                              attribute:NSLayoutAttributeNotAnAttribute
                             multiplier:1
                               constant:ProgressViewHeight]];

//上面用于在进度视图中创建图像的方法定义

+ (UIImage *)imageForColor:(UIColor *)color inFrame:(CGRect)rect
{
    UIGraphicsBeginImageContext(rect.size);
    CGContextRef context = UIGraphicsGetCurrentContext();

    CGContextSetFillColorWithColor(context, [color CGColor]);
    CGContextFillRect(context, rect);

    UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();

    return image;
}

Answer 1

将

UIProgressViewStyle 设置为 bar

目标-C：

[progressView setProgressViewStyle: UIProgressViewStyleBar];

斯威夫特：

progressView.progressViewStyle = .bar

Answer 2

您总是可以轻松地推出自己的产品。

@interface MyProgressView : UIView
@property (assign) float progress;
@end

@implementation MyProgressView {
  UIView *progressBar;
}
- (void)setProgress:(float)progress {
  _progress = progress;
  [self setNeedsLayout];
}
- (void)layoutSubviews {
  CGRect frame = self.bounds;
  frame.size.width *= progress;
  progressBar.frame = frame;
}
@end

您还可以使用“最小/最大值”+“设定值”并进行进度计算（如果这更适合您的应用程序）。如果您不喜欢将一堆

CALayer

 粉碎在一起进行简单的矩形绘制，您也可以使用 

UIView

。

Answer 3

使用progressViewStyle = .bar

 let p = UIProgressView(frame: .zero)
 p.progressViewStyle = .bar

Answer 4

这是方形进度条的代码

public func setProgress(_ value: Float, animated: Bool, completion: (() -> Void)? = nil) {
    layoutIfNeeded()
    let value = CGFloat(min(value, 1.0))
    progress = value
    progressLayer.strokeEnd = progress
    CATransaction.begin()
    let path = #keyPath(CAShapeLayer.strokeEnd)
    let fill = CABasicAnimation(keyPath: path)
    fill.fromValue = 0//oldValue
    fill.toValue = 1//value
    fill.duration = animationDuration + 0.5
    fill.isRemovedOnCompletion = false
    CATransaction.setCompletionBlock(completion)
    progressLayer.add(fill, forKey: "fill")
    CATransaction.commit()
} 

观看完整演示

https://www.youtube.com/watch?v=8hU3GrrckOQ