2017-06-19 17 views
1

ラベルやボタンのグラデーションを設定する際に問題が発生しました。私はこの質問がたくさん尋ねられていることは知っていますが、私の問題を解決する答えはありませんでした。スイフト - グラデーションを使って作業する

この

enter image description hereは私のコードです:

@IBOutlet weak var loginButton: UIButton! 
    @IBOutlet weak var signUpButton: UIButton! 
    @IBOutlet weak var logoLabel: UILabel! 


    override func viewDidLoad() { 
     super.viewDidLoad() 

     loginButton.backgroundColor = UIColor.clear 
     let loginButtonGradient = createBlueGreenGradient(from: loginButton.bounds) 
     self.view.layer.insertSublayer(loginButtonGradient, at: 0) 

     signUpButton.backgroundColor = UIColor.clear 
     let signUpButtonGradient = createBlueGreenGradient(from: signUpButton.bounds) 
     self.view.layer.insertSublayer(signUpButtonGradient, at: 0) 

     logoLabel.backgroundColor = UIColor.clear 
     let logoLabelGradient = createBlueGreenGradient(from: logoLabel.bounds) 
     self.view.layer.insertSublayer(logoLabelGradient, at: 0) 

     loginButton.layer.cornerRadius = 100 
     signUpButton.layer.cornerRadius = 100 
    } 

    override func didReceiveMemoryWarning() { 
     super.didReceiveMemoryWarning() 
    } 

    func createBlueGreenGradient(from bounds: CGRect) -> CAGradientLayer{ 
     let topColor = UIColor(red: 84/255, green: 183/255, blue: 211/255, alpha: 1) 
     let bottomColor = UIColor(red: 119/255, green: 202/255, blue: 151/255, alpha: 1) 
     let gradientColors: [UIColor] = [topColor, bottomColor] 

     let gradientLocations: [NSNumber] = [0.0, 1.0] 

     let gradientLayer = CAGradientLayer() 
     gradientLayer.colors = gradientColors 
     gradientLayer.locations = gradientLocations 
     gradientLayer.frame = bounds 

     return gradientLayer 
    } 

そして、これは間違った結果である:

enter image description here

誰かしてください、私はそれを見てみたいとここにスクリーンがあります助けて。私は何が間違っているのか分かりません。

+0

[iOS Swift Appのバックグラウンドビューにグラディエントを適用する方法(https:// stackoverflow。com/questions/24380535/how-to-apply-gradient-to-background-view-of-ios-swift-app) –

答えて

1

あなたのコードの問題がたくさんあります。

  • 分割代わりIntFloat数の色は、255.0ない255なければならないことを意味します。
  • のプロパティの場合、CGColorの配列をUIColorの配列に設定する必要があります。
  • また、startPointendPointのプロパティをCAGradientLayerと設定すると、水平グラデーションカラーになります。
  • 現在、GradientLayerを特定のボタンの代わりにself.viewに追加しています。
  • あなたもtrueに層のmasksToBoundsプロパティを設定する必要もcornerRadiusを設定した後、いくつかの定数100との高さではないに基づいて、ボタンのcornerRadiusを設定します。
  • は、今すぐあなたのロゴをラベルに、あなたは何をする必要があるか直接textColorGradientとして色を設定することはできませんUIImage上に所望のグラデーションを描き、その後、あなたのLabelチェックそのため、このSO referenceのためのカラーパターンを設定するUIImageことを使用しています。このすべてを行った後

は、あなたのコードは次のように変更する必要があります。

func createBlueGreenGradient(from bounds: CGRect) -> CAGradientLayer{ 
    let topColor = UIColor(red: 84/255.0, green: 183/255.0, blue: 211/255.0, alpha: 1).cgColor 
    let bottomColor = UIColor(red: 119/255.0, green: 202/255.0, blue: 151/255.0, alpha: 1).cgColor 
    let gradientColors = [topColor, bottomColor] 

    let gradientLocations: [NSNumber] = [0.0, 1.0] 
    let gradientLayer = CAGradientLayer() 
    gradientLayer.colors = gradientColors 
    gradientLayer.locations = gradientLocations 
    //Set startPoint and endPoint property also 
    gradientLayer.startPoint = CGPoint(x: 0, y: 0) 
    gradientLayer.endPoint = CGPoint(x: 1, y: 0) 
    gradientLayer.frame = bounds 
    return gradientLayer 
} 

は今viewDidLoad、このようにgradientLayerを設定します。

1

ああ私の善は同じ問題を抱えていましたが、それを使って遊んでいました。これはあなたが.cgcolorを追加しなかったために発生します。例:

let topColor = UIColor(red: 84/255, green: 183/255, blue: 211/255, alpha: 1).cgColor 
let bottomColor = UIColor(red: 119/255, green: 202/255, blue: 151/255, alpha: 1).cgColor 
let gradientColors = [topColor, bottomColor] 

動作するかどうかを教えてください。

+0

これはうまくいきました –

1

このようにあなたの方法:

func createBlueGreenGradient(from bounds: CGRect) -> CAGradientLayer{ 
    let topColor = UIColor(red: 84/255, green: 183/255, blue: 211/255, alpha: 1).cgColor 
    let bottomColor = UIColor(red: 119/255, green: 202/255, blue: 151/255, alpha: 1).cgColor 
    let gradientColors = [topColor, bottomColor] 

    let gradientLocations: [NSNumber] = [0.0, 1.0] 

    let gradientLayer = CAGradientLayer() 
    gradientLayer.colors = gradientColors 
    gradientLayer.locations = gradientLocations 
    gradientLayer.frame = bounds 

    return gradientLayer 
    }