Затухание элементов в UICollectionView

У меня есть UICollectionView, и я реализую липкие заголовки по этой ссылке: http://blog.radi.ws/post/32905838158/sticky-headers-for-uicollectionview-using#notes

Это работает фантастически, однако мое окно имеет фоновое изображение, и мои заголовки имеют прозрачный фон. В результате, когда мои элементы прокручиваются над заголовком, вы все равно можете их видеть.

В идеале я бы угаснул ячейки с градиентом, до такой степени, что он невидим к тому времени, когда он появится за заголовком.

Спасибо.

Ответ 1

Вы не отправили ни одного кода, так что вот идите на него, не глядя на код. Просто настройте слой маски поверх своего UICollectionView супервизора, и вам хорошо идти:

CAGradientLayer *gradient = [CAGradientLayer layer];

gradient.frame = self.collectionView.superview.bounds;
gradient.colors = @[(id)[UIColor clearColor].CGColor, (id)[UIColor blackColor].CGColor];
// Here, percentage would be the percentage of the collection view
// you wish to blur from the top. This depends on the relative sizes
// of your collection view and the header.
gradient.locations = @[@0.0, @(percentage)];

self.collectionView.superview.layer.mask = gradient;

Чтобы это решение работало правильно, вам нужно было бы встроить свой просмотр коллекции в супер-представление.

Для получения дополнительной информации о маске слоя, посмотрите документацию.

Ответ 2

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

введите описание изображения здесь

// This is in the UICollectionView subclass
private func addGradientMask() {
         let coverView = GradientView(frame: self.bounds)
         let coverLayer = coverView.layer as! CAGradientLayer
         coverLayer.colors = [UIColor.whiteColor().colorWithAlphaComponent(0).CGColor, UIColor.whiteColor().CGColor, UIColor.whiteColor().colorWithAlphaComponent(0).CGColor]
         coverLayer.locations = [0.0, 0.5, 1.0]
         coverLayer.startPoint = CGPoint(x: 0.0, y: 0.5)
         coverLayer.endPoint = CGPoint(x: 1.0, y: 0.5)
         self.maskView = coverView
    }

// Declare this anywhere outside the sublcass
class GradientView: UIView {
    override class func layerClass() -> AnyClass {
        return CAGradientLayer.self
    }
}

Кроме того, вы можете сделать его липким (т.е. он всегда будет исчезать из ячеек на краю, а не прокручивается вместе с коллекцией), добавив его в подкласс коллекции.

func scrollViewDidScroll(scrollView: UIScrollView) {
    self.maskView?.frame = self.bounds
}

Ответ 3

мне кажется, что код, который вы следуете/используете, сделал для вас тяжелую работу. Насколько я могу видеть (не в состоянии проверить прямо сейчас), просто передайте альфа-атрибут:

        layoutAttributes.zIndex = 1024;
        layoutAttributes.frame = (CGRect){
            .origin = origin,
            .size = layoutAttributes.frame.size

как таковой

        layoutAttributes.zIndex = 1024;
        layoutAttributes.alpha = 0.1; //add this
        layoutAttributes.frame = (CGRect){
            .origin = origin,
            .size = layoutAttributes.frame.size

Ответ 4

Вы должны использовать UIScrollViewDelegate для CollectionView и использовать метод scrollviewdidscroll для создания fade или подкласса UICollectionViewFlowLayout.

Ответ 5

вместо того, чтобы иметь прозрачный фон в вашем заголовке, я бы создал прозрачный png-градиент и использовал его вместо этого. Было бы намного эффективнее и проще обрабатывать градиент с изображением, чем делать с кодом.

Ответ 6

Вот как я достиг этого эффекта. Я создал в фотошопе градиентное изображение, исчезающее до цвета фона, которое в моем случае черное. Вот как это выглядит: enter image description here

Я разместил ImageView на моем ViewController. Я растянул его до нужного размера и местоположения, где я хотел, и использовал ограничения AutoLayout, чтобы заблокировать его. (Мне приходилось использовать клавиши со стрелками на клавиатуре, чтобы перемещать их порой, потому что щелчок и перетаскивание местоположения изображения, как правило, бросали его внутри CollectionView)

Нажмите "ImageView", перейдите в "Редактор → " Упорядочить "- > " Отправить на передний план ", чтобы убедиться, что он находится поверх CollectionView.

Режим изображения - Масштабирование для заполнения, и я не выбрал User Interaction Enabled.

Это потребует некоторой настройки, чтобы все было идеально, но оно работает очень хорошо и выглядит хорошо.

Я не совсем уверен, как вы подразумеваете под своим фоновым изображением и еще что-то, но, возможно, сделаете изображение градиента частью фактического фонового изображения, которое у вас есть, поэтому оно вписывается.