ios 渐变视图不能覆盖集合视图的整个宽度

am46iovg  于 2023-04-08  发布在  iOS
关注(0)|答案(2)|浏览(136)

我尝试将渐变应用于一个视图,该视图是集合视图的顶部、左侧和右侧的约束,但由于某种原因,渐变没有覆盖应用到的视图的整个宽度(见图中的红色)。

查看控制器编码:-

extension HomeView : UICollectionViewDelegate, UICollectionViewDataSource, UICollectionViewDelegateFlowLayout {
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
    1
}

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "CollectionCell", for: indexPath) as! CollectionCell
    cell.storyImage.image = UIImage(named: storyImages[indexPath.item].mediaURL ?? EMPTY_STR)
    cell.gradientView.frame = cell.storyImage.frame
    return cell
 }

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
    return CGSize(width: collectionView.frame.width, height: collectionView.frame.height)
  }
}

小区编码:-

import UIKit

class CollectionCell: UICollectionViewCell {

@IBOutlet weak var sImage: UIImageView!
@IBOutlet weak var gradientView: GradientView!

override func layoutSubviews() {
    super.layoutSubviews()
  }
}

class GradientView: UIView {

override func awakeFromNib() {
    super.awakeFromNib()
    let gradientLayer = CAGradientLayer()
    gradientLayer.frame = CGRect(x: 0, y: 0, width: frame.width, height: frame.height)
    gradientLayer.colors = [UIColor.white.cgColor,UIColor.red.withAlphaComponent(0.5).cgColor]
    gradientLayer.startPoint = CGPoint(x: 0.0, y: 1.0)
    gradientLayer.endPoint = CGPoint(x: 1.0, y: 1.0)
    layer.addSublayer(gradientLayer)
   }
}

输出:-

主情节提要

问:如何根据集合视图宽度设置宽度?
有人能给我解释一下如何做到这一点,我已经尝试了上述代码,但还没有结果。请纠正我,如果我做错了。
任何帮助将不胜感激。

qv7cva1a

qv7cva1a1#

这是因为单元格的contentview框架没有更新。正如评论所说,contentView的框架与xib/awakeFromNib中的故事板框架相同。在cellForRowAt中使用cell.contentView.layoutIfNeeded()

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "CollectionCell", for: indexPath) as! CollectionCell
    cell.contenView.layoutIfNeeded()
    cell.storyImage.image = UIImage(named: storyImages[indexPath.item].mediaURL ?? EMPTY_STR)
    cell.gradientView.frame = cell.storyImage.frame
    return cell

}
在你的单元格类中,在layoutsubview函数中设置层的框架

override func layoutSubviews() {
        super.layoutSubviews()
        gradientLayer.frame = self.bounds
}
rseugnpd

rseugnpd2#

cellForItemAt代码中的这一行有点令人困惑:

cell.gradientView.frame = cell.storyImage.frame

在Storyboard Prototype单元格中,您应该将gradientView约束到storyImage视图,它们的大小将相同。
另外,如果你将GradientView类改为这样,你就不必担心单独调用来布局渐变层的框架:

class GradientView: UIView {
    
    lazy var gradientLayer: CAGradientLayer = self.layer as! CAGradientLayer
    override class var layerClass: AnyClass {
        return CAGradientLayer.self
    }
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        commonInit()
    }
    required init?(coder: NSCoder) {
        super.init(coder: coder)
        commonInit()
    }
    private func commonInit() {
        gradientLayer.colors = [UIColor.white.cgColor,UIColor.red.withAlphaComponent(0.5).cgColor]
        gradientLayer.startPoint = CGPoint(x: 0.0, y: 1.0)
        gradientLayer.endPoint = CGPoint(x: 1.0, y: 1.0)
    }
    
}

相关问题