iOSプログラム勾配

Question

プログラムで添付された画像とまったく同じ勾配を達成するにはどうすればよいですか？

Answer 1

答えは、デザイナーがグラデーションの作成に使用したものによって大きく異なります。グラデーションの色や点など、開発者に役立つ情報を提供するInvisionなどのツールがいくつかあります。ただし、Photoshopで作成したばかりの場合は、プログラムで再現するのが難しくなります。グラデーションのイメージを求めてください。

もう1つの解決策は、Xcodeで@IBDesignableグラディエントビューを使用することです。私を含む多くの開発者がこれを作成しています。これは主にこの問題を過去に多く処理しなければならなかった結果です。このアプローチの大きなメリットは、色を微調整することが非常に簡単で、必要に応じてアニメーションを作成することです。

私はオープンソースの例であるavailable on GitHubを加えて、extended explanation of how it worksと書いています。

私は自分のプロジェクトを使用してあなたのようなグラデーションを作るために迅速な試みがあったが、これはXcodeでどのように見えるかです： -

重要な部分は、属性インスペクタパネルの上部で、グラデーションの開始と終了の色とグラデーションの角度を簡単に設定することができます。

あなたが必要なコードの主要部分は、以下の貼り付けられます。上記のリンクをたどって、それがどのように機能するかを説明します。

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() 
    } 
}