4

The Photo Library on iOS 12 puts some kind of tricky gradient background on the thumbnail to display video duration label. I recorded a pure white background video and the label has a white to black gradient. But on other thumbnails, the gradient is different. Wondering what is the technique applied here? How do they select colors for gradient dependent on thumbnails?

enter image description here

enter image description here

Even WhatsApp has a custom gradient that displays date on image. If it's difficult to find the gradient that Photos App on iOS uses, any alternate gradient solution would be good as long as it is not disruptive.

Deepak Sharma
  • 5,577
  • 7
  • 55
  • 131

4 Answers4

0

I don’t think it’s just black to white. It looks more like black alpha 1 to white alpha 0. Maybe black alpha 0.5 to white alpha 0. Play around with the exact values, but that’s the gist.

Daniel
  • 3,188
  • 14
  • 34
0

Gradient Examples

I was able to re-create this pretty easily with a simple gradient that went from 176,176,176,0 at the top to 49,49,49,1 at the bottom.

garrettmurray
  • 3,338
  • 1
  • 25
  • 23
  • Stack Overflow is not a "write code for me" service. You asked about creating a gradient that visually matched the one in Photos, and the colors/gradients I showed here would absolutely work if utilized in code. I didn't write the Swift code to generate gradients (it looks like others did), but it's misleading to respond "doesn't seem to work" when these gradients absolutely would. – garrettmurray Aug 12 '19 at 18:16
  • Could you share the second pattern image and I can test by generating a video out of it and see if it matches in Photo Library? – Deepak Sharma Aug 13 '19 at 02:24
0

If you want to try it.

  • Take an UiImageView in Backwards to UILabel.
  • And Set below image in UiImageView.

enter image description here

  • And Set UiLabel above UiImageView, in my last task it is helpful to me ;).
steveSarsawa
  • 1,559
  • 2
  • 14
  • 31
0

Here I use create an extension for gradient

@IBDesignable
class GradientView: UIView {
    @IBInspectable var firstColor: UIColor = UIColor.clear {
        didSet {
            updateGradientView()
        }
    }

    @IBInspectable var secondColor: UIColor = UIColor.clear {
        didSet {
            updateGradientView()
        }
    }

    @IBInspectable var thirdColor: UIColor = UIColor.clear {
        didSet {
            updateGradientView()
        }
    }

    override class var layerClass: AnyClass {
        get {
            return CAGradientLayer.self
        }
    }

    @IBInspectable var isHorizontal: Bool = true {
        didSet {
            updateGradientView()
        }
    }

    func updateGradientView() {
        let gradientLayer = self.layer as! CAGradientLayer

        if (self.isHorizontal) {
            //gradientLayer.colors = [firstColor, secondColor, thirdColor].map{$0.cgColor}

            gradientLayer.colors = [firstColor.withAlphaComponent(1.0), secondColor.withAlphaComponent(0.59), thirdColor.withAlphaComponent(1.0)].map{$0.cgColor}
            gradientLayer.locations = [0.29, 0.60, 1]
            gradientLayer.startPoint = CGPoint(x: 0.0, y: 0.5)
            gradientLayer.endPoint = CGPoint (x: 1.0, y: 0.5)
        } else {
            gradientLayer.colors = [firstColor.withAlphaComponent(0.5), secondColor.withAlphaComponent(0.0), thirdColor.withAlphaComponent(0.0)].map{$0.cgColor}
            gradientLayer.startPoint = CGPoint(x: 0.5, y: 1.0)
            gradientLayer.endPoint = CGPoint (x: 0.5, y: 0.5)
        }
    }
}
Parth Patel
  • 915
  • 11
  • 33