Градиент/тени в UIImageView, например Flipboard

Я хочу создать теневой градиент в моем UIImageView, например, как это делается в Flipboard.

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

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

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

Ответы

Ответ 1

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

Добавьте к вашему проекту QuartzCore.framework. (См. Связь с библиотекой или Framework).
Импортировать заголовок QuartzCore:
```
#import <QuartzCore/QuartzCore.h>
```

Добавьте 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.

Ответ 2

в настоящее время эта работа правильно применяется прямо в слое 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];

возьмите его из здесь

Ответ 3

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

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

Ответ 5

Переведено на 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)