Gradient / ombres dans UIImageView comme Flipboard

Je suis à la recherche pour créer une ombre-comme-gradient dans mon UIImageView comme la façon dont il est dans Flipboard.

Un exemple de cela est une photo de cette image

Gradient /ombres dans UIImageView comme Flipboard

Comme vous pouvez le voir sur la droite de l'iPhone, il est plus foncé dégradé en haut et en bas. C'est ainsi que si l'image est blanc, le blanc du texte peut encore être vu.

Quelqu'un a des suggestions sur comment je peux le mettre en œuvre? Je suis nouveau sur le développement d'iOS donc aucune idée à ce sujet. Merci!

source d'informationauteur

  1. 20

    Vous pouvez utiliser CAGradientLayer:

    1. Ajouter QuartzCore.cadre de votre projet. (Voir La liaison à la Bibliothèque ou Cadre).

    2. Importer les QuartzCore en-tête:

      #import <QuartzCore/QuartzCore.h>

    3. Ajouter un CAGradientLayer à la vue en question. Par exemple, pour un simple dégradé du gris au blanc:

      - (void)addGradientToView:(UIView *)view
{
    CAGradientLayer *gradient = [CAGradientLayer layer];
    gradient.frame = view.bounds;
    gradient.colors = @[(id)[[UIColor lightGrayColor] CGColor],
                        (id)[[UIColor whiteColor] CGColor]];
    [view.layer insertSublayer:gradient atIndex:0];
}

      Ou d'une nuance de gris, de l'autre, et de retour:

      - (void)addGradientToView:(UIView *)view
{
    CAGradientLayer *gradient = [CAGradientLayer layer];
    gradient.frame = view.bounds;
    gradient.colors = @[(id)[[UIColor colorWithRed:0.8 green:0.8 blue:0.8 alpha:1.0] CGColor],
                        (id)[[UIColor colorWithRed:0.9 green:0.9 blue:0.9 alpha:1.0] CGColor],
                        (id)[[UIColor colorWithRed:0.8 green:0.8 blue:0.8 alpha:1.0] CGColor]];
    [view.layer insertSublayer:gradient atIndex:0];
}

    Il suffit de changer les couleurs de votre tableau de colors de modifier le dégradé pour atteindre l'effet désiré. Vous voudrez peut-être mettre l'affichage de l'image dans un conteneur de vue et d'appliquer le dégradé sur le conteneur de vue, et non pas l'affichage de l'image. En outre, sans doute évident, mais cela suppose que les images que vous utilisez dans votre UIImageView employer des arrière-plans transparents. S'ils ne le font pas, vous devrez les modifier, soit (a) construire le gradient de droit à l'image; ou (b) remplacer l'arrière-plan de l'image, la transparence de sorte que la CAGradientLayer effet peut être vu.

  2. 6

    aujourd'hui ce travail la bonne application du droit dans UIImageView couche

    //Set image over layer
CAGradientLayer *gradient = [CAGradientLayer layer];
gradient.frame = imageView.frame;

//Add colors to layer
UIColor *centerColor = [UIColor colorWithRed:0 green:0 blue:0 alpha:0.25];
UIColor *endColor = [UIColor grayColor];
gradient.colors = [NSArray arrayWithObjects:
                               (id)[endColor CGColor],
                               (id)[centerColor CGColor],
                               (id)[endColor CGColor],
                               nil];

[imageView.layer insertSublayer:gradient atIndex:0];

    le prendre à partir de ici

  3. 1

    SWIFT 3 

        let gradient = CAGradientLayer()
    gradient.frame = imageView.bounds

    let startColor = UIColor(colorLiteralRed: 0, green: 0, blue: 0, alpha: 0.25)
    let endColor = UIColor.gray

    gradient.colors = [startColor.cgColor, endColor.cgColor]
    imageView.layer.insertSublayer(gradient, at: 0)
  4. 0

    Que j'ai fait cette effet dans mes applications avant simplement en superposant une image transparente contenant les zones sombres de la photo. La mise en œuvre du sage, qui signifie généralement l'insertion d'un autre UIImageView au-dessus de votre photo dans la vue d'afficher la hiérarchie.

  5. 0

    Traduit à Swift:

    var gradient = CAGradientLayer()
gradient.frame = imageView.bounds                    
let startColor = UIColor(colorLiteralRed: 0, green: 0, blue: 0, alpha: 0.25)
let endColor = UIColor.grayColor()
gradient.colors = [startColor, endColor]
imageView.layer.insertSublayer(gradient, atIndex: 0)