Градиент BG в UICollectionViewCell
Я создал UICollectionView с ячейкой, как кредитные карты, и хочу добавить градиентный слой в качестве фона для этих карт. Сначала я добавил фоновый вид для тени (shadowView), а затем добавил второй вид для градиентного слоя (bgView) и добавил CAGradientLayer в качестве подслоя bgView. Но я не получил никакого представления градиент. Это мой код:
class CardCell: BaseCell {
private var shadowView: UIView = {
let view = UIView()
view.translatesAutoresizingMaskIntoConstraints = false
view.backgroundColor = UIColor.white
view.layer.shadowColor = UIColor.shadowColor.cgColor
view.layer.shadowOffset = CGSize(width: 0, height: 1.0)
view.layer.shadowOpacity = 0.1
view.layer.shadowRadius = 15.0
return view
}()
private var bgView: UIView = {
let view = UIView()
view.translatesAutoresizingMaskIntoConstraints = false
view.layer.cornerRadius = 5
view.layer.masksToBounds = true
view.backgroundColor = .clear
view.layer.addSublayer(createGradientLayer(for: view))
return view
}()
override func setup() {
super.setup()
addSubview(shadowView)
addSubview(bgView)
// setup constraints
shadowView.widthAnchor.constraint(equalTo: widthAnchor, multiplier: 0.9).isActive = true
shadowView.heightAnchor.constraint(equalTo: heightAnchor, multiplier: 1).isActive = true
shadowView.centerXAnchor.constraint(equalTo: centerXAnchor).isActive = true
shadowView.centerYAnchor.constraint(equalTo: centerYAnchor).isActive = true
bgView.topAnchor.constraint(equalTo: shadowView.topAnchor).isActive = true
bgView.bottomAnchor.constraint(equalTo: shadowView.bottomAnchor).isActive = true
bgView.leadingAnchor.constraint(equalTo: shadowView.leadingAnchor).isActive = true
bgView.trailingAnchor.constraint(equalTo: shadowView.trailingAnchor).isActive = true
}
private static func createGradientLayer(for view: UIView) -> CAGradientLayer {
let color = UIColor(red:0.95, green:0.42, blue:0.64, alpha:1.0)
let gradientLayer = CAGradientLayer()
gradientLayer.frame = view.bounds
gradientLayer.colors = [color.cgColor, color.withAlphaComponent(0.7).cgColor]
gradientLayer.startPoint = CGPoint(x: 0.0, y: 0.0)
gradientLayer.endPoint = CGPoint(x: 1.1, y: 1.1)
return gradientLayer
}
}
Но если я изменю этот код и удалю настройку градиента из bgView init и напишу его после ограничений, все в порядке, НО теневой вид исчезнет:
. . .
bgView.leadingAnchor.constraint(equalTo: shadowView.leadingAnchor).isActive = true
bgView.trailingAnchor.constraint(equalTo: shadowView.trailingAnchor).isActive = true
bgView.layoutIfNeeded()
bgView.layer.addSublayer(CardCell.createGradientLayer(for: bgView))
Попробуйте Добавить представления в представление содержимого ячейки contentView.addSubview(shadowView)contentView.addSubview(bgView)
@LalKrishna ничего не изменилось :(
можешь добавить скриншот того, чего пытаешься достичь?
@LalKrishna добавил скриншот. Я хочу добавить тень к этим карточкам на изображении.
Пожалуйста, проверьте мой обновленный отвечать. @JackDaniel
Ответы 3
Я думаю, что ваш слой градиента, добавленный к вашему теневому представлению, показывает, что ваше теневое представление исчезает .. Вы всегда должны добавлять слой градиента с индексом 0 слоев.
bgView.layer.insertSublayer(CardCell.createGradientLayer(for: bgView), at: 0)
и в методе создания вашего слоя вам нужно использовать рамку вместо границ.
private static func createGradientLayer(for view: UIView) -> CAGradientLayer {
let color = UIColor(red:0.95, green:0.42, blue:0.64, alpha:1.0)
let gradientLayer = CAGradientLayer()
gradientLayer.frame = view.frame
gradientLayer.colors = [color.cgColor, color.withAlphaComponent(0.7).cgColor]
gradientLayer.locations = nil
return gradientLayer
}
проблема остается прежней. Не помогло :(
Пожалуйста, проверьте обновленный ответ ... используйте рамку вместо границ.
попробуйте установить местоположения равными нулю в качестве обновленного ответа и удалить начальную и конечную точки. и используйте два разных цвета.
ничего не изменил
Проблема в том, что когда вы добавляете градиентный вид, bgView не является макетом полностью. Таким образом, граница будет равна нулю.
Решение:
private var gradient: CAGradientLayer?
override func awakeFromNib() {
super.awakeFromNib()
self.setup()
}
override func layoutSubviews() {
super.layoutSubviews()
shadowView.layer.shadowPath = UIBezierPath(rect: shadowView.bounds).cgPath
if let gradient = gradient {
gradient.frame = bgView.bounds
} else {
gradient = TestCell.createGradientLayer(for: bgView)
bgView.layer.addSublayer(gradient!)
}
}
ВЫХОД:
extension UIView {
func addGradientToViewWithCornerRadiusAndShadow(radius:CGFloat,firstColor:UIColor,secondColor:UIColor,locations:[CGFloat]){
for layer in (self.layer.sublayers ?? []){
if let layer1 = layer as? CAGradientLayer{
layer1.removeFromSuperlayer()
}
}
let gradient = CAGradientLayer()
var rect = self.bounds
rect.size.width = ScreenWidth
gradient.frame = rect
gradient.colors = [firstColor.cgColor, secondColor.cgColor]
gradient.locations = locations as [NSNumber]
gradient.startPoint = CGPoint.init(x: 0, y: 0)
gradient.endPoint = CGPoint.init(x: 0, y: 1)
gradient.cornerRadius = radius
gradient.shadowRadius = 2
gradient.shadowColor = UIColor.lightGray.cgColor
gradient.shadowOffset = CGSize.init(width: 0.5, height: 0.5)
gradient.shadowOpacity = 0.5
self.layer.insertSublayer(gradient, at: 0)
}
}
попробуйте использовать это расширение UIView. Сообщите мне, поможет ли это.
это похоже на то, что вы пытаетесь достичь?