UICollectionViewCell에 둥근 모서리 및 그림자 제거 추가

UICollectionViewCell에 둥근 모서리 및 그림자 제거 추가

그래서 섀도우 추가를 위해 이미 2차 뷰 추가에 대한 여러 게시물을 살펴보았지만, 추가하려면 아직도 작동이 되지 않습니다.UICollectionViewCell하위 분류했습니다.UICollectionViewCell셀의 컨텐츠 보기에 다양한 UI 요소를 추가하고 레이어에 섀도를 추가하는 코드는 다음과 같습니다.

[self.contentView setBackgroundColor:[UIColor whiteColor]];

self.layer.masksToBounds = NO;
self.layer.shadowOffset = CGSizeMake(0, 1);
self.layer.shadowRadius = 1.0;
self.layer.shadowColor = [UIColor blackColor].CGColor;
self.layer.shadowOpacity = 0.5;
[self.layer setShadowPath:[[UIBezierPath bezierPathWithRect:self.bounds] CGPath]];

에 둥근 모서리와 그림자를 추가하는 방법을 알고 .UICollectionViewCell.

이 두 가지 해결책 모두 저에게는 효과가 없었습니다.모든 하위 뷰를 UICollectionViewCell 컨텐츠 뷰에 배치하는 경우 셀의 레이어에 그림자를 설정하고 컨텐츠 뷰의 레이어에 테두리를 설정하여 두 가지 결과를 모두 얻을 수 있습니다.

cell.contentView.layer.cornerRadius = 2.0f;
cell.contentView.layer.borderWidth = 1.0f;
cell.contentView.layer.borderColor = [UIColor clearColor].CGColor;
cell.contentView.layer.masksToBounds = YES;

cell.layer.shadowColor = [UIColor blackColor].CGColor;
cell.layer.shadowOffset = CGSizeMake(0, 2.0f);
cell.layer.shadowRadius = 2.0f;
cell.layer.shadowOpacity = 0.5f;
cell.layer.masksToBounds = NO;
cell.layer.shadowPath = [UIBezierPath bezierPathWithRoundedRect:cell.bounds cornerRadius:cell.contentView.layer.cornerRadius].CGPath;

스위프트 3.0

self.contentView.layer.cornerRadius = 2.0
self.contentView.layer.borderWidth = 1.0
self.contentView.layer.borderColor = UIColor.clear.cgColor
self.contentView.layer.masksToBounds = true

self.layer.shadowColor = UIColor.black.cgColor
self.layer.shadowOffset = CGSize(width: 0, height: 2.0)
self.layer.shadowRadius = 2.0
self.layer.shadowOpacity = 0.5
self.layer.masksToBounds = false
self.layer.shadowPath = UIBezierPath(roundedRect: self.bounds, cornerRadius: self.contentView.layer.cornerRadius).cgPath

Swift 3 버전:

cell.contentView.layer.cornerRadius = 10
cell.contentView.layer.borderWidth = 1.0

cell.contentView.layer.borderColor = UIColor.clear.cgColor
cell.contentView.layer.masksToBounds = true

cell.layer.shadowColor = UIColor.gray.cgColor
cell.layer.shadowOffset = CGSize(width: 0, height: 2.0)
cell.layer.shadowRadius = 2.0
cell.layer.shadowOpacity = 1.0
cell.layer.masksToBounds = false
cell.layer.shadowPath = UIBezierPath(roundedRect:cell.bounds, cornerRadius:cell.contentView.layer.cornerRadius).cgPath

도움이 되는 경우:모서리를 반올림하기 위한 신속한 방법은 다음과 같습니다.

cell.layer.cornerRadius = 10
cell.layer.masksToBounds = true

: 종종,을 이셀셀을제어는경우변인다: 종종이, 당은을사것입니용할것에서 사용할 입니다.override func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell

맛있게 드세요!

다른 것들과 가깝지만, 모서리 반지름을 레이어에 추가합니다. 그렇지 않으면 모서리가 제대로 채워지지 않으면 모서리가 제대로 채워지지 않습니다.또한, 이것은 멋진 작은 확장을 만듭니다.UICollectionViewCell.

extension UICollectionViewCell {
    func shadowDecorate() {
        let radius: CGFloat = 10
        contentView.layer.cornerRadius = radius
        contentView.layer.borderWidth = 1
        contentView.layer.borderColor = UIColor.clear.cgColor
        contentView.layer.masksToBounds = true
    
        layer.shadowColor = UIColor.black.cgColor
        layer.shadowOffset = CGSize(width: 0, height: 1.0)
        layer.shadowRadius = 2.0
        layer.shadowOpacity = 0.5
        layer.masksToBounds = false
        layer.shadowPath = UIBezierPath(roundedRect: bounds, cornerRadius: radius).cgPath
        layer.cornerRadius = radius
    }
}

불러들일 수 있습니다.collectionView(_:cellForItemAt:)데이터 소스의 데이터를 저장할 수 있습니다.

상단 모서리뿐만 아니라 모든 모서리를 반올림하도록 업데이트된 Swift 4 솔루션:

contentView.layer.cornerRadius = 6.0
contentView.layer.borderWidth = 1.0
contentView.layer.borderColor = UIColor.clear.cgColor
contentView.layer.masksToBounds = true

layer.shadowColor = UIColor.lightGray.cgColor
layer.shadowOffset = CGSize(width: 0, height: 2.0)
layer.shadowRadius = 6.0
layer.shadowOpacity = 1.0
layer.masksToBounds = false
layer.shadowPath = UIBezierPath(roundedRect: bounds, cornerRadius: contentView.layer.cornerRadius).cgPath
layer.backgroundColor = UIColor.clear.cgColor

을 합니다.layer 아에대, 님셀이 contentView.

CALayer * layer = [cell layer];
[layer setShadowOffset:CGSizeMake(0, 2)];
[layer setShadowRadius:1.0];
[layer setShadowColor:[UIColor redColor].CGColor] ;
[layer setShadowOpacity:0.5]; 
[layer setShadowPath:[[UIBezierPath bezierPathWithRect:cell.bounds] CGPath]];

SWIFT 4.2

사용자 지정 셀 또는 cellForItemAt에 다음을 추가해야 합니다.cellForItemAt를 사용하는 경우: 접근법은 self-> cell로 대체합니다.

        self.layer.cornerRadius = 10
        self.layer.borderWidth = 1.0
        self.layer.borderColor = UIColor.lightGray.cgColor

        self.layer.backgroundColor = UIColor.white.cgColor
        self.layer.shadowColor = UIColor.gray.cgColor
        self.layer.shadowOffset = CGSize(width: 2.0, height: 4.0)
        self.layer.shadowRadius = 2.0
        self.layer.shadowOpacity = 1.0
        self.layer.masksToBounds = false

이렇게 하면 테두리가 둥글고 그림자가 드리워진 셀을 얻을 수 있습니다.

설정하기만 하면 됩니다.cornerRadius 및 (b) 트shadowPath이 반름이 직둥각형사근과 반지름을 이 됨cornerRadius:

self.layer.cornerRadius = 10;
self.layer.shadowPath = [[UIBezierPath bezierPathWithRoundedRect:self.bounds cornerRadius:self.layer.cornerRadius] CGPath];

해결책에 대한 저의 견해는 이렇습니다.다른 답변과 비슷하지만 한 가지 중요한 차이점이 있습니다.뷰의 경계에 의존하는 경로를 만들지 않습니다.경계를 기반으로 경로를 생성하여 계층에 제공할 때마다 크기 조정 시 문제가 발생할 수 있으며 경로를 업데이트하는 방법을 설정해야 합니다.

더 간단한 해결책은 경계에 의존하는 모든 것을 사용하지 않는 것입니다.

let radius: CGFloat = 10

self.contentView.layer.cornerRadius = radius
// Always mask the inside view
self.contentView.layer.masksToBounds = true

self.layer.shadowColor = UIColor.black.cgColor
self.layer.shadowOffset = CGSize(width: 0, height: 1.0)
self.layer.shadowRadius = 3.0
self.layer.shadowOpacity = 0.5
// Never mask the shadow as it falls outside the view
self.layer.masksToBounds = false

// Matching the contentView radius here will keep the shadow
// in sync with the contentView's rounded shape
self.layer.cornerRadius = radius

이제 셀 크기가 변경될 때마다 뷰 API가 내부적으로 모든 작업을 수행합니다.

Swift를 위해 약간의 변경을 해야 했습니다.

cell.contentView.layer.cornerRadius = 2.0;
cell.contentView.layer.borderWidth = 1.0;
cell.contentView.layer.borderColor = UIColor.clearColor().CGColor;
cell.contentView.layer.masksToBounds = true;

cell.layer.shadowColor = UIColor.grayColor().CGColor;
cell.layer.shadowOffset = CGSizeMake(0, 2.0);
cell.layer.shadowRadius = 2.0;
cell.layer.shadowOpacity = 1.0;
cell.layer.masksToBounds = false;
cell.layer.shadowPath = UIBezierPath(roundedRect:cell.bounds, cornerRadius:cell.contentView.layer.cornerRadius).CGPath;

이러한 효과를 얻기 위해 다음 방법을 사용합니다.

extension UICollectionViewCell {
    /// Call this method from `prepareForReuse`, because the cell needs to be already rendered (and have a size) in order for this to work
    func shadowDecorate(radius: CGFloat = 8,
                        shadowColor: UIColor = UIColor(red: 0, green: 0, blue: 0, alpha: 0.3),
                        shadowOffset: CGSize = CGSize(width: 0, height: 1.0),
                        shadowRadius: CGFloat = 3,
                        shadowOpacity: Float = 1) {
        contentView.layer.cornerRadius = radius
        contentView.layer.borderWidth = 1
        contentView.layer.borderColor = UIColor.clear.cgColor
        contentView.layer.masksToBounds = true

        layer.shadowColor = shadowColor.cgColor
        layer.shadowOffset = shadowOffset
        layer.shadowRadius = shadowRadius
        layer.shadowOpacity = shadowOpacity
        layer.masksToBounds = false
        layer.shadowPath = UIBezierPath(roundedRect: bounds, cornerRadius: radius).cgPath
        layer.cornerRadius = radius
    }
}

Mike Sabatini의 응답은 정상적으로 작동합니다. 셀 속성을 collectionViewCellForItemAt에서 직접 구성하지만 사용자 지정 UICollectionViewCell 하위 클래스의 awakeFromNib()에서 설정하려고 하면 IB(Storyboard)에서 이전에 설정한 너비 및 높이와 일치하지 않는 장치에 잘못된 bezierPath가 설정됩니다.

저를 위한 솔루션은 UICollectionViewCell의 하위 클래스 내에 func를 생성하고 cellForItemAt에서 다음과 같이 호출하는 것은 다음과 같습니다.

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    if let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cellID", for: indexPath) as? CustomCollectionViewCell{
        cell.configure())
        return cell
    }
    else {
        return UICollectionViewCell()
    }
}

CustomCollectionViewCell.swift:

class CustomCollectionViewCell: UICollectionViewCell{
    func configure() {
    contentView.layer.cornerRadius = 20
    contentView.layer.borderWidth = 1.0
    contentView.layer.borderColor = UIColor.clear.cgColor
    contentView.layer.masksToBounds = true
    layer.shadowColor = UIColor.black.cgColor
    layer.shadowOffset = CGSize(width: 0, height: 2.0)
    layer.shadowRadius = 2.0
    layer.shadowOpacity = 0.5
    layer.masksToBounds = false
    layer.shadowPath = UIBezierPath(roundedRect: bounds, cornerRadius: contentView.layer.cornerRadius).cgPath}
 }

이건 나한테 효과가 있었어요

cell.contentView.layer.cornerRadius = 5.0
cell.contentView.layer.borderColor = UIColor.gray.withAlphaComponent(0.5).cgColor
cell.contentView.layer.borderWidth = 0.5

let border = CALayer()
let width = CGFloat(2.0)
border.borderColor = UIColor.darkGray.cgColor
border.frame = CGRect(x: 0, y: cell.contentView.frame.size.height - width, width:  cell.contentView.frame.size.width, height: cell.contentView.frame.size.height)

border.borderWidth = width
cell.contentView.layer.addSublayer(border)
cell.contentView.layer.masksToBounds = true
cell.contentView.clipsToBounds = true

UICollectionViewCell을 생성하는 동안 UICollectionViewDataSource 메서드에서 섀도 색상, 반지름 및 오프셋을 설정할 수 있습니다.

cell.layer.shadowColor = UIColor.gray.cgColor
cell.layer.shadowOffset = CGSize(width: 0, height: 2.0)
cell.layer.shadowRadius = 1.0
cell.layer.shadowOpacity = 0.5
cell.layer.masksToBounds = false

중요한 것을 발견했습니다. UICollectionViewCell에는 다음과 같은 배경색이 있어야 합니다.clear위의 것들을 작동시키기 위해 색.

Swift 5, Xcode 13, iOS 14

먼저 아래와 같이 컬렉션을 구성합니다.

self.collectionView.clipsToBounds = false

그런 다음 아래와 같이 셀을 구성합니다.

override func awakeFromNib() {
    super.awakeFromNib()
    
    self.configView()
}
    
private func configView() {
    self.clipsToBounds = false
    self.backgroundColor = .systemBackground
    self.layer.cornerRadius = 10
    self.layer.shadowColor = UIColor.black.cgColor
    self.layer.shadowOffset = CGSize(width: 0, height: 0.0)
    self.layer.shadowRadius = 10
    self.layer.shadowOpacity = 0.2
}

이러한 두 개의 "clipToBounds = false" 명령에 유의하십시오.

바로 그거.

언급URL : https://stackoverflow.com/questions/13505379/adding-rounded-corner-and-drop-shadow-to-uicollectionviewcell