UIProgressView设置为图像？整个UIprogressView contentView，向下？

Question

​

​

你好啊，

在过去的一周里，我一直在试图解决一个如何在我的viewController中创建两个viewController的问题，但几乎没有成功。请看我所附的图表，作为我提出的问题的一个想法。

我正在创建一个带有计时器的游戏，每个问题都经过这个定时器。随着时间的推移，我希望一个UIProgressView在整个屏幕上级联，整个屏幕从蓝色过渡到白色(请参阅图表中的数字1，这表示白色trackTintColor)。

图中的数字2(青色部分)表示progressTintColor。图应该是明确的，因为我希望定制progressView，以便它向下跟踪。这是目前的主要问题之一。(我似乎只能通过小的可定制的Progressview，而不是上下移动的小巧可定制的Progressview来实现漫游)

我想要实现的最困难的部分是(图中的数字3)，定制一个UIImageView，这样它就会慢慢地用反色向下排到背景上(因此，狗将是白色的，青色会向下泛滥，以与它身后的progressView相一致)。

到目前为止，这些都是我试图解决这个问题的办法，但没有结果。

我尝试过使用progressView作为backgroundColor，但是我在任何地方都找不到其他人(向下)这样做的例子，所以我不确定这是否可能？

对于这张图片，我试着画了一个CAShape图层，但它似乎是一个很难的形状，像我这样的新手有效地画。当我意识到我将无法在狗后面设置一层不同的颜色来向下移动，因为屏幕也会改变颜色，我放弃了使用这个选项的所有希望。

我尝试了一个UIView转换狗的形象，然而，我能找到的唯一的选择是接近任何地方都是transitionCrossDissolve，它没有给我希望的下行效果，而是只是从一只白狗到一只青色狗，这是不合适的。我是否应该使用progressImage呢？如果是这样的话，有什么地方我可以找到帮助的语法吗？我好像什么地方都找不到。

我现在有55个图像在我的资产文件夹，每一个有略多的青色比上一个，逐步向下移动(因为它通过一个图像数组动画)。虽然这样做是可行的，但它并不是完全无缝的，而且看起来有点像用户正在等待拨号时加载的图像。

如果有人有任何想法或能抽出时间让我了解我将如何做这件事，我将非常感激。我仍然是一个初学者，所以越详细越好！哦，是的，让事情变得更困难，到目前为止，我已经成功地完成了这个应用程序，所以这个形式的答案将是很棒的。

提前感谢！

Answer 1

我希望你把number 1和number 2做得很好。我已经试过第三个了。

我试过用两个UIView。工作很好。我想，这会给你一些想法来达到你的目标。

我有两张照片。

​

​

在TIMER的帮助下，我尝试了这个ProgressView的示例。

cyanDogView的高度应该是零。一旦计时器开始，高度应该由2px增加。一旦cyanDogView's高度应该大于BlackDogView，那么Timer就停止了。

编码

@IBOutlet weak var blackDogView: UIView!
@IBOutlet weak var blackDogImgVw: UIImageView!

@IBOutlet weak var cyanDogView: UIView!
@IBOutlet weak var cyanDogImgVw: UIImageView!

var getHeight : CGFloat = 0.0
var progressTime = Timer()

override func viewDidAppear(_ animated: Bool) {

    cyanDogView.frame.size.height = 0

    getHeight = blackDogView.frame.height
}

@IBAction func startAnimateButAcn(_ sender: UIButton) {

    progressTime = Timer.scheduledTimer(timeInterval: 0.2, target: self, selector: #selector(self.update), userInfo: nil, repeats: true)

}


@objc func update() {
    cyanDogView.frame.size.height = cyanDogView.frame.size.height + 2

    if cyanDogView.frame.size.height >= getHeight
    {
        progressTime.invalidate()
        cyanDogView.frame.size.height = 0
    }
}

故事板

​

​

输出

​

​

Answer 2

我在这里给你们一些科学怪人的答案，部分是欧比-C部分是斯威夫特。希望能帮上忙。

首先，您可以创建用作模板的图像掩码的bezier路径：

- (UIImage *)cerateImageFromImage:(UIImage *)image
                withMaskImage:(UIImage *)mask {
CGImageRef imageRef = image.CGImage;
CGImageRef maskRef = mask.CGImage;

CGImageRef imageMask = CGImageMaskCreate(CGImageGetWidth(maskRef),
                                         CGImageGetHeight(maskRef),
                                         CGImageGetBitsPerComponent(maskRef),
                                         CGImageGetBitsPerPixel(maskRef),
                                         CGImageGetBytesPerRow(maskRef),
                                         CGImageGetDataProvider(maskRef),
                                         NULL,
                                         YES);

CGImageRef maskedReference = CGImageCreateWithMask(imageRef, imageMask);
CGImageRelease(imageMask);

UIImage *maskedImage = [UIImage imageWithCGImage:maskedReference];
CGImageRelease(maskedReference);

return maskedImage;
}

UIImage *image = [UIImage imageNamed:@"Photo.png"];
UIImage *mask = [UIImage imageNamed:@"Mask.png"];
self.imageView.image = [self cerateImageFromImage:image
                                     withMaskImage:mask];

Credit to Keenle

接下来，可以根据路径创建自定义进度视图：

func drawProgressLayer(){

   let bezierPath = UIBezierPath(roundedRect: viewProg.bounds, cornerRadius: viewCornerRadius)
   bezierPath.closePath()
   borderLayer.path = bezierPath.CGPath
   borderLayer.fillColor = UIColor.blackColor().CGColor
   borderLayer.strokeEnd = 0
   viewProg.layer.addSublayer(borderLayer)


}

//Make sure the value that you want in the function `rectProgress` that is going to define 
//the width of your progress bar must be in the range of
// 0 <--> viewProg.bounds.width - 10 , reason why to keep the layer inside the view with some border left spare.
//if you are receiving your progress values in 0.00 -- 1.00 range , just multiply your progress values to viewProg.bounds.width - 10 and send them as *incremented:* parameter in this func

func rectProgress(incremented : CGFloat){

    print(incremented)
    if incremented <= viewProg.bounds.width - 10{
        progressLayer.removeFromSuperlayer()
        let bezierPathProg = UIBezierPath(roundedRect: CGRectMake(5, 5, incremented , viewProg.bounds.height - 10) , cornerRadius: viewCornerRadius)
        bezierPathProg.closePath()
        progressLayer.path = bezierPathProg.CGPath
        progressLayer.fillColor = UIColor.whiteColor().CGColor
        borderLayer.addSublayer(progressLayer)

    }

  }

Credit to Dravidian

请点击蓝色链接，并充分探索他们的答案，以掌握什么是可能的。

Answer 3

好的，使用McDonal_11的答案，我已经设法让progressView工作了，但是，我仍然遇到了一些问题。我不能在progressView上添加任何东西，它只是覆盖了下面的所有东西，在狗开始将它的动画变成一只青色的狗之前，有一个短暂的闪光整个青色狗的形象。

代码如下

private let contentView = UIView(frame: .zero)
private let backgroundImageView = UIImageView(frame: .zero)
private let progressView = ProgressView(frame: .zero)
private let clearViewOverProgress = UIView(frame: .zero)
private let blackDogView = UIView(frame: .zero)
private let blackDogViewImage = UIImageView(frame: .zero)
private let cyanDogView = UIView(frame: .zero)
private let cyanDogViewImage = UIImageView()

var timer = Timer()
var startHeight : CGFloat = 0.0

override func viewDidAppear(_ animated: Bool) {
    super.viewDidAppear(animated)

    self.progressView.setProgress(10.0, animated: true)
    startHeight = cyanDogViewImage.frame.height
    self.cyanDogViewImage.frame.size.height = 0
    self.timer = Timer.scheduledTimer(timeInterval: 0.01, target: self, selector: #selector(self.updateImage), userInfo: nil, repeats: true)
}


override func viewDidLoad() {
    super.viewDidLoad()
    setupViews()

}

func setupViews() {

self.view.addSubview(backgroundImageView)
    self.backgroundImageView.addSubview(progressView)
    self.progressView.addSubview(clearViewOverProgress)
    self.clearViewOverProgress.addSubview(blackDogView)
    self.blackDogView.addSubview(blackDogViewImage)
    self.blackDogViewImage.addSubview(cyanDogView)
    self.cyanDogView.addSubview(cyanDogViewImage)

//设置两个标签的约束(为简洁起见省略)

    self.blackDogViewImage.image = UIImage(named: “BlackDogImage”)

self.cyanDogViewImage.contentMode = UIViewContentMode.top
    self.cyanDogViewImage.clipsToBounds = true
    self.cyanDogViewImage.image = UIImage(named: “CyanDogImage”)
}

func updateImage() {
    cyanDogViewImage.frame.size.height = 
cyanDogViewImage.frame.size.height + 0.07

    if cyanDogViewImage.frame.size.height >= blackDogViewImage.frame.size.height
{
 timer.invalidate()
 cyanDogViewImage.frame.size.height = blackDogViewImage.frame.size.height
    }
}

func outOfTime() {
    timer.invalidate()
}