Gradient/cienie w UIImageView like Flipboard

Question

Szukam utworzyć gradient podobny do cienia w moim UIImageView, podobnie jak w Flipboard.

Przykładem jest to obraz w obrazie tym

Jak widać na prawym iPhone, jest ciemniejsze gradientu na górze i na dole. Jest tak, że jeśli obraz jest biały, nadal widać biały tekst.

Ktoś ma jakieś sugestie, w jaki sposób mogę to zaimplementować? Jestem nowy w rozwoju iOS, więc nieświadomy tego. Dzięki!

Answer 1

Można użyć CAGradientLayer:

1. Dodaj QuartzCore.framework do projektu. (Patrz Linking to Library or Framework).

2. importu nagłówek QuartzCore:

   #import <QuartzCore/QuartzCore.h> 
   

3. Dodaj CAGradientLayer do widoku w pytaniu. Na przykład, za pomocą prostego gradientu od szarości do bieli:

   - (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]; 
   } 
   

   Albo z jednym odcieniu szarości, do drugiego i odwrotnie:

   - (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]; 
   } 
   

wystarczy zmienić kolory w tablicy colors zmienić gradient, aby osiągnąć pożądany efekt. Możesz umieścić widok obrazu w widoku kontenera i zastosować gradient do widoku kontenera, a nie do widoku obrazu. Co więcej, prawdopodobnie jest to oczywiste, ale zakłada się, że obrazy, które używasz w swoim UIImageView, wykorzystują przezroczyste tło. Jeśli nie, musisz je zmienić (a) zbuduj gradient bezpośrednio na obrazie; lub (b) zastąpić tło obrazu przezroczystością, aby można było zobaczyć powyższy efekt.

Answer 2

Zrobiłem ten efekt w moich aplikacjach przed nałożeniem przezroczystego obrazu zawierającego przyciemnione obszary na zdjęciu. Wdrożenie jest mądre, co zwykle oznacza wstawienie kolejnego widoku z widoku zdjęcia w hierarchii widoku.

Answer 3

w dzisiejszych czasach to praca właściwie stosując prawo w UIImageView warstwy

// 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]; 

zabrać go z here

Answer 4

tłumaczona na 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) 

Answer 5

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)