1
votes

Comment placer un calque de dégradé sur une UIImageView qui n'a pas de cadre

J'essaie de placer un dégradé transparent gris sur une image dans mon application iOS, mais cela ne fonctionne pas en raison de problèmes avec le cadre. Étant donné que mon UIImageView est configuré par programme et avec translatesAutoresizingMaskIntoConstraints = false , le calque de dégradé n'est pas visible lorsque je place son cadre sur le cadre de l'image. Je ne veux pas définir l'un ou l'autre des cadres sur une constante car l'image est dans une cellule de vue de collection qui utilise la fonction sizeForItemAt pour déterminer la taille de chacune de mes cellules et donc la taille de l'image change avec la taille de la cellule et j'ai besoin que mon dégradé ait la même taille que l'image.

J'ai essayé de configurer le dégradé en créant un UIView que je place comme sous-vue du UIImageView mais n'a pas eu de chance avec cela en raison de problèmes avec le cadre à nouveau. J'ai vu d'autres articles sur l'ajout de couches de dégradé, mais ils m'obligent tous à définir un cadre pour le dégradé.

//This is the imageview and the gradient that I want to apply to it
let profileImageView: UIImageView = {
        let imageView = UIImageView()
        imageView.contentMode = .scaleAspectFill
        imageView.translatesAutoresizingMaskIntoConstraints = false
        return imageView
    } ()
var gradient: CAGradientLayer = {
        let gradientLayer = CAGradientLayer()
        gradientLayer.colors = [UIColor.clear.cgColor,    UIColor.gray.cgColor]
        gradientLayer.opacity = 0.7
        return gradientLayer
    }()

//This is the setupviews() function where I apply the gradient to the imageview
func setupViews() {
        self.contentView.addSubview(profileImageView)
        profileImageView.layer.addSublayer(gradient)

        //constraints for profileImageView
        addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "H:|-0-[v0]-0-|", options: NSLayoutConstraint.FormatOptions(), metrics: nil, views: ["v0": profileImageView]))

        addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "V:|-0-[v0]-0-|", options: NSLayoutConstraint.FormatOptions(), metrics: nil, views: ["v0": profileImageView]))
}

Actuellement, pour que le dégradé apparaisse, j'aurais besoin pour définir un cadre pour la couche de dégradé dans setupViews () , mais comme je l'ai déjà décrit, je préférerais ne pas le faire. Existe-t-il un moyen de créer un calque de dégradé sans définir de cadre spécifique, ou existe-t-il une autre meilleure façon d'appliquer le calque de dégradé dans mon cas? Merci!

EDIT: Je voudrais préciser que toutes les vues de ma classe UICollectionViewCell n'ont pas de cadres. Ils sont tous configurés avec des contraintes par programme, donc si j'essayais d'imprimer view.frame.height ou view.frame.width , le programme imprimerait zéro malgré la hauteur et la largeur réelles de la vue n'étant pas nulle. Par conséquent, la définition de toute sorte de cadre pour un dégradé ou la définition du cadre du dégradé sur le cadre de la vue ne fonctionnera pas. Dois-je restructurer la configuration de mes vues pour pouvoir placer un dégradé sur une image? Ou puis-je encore espérer le salut de ce problème? Merci!


0 commentaires

3 Réponses :


1
votes

Vous pouvez créer une classe personnalisée qui hérite de UIImageView, ajouter la couche lorsque vous la créez et remplacer layoutsubviews ()

override func layoutSubviews() {
   super.layoutSubviews()
   customlayer.frame = self.bounds     
}


0 commentaires

0
votes

Vous allez peut-être essayer d'accéder à UIImageView dans sizeForItem , puis vous redimensionnerez la sous-couche de dégradé dans cette méthode?


0 commentaires

1
votes

Vous pouvez: - Créez un fichier Swift avec le code ci-dessous - Définissez votre imageView sur cette classe - Placez cette imageView ou UIView (dans ce cas, tournez la classe en conséquence) au-dessus de l'UIImageView qui contient votre image. Et cela devrait fonctionner (voir des exemples de captures d'écran). Modifiez les paramètres comme vous le souhaitez avec vos paramètres couleurs / alpha. J'espère que cela vous aidera.

import Foundation
import UIKit

class AddGradientsToImageView: UIImageView {

// For item created programmatically
override init(frame: CGRect) {
    super.init(frame: frame)

    addGradientsToImageView()
}

// For items created in the storyboard
required init?(coder aDecoder: NSCoder) {
    super.init(coder: aDecoder)
    addGradientsToImageView()
}

func addGradientsToImageView() {

// Set background gradient colors
let lightBlue = UIColor(red: 112/255, green: 117/255, blue: 239/255, alpha: 1)
let darkBlue = UIColor(red: 70/255, green: 84/255, blue: 201/255, alpha: 1)

// Set gradients
let gradientLayer = CAGradientLayer()
gradientLayer.frame = bounds
gradientLayer.colors = [darkBlue.cgColor, lightBlue.cgColor]
gradientLayer.locations = [0.0,1.0]
gradientLayer.startPoint = CGPoint(x: 1.0, y: 0.5)
gradientLayer.endPoint = CGPoint(x: 1.0, y: 1.0)

// Clip gradients to background bounds
clipsToBounds = true

// Set transparency level
alpha = 0.50

// insert gradients to button
layer.insertSublayer(gradientLayer, at: 0)
}
}

résultat du code pour ceci imageView résultat du code avec une image derrière


2 commentaires

Je suppose que cela m'obligerait à définir un cadre pour le dégradé?


Oui, vous devrez peut-être conserver un cadre, mais vous n'aurez peut-être pas besoin de spécifier une taille pour le calque de dégradé; avez-vous essayé de clipser votre dégradé? Eh bien, c'est ce que j'obtiens avec ce qui précède quel que soit le szie de l'image.