Setting up Gradient Background Colors in Interface Builder for a Gradient View

Question

I have enabled gradient view in attribute inspector but I'm having trouble fixing the colors to show more of a transition with the colors and also show the colors going from bottom to top instead of colors going left to right? What are the modifications on the right pane that need to be made?

Answer 1

您希望Start PointX和End PointX为0.然后将Start PointY设置为0并将End PointY设置为1.这将从顶部到底部给出一个渐变，从顶部的顶部颜色和底部的底部颜色开始。

Answer 2

I wasn't aware you could add gradients via storyboard to be honest, but if you do this via code you'll have a lot more options. Such as more colors, colour locations etc

    // Create a gradient layer
   let gradient: CAGradientLayer = CAGradientLayer()
    // Create an array of colours you can use, as many colours as you require
    gradient.colors = [.blue.cgColor, .red.cgColor, .orange.cgColor].cgColor
    // Chose the locations for your colors, 0.5 is center
    gradient.locations = [0.0, 0.5, 1.0]
    // Start and end points so this goes from y: 0.0 to y: 1.0 so top to bottom
    gradient.startPoint = CGPoint(x: 1.0, y: 0.0)
    gradient.endPoint = CGPoint(x: 1.0, y: 1.0)
    // Set the frame
    gradient.frame = CGRect(x: 0.0, y: 0.0, width: yourView.frame.size.width, height: yourView.frame.size.height)
    // Add to view
    yourView.layer.insertSublayer(gradient, at: 0)