Градиент/тени в UIImageView как Flipboard

Question

Я ищу, чтобы создать теневой градиент в моем UIImageView, как и в Flipboard.

Примером этого является картина в этом изображении

Как вы можете видеть на правом iPhone, есть более темный градиент в верхней и нижней части. Это так, что если изображение белого цвета, белый текст все еще можно увидеть.

У кого-нибудь есть предложения о том, как я могу это реализовать? Я новичок в развитии iOS, поэтому не знаю об этом. Благодаря!

Answer 1

Вы можете использовать CAGradientLayer:

1. Добавить QuartzCore.framework в проект. (См. Linking to Library or Framework).

2. Импорт заголовка QuartzCore:

   #import <QuartzCore/QuartzCore.h> 
   

3. Добавить CAGradientLayer в представление о котором идет речь. Например, для простого градиента от серого до белого:

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

   Или из одного оттенка серого цвета, с другой, и обратно:

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

Просто изменить цвета в вашем массиве colors, чтобы изменить градиент для достижения желаемого эффекта. Вы можете поместить изображение в представление контейнера и применить градиент к виду контейнера, а не к представлению изображения. Более того, предположительно очевидно, но это предполагает, что изображения, которые вы используете в своем UIImageView, используют прозрачные фоны. Если они этого не сделают, вам придется изменить их либо (a) построить градиент прямо в изображении; или (b) заменить фон изображения прозрачностью, чтобы можно было увидеть эффект выше CAGradientLayer.

Answer 2

Я сделал этот эффект в своих приложениях, просто наложив прозрачное изображение, содержащее затемненные области над фотографией. Реализация разумна, что обычно означает вставку другого UIImageView над изображением вашей фотографии в иерархию представлений.

Answer 3

в настоящее время эта работа должным образом применять прямо в UIImageView слой

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

взять его here

Answer 4

Переведенный Свифта:

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

СВИФТ 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)