web-dev-qa-db-fra.com

Est-il possible de créer une couleur d'arrière-plan en dégradé dans le générateur d'interface?

Pour mon application, j'utilise un TableView et j'utilise des UITableViewCells personnalisés.

J'ai personnalisé mes cellules via le constructeur d'interface, pas par programme. Existe-t-il un moyen de transformer également la couleur d'arrière-plan de ma cellule personnalisée en dégradé dans le générateur d'interface?

Merci.

iosuitableviewinterface-builder
35
Serdar Dogruyol

Cela fonctionne pour Swift 3.0: (mis à jour pour Swift 4.0)

@IBDesignable
final class GradientView: UIView {
    @IBInspectable var startColor: UIColor = UIColor.clear
    @IBInspectable var endColor: UIColor = UIColor.clear

    override func draw(_ rect: CGRect) {
        let gradient: CAGradientLayer = CAGradientLayer()
        gradient.frame = CGRect(x: CGFloat(0),
                                y: CGFloat(0),
                                width: superview!.frame.size.width,
                                height: superview!.frame.size.height)
        gradient.colors = [startColor.cgColor, endColor.cgColor]
        gradient.zPosition = -1
        layer.addSublayer(gradient)
    }
}

 enter image description here

 enter image description here

49
etayluz
CAGradientLayer *gradient = [CAGradientLayer layer];
gradient.frame = yourView.bounds;
gradient.colors = [NSArray arrayWithObjects:(id)[[UIColor blackColor] CGColor], (id)    [[UIColor whiteColor] CGColor], nil];
[yourView.layer insertSublayer:gradient atIndex:0];
13
Ali Raza

Oui, cela est possible: créez une image en dégradé avec 1 X Height pix . Réglez-le sur backgroundColor pour cellule.

cell.backgroundColor =  [UIColor colorWithPatternImage:[UIImage imageNamed:@"gradImage.png"]];

** Vous pouvez définir une couleur de dégradé avec du code mais son processus prend du temps. Si vous remplissez mieux alors cherchez cela.

7
Sudesh Kumar

answer by etayluz fonctionne bien mais j'ai ajouté quelques modifications:

  1. Taille du dégradé définie par les limites de la couche, et non par la vue supérieure.

  2. Supprimez le calque Dégradé à chaque dessin, afin d'éviter de continuer à dessiner et d'ajouter un nouveau calque lorsque le redessinage est nécessaire (par exemple en appelant .setNeedsDisplay() en rotation).

    @IBDesignable final class MFGradientView: UIView {

    @IBInspectable var startColor: UIColor = UIColor.clear
    @IBInspectable var endColor: UIColor = UIColor.clear

    override func draw(_ rect: CGRect) {
       layer.sublayers?.first?.removeFromSuperlayer()

       let gradient: CAGradientLayer = CAGradientLayer()
       gradient.frame = CGRect(Origin: CGPoint.zero, size: self.bounds.size)
       gradient.colors = [startColor.cgColor, endColor.cgColor]
       layer.insertSublayer(gradient, at: 0)
    }
}
4
alfhern

Sur la base de la réponse etayluz, j'ai légèrement modifié le code en prenant en compte la propriété layerClass d'un UIView. Vous n'avez donc pas besoin d'un calque séparé en tant que sous-couche.

Je pense que c'est beaucoup plus propre et que cela fonctionne aussi avec les mises à jour en direct dans Interface Builder.

@IBDesignable final class GradientView: UIView {

    @IBInspectable var startColor: UIColor = UIColor.red
    @IBInspectable var endColor: UIColor = UIColor.blue

    override class var layerClass: AnyClass {
        get {
            return CAGradientLayer.self
        }
    }

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

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        setupGradient()
    }

    private func setupGradient() {
        let gradient = self.layer as! CAGradientLayer
        gradient.colors = [startColor.cgColor, endColor.cgColor]
    }

}
1
JulianM

Je ne sais pas s'il existe une option de dégradé, mais vous pouvez ajouter UIImageView à la cellule personnalisée et ajouter une image avec un dégradé.

0
TigerCoding

Créez une classe de vue simple avec les propriétés @IBInspectable.

  1. Créer une couche de dégradé une fois
  2. Réutiliser le calque dégradé de chaque mise en page des sous-vues

...

//
//  GradientView.Swift
//
//  Created by Maksim Vialykh on 23.08.2018.
//  Copyright © 2018 Vialyx. All rights reserved.
//

import UIKit

class GradientView: UIView {

    @IBInspectable
    var startColor: UIColor = .white

    @IBInspectable
    var endColor: UIColor = .black

    private let gradientLayerName = "Gradient"

    override func layoutSubviews() {
        super.layoutSubviews()

        setupGradient()
    }

    private func setupGradient() {
        var gradient: CAGradientLayer? = layer.sublayers?.first { $0.name == gradientLayerName } as? CAGradientLayer
        if gradient == nil {
            gradient = CAGradientLayer()
            gradient?.name = gradientLayerName
            layer.addSublayer(gradient!)
        }
        gradient?.frame = bounds
        gradient?.colors = [startColor.cgColor, endColor.cgColor]
        gradient?.zPosition = -1
    }

}
0
LLIAJLbHOu