Затухание элементов в 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.
Это потребует некоторой настройки, чтобы все было идеально, но оно работает очень хорошо и выглядит хорошо.
Я не совсем уверен, как вы подразумеваете под своим фоновым изображением и еще что-то, но, возможно, сделаете изображение градиента частью фактического фонового изображения, которое у вас есть, поэтому оно вписывается.