iOS 프로그래밍 방식의 그래디언트

Question

붙어있는 이미지에서와 똑같은 그라디언트를 프로그래밍 방식으로 어떻게 얻을 수 있습니까?

Answer 1

대답은 주로 디자이너가 그라디언트를 만드는 데 사용하는 방법에 따라 달라집니다. 그라디언트 색상 및 점과 같이 개발자에게 유용한 정보를 제공하는 Invision과 같은 도구가 있습니다. 그러나 Photoshop에서 방금 만든 경우 프로그래밍 방식으로 재현하는 것이 어렵습니다. 그래디언트 이미지를 요청해야합니다.

또 다른 해결책은 Xcode에서 @IBDesignable 그라데이션보기를 사용하는 것입니다. 많은 개발자들이 과거에이 문제를 많이 다루어야했기 때문에 나를 비롯한 많은 개발자들이이를 만들었습니다. 이 방법의 주요 단점은 색을 미세하게 조정하고 필요할 경우 애니메이션을 적용하는 것이 매우 쉽다는 것입니다.

나는 오픈 소스 예제 available on GitHub을 가지고 있으며, extended explanation of how it works을 썼다.

나는 내 프로젝트를 사용하여 당신처럼 그라데이션을 만들 수있는 빠른 시도가 있고,이는 엑스 코드에 모습입니다 : -

을 결정적인 부분은 특성 관리자 패널의 상단이다, 시작 및 종료 그라디언트 색상과 그라디언트 각도를 쉽게 설정할 수 있습니다. 사용자의 주위는 310도 각도로 보입니다.

아래 붙여 넣을 필요가 코드의 주요 부분입니다. 위의 링크를 따라 작동 방식을 확인하십시오.

import UIKit 
@IBDesignable 
class LDGradientView: UIView { 

    // the gradient start colour 
    @IBInspectable var startColor: UIColor? { 
     didSet { 
      updateGradient() 
     } 
    } 

    // the gradient end colour 
    @IBInspectable var endColor: UIColor? { 
     didSet { 
      updateGradient() 
     } 
    } 

    // the gradient angle, in degrees anticlockwise from 0 (east/right) 
    @IBInspectable var angle: CGFloat = 270 { 
     didSet { 
      updateGradient() 
     } 
    } 

    // the gradient layer 
    private var gradient: CAGradientLayer? 

    // initializers 
    required init?(coder aDecoder: NSCoder) { 
     super.init(coder: aDecoder) 
     installGradient() 
    } 

    override init(frame: CGRect) { 
     super.init(frame: frame) 
     installGradient() 
    } 

    // Create a gradient and install it on the layer 
    private func installGradient() { 
     // if there's already a gradient installed on the layer, remove it 
     if let gradient = self.gradient { 
      gradient.removeFromSuperlayer() 
     } 
     let gradient = createGradient() 
     self.layer.addSublayer(gradient) 
     self.gradient = gradient 
    } 

    // Update an existing gradient 
    private func updateGradient() { 
     if let gradient = self.gradient { 
      let startColor = self.startColor ?? UIColor.clear 
      let endColor = self.endColor ?? UIColor.clear 
      gradient.colors = [startColor.cgColor, endColor.cgColor] 
      let (start, end) = gradientPointsForAngle(self.angle) 
      gradient.startPoint = start 
      gradient.endPoint = end 
     } 
    } 

    // create gradient layer 
    private func createGradient() -> CAGradientLayer { 
     let gradient = CAGradientLayer() 
     gradient.frame = self.bounds 
     return gradient 
    } 

    // create vector pointing in direction of angle 
    private func gradientPointsForAngle(_ angle: CGFloat) -> (CGPoint, CGPoint) { 
     // get vector start and end points 
     let end = pointForAngle(angle) 
     //let start = pointForAngle(angle+180.0) 
     let start = oppositePoint(end) 
     // convert to gradient space 
     let p0 = transformToGradientSpace(start) 
     let p1 = transformToGradientSpace(end) 
     return (p0, p1) 
    } 

    // get a point corresponding to the angle 
    private func pointForAngle(_ angle: CGFloat) -> CGPoint { 
     // convert degrees to radians 
     let radians = angle * .pi/180.0 
     var x = cos(radians) 
     var y = sin(radians) 
     // (x,y) is in terms unit circle. Extrapolate to unit square to get full vector length 
     if (fabs(x) > fabs(y)) { 
      // extrapolate x to unit length 
      x = x > 0 ? 1 : -1 
      y = x * tan(radians) 
     } else { 
      // extrapolate y to unit length 
      y = y > 0 ? 1 : -1 
      x = y/tan(radians) 
     } 
     return CGPoint(x: x, y: y) 
    } 

    // transform point in unit space to gradient space 
    private func transformToGradientSpace(_ point: CGPoint) -> CGPoint { 
     // input point is in signed unit space: (-1,-1) to (1,1) 
     // convert to gradient space: (0,0) to (1,1), with flipped Y axis 
     return CGPoint(x: (point.x + 1) * 0.5, y: 1.0 - (point.y + 1) * 0.5) 
    } 

    // return the opposite point in the signed unit square 
    private func oppositePoint(_ point: CGPoint) -> CGPoint { 
     return CGPoint(x: -point.x, y: -point.y) 
    } 

    // ensure the gradient gets initialized when the view is created in IB 
    override func prepareForInterfaceBuilder() { 
     super.prepareForInterfaceBuilder() 
     installGradient() 
     updateGradient() 
    } 
}