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

问题

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?

回答1:

You want Start PointX and End PointX to be 0. Then set Start PointY to 0 and End PointY to 1. This will give a gradient from top to bottom starting with the Top Color at the top and the Bottom Color at the bottom.

回答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)

来源：https://stackoverflow.com/questions/55668540/setting-up-gradient-background-colors-in-interface-builder-for-a-gradient-view