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


104

그래서 그림자를 추가하기 위해 2nd view를 추가하는 것에 대한 다양한 게시물을 이미 봤지만 .NET에 추가하고 싶다면 여전히 작동하지 않습니다 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.


다른 사람들이 이해하려면 질문을 개선해야한다고 생각합니다. 정말 u는 요청 것을 지저분한 것
네쉬 라자에게

업데이트 좋아, 난 그냥 UICollectionViewCell에 둥근 모서리와 그림자를 추가하는 방법을 알고 싶어요
빈센트 Yiu

약간 제쳐두고-shadowRadius 또는 setShadowPath를 사용하십시오. 둘 다이 컨텍스트에서 본질적으로 동일한 명령이기 때문에 아무 의미가 없습니다 (모두 둥근 모서리). 모든 모서리에 적용되지 않는 더 복잡한 모양이나 둥근 모서리를 원하는 경우 섀도우 경로가 필요합니다.
Oliver Dungey 2014-08-20

답변:


194

이 솔루션 중 어느 것도 나를 위해 일하지 않았습니다. 모든 하위 뷰를 UICollectionViewCell 콘텐츠 뷰에 ​​배치하면 셀 레이어에 그림자를 설정하고 contentView 레이어에 테두리를 설정하여 두 결과를 모두 얻을 수 있습니다.

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

9
내가 추가 한 후이 나를 위해 잘 작동cell.layer.backgroundColor = [UIColor clearColor].CGColor;
nacross

2
왜 이것이 내 상단 모서리를 둥글게 만드는지 아십니까?
user3344977

@ user3344977 아마도 바닥이 잘리고 있습니까? 코너에서와 같이 둥글게되어 있지만, 셀의 가시 부 아래
CoderNinja

5
나는 이것이 내 하단 모서리가 아닌 상단 모서리를 둥글게 만든다는 것을 알았습니다.
fatuhoku 2015

2
셀을 선택 / 선택 취소 / 이동할 때 모서리를 둥글게 유지하려면 어떻게해야합니까? 셀이 처음에 올바르게 그려진 후 셀에서 숨을 쉴 때마다 모서리가 사각형으로 이동합니다.
Adrian

32

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

나는 오른쪽 모서리와 각 셀의 바닥, 그리고 그 길을 작품 위의 코드에 그림자 효과를 추가 할 필요가 ... 어둠의 색으로 셀을 채우고
조 세네

25

도움이되는 경우 : 다음은 모서리를 둥글게하는 빠른 방법입니다.

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

셀이 셀을 제어하는 ​​변수 인 경우 : 자주 사용합니다. override func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell

즐겨!


18

여기 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

1
빠른 4,2에서도 작동, thanls
ShadeToD

2
'D : 마시모 나는 해결책을 찾고 있었다 ... 덕분에 젊은
마시모 Polimeni

16

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]];

2
이것은 나를 위해 작동하지 않는 것 같습니다. uitableviewcell에 유사한 코드를 사용하지만 collectionviewcell에서 작동하지 않는 것 같습니다. cv 셀에서 동일한 코드가 작동하지 않는 방식이 이상합니다.
Jason

위의 댓글에 대한 업데이트입니다. UICollectionViewCells가 UITableViewCells와 다른 그림자 오프셋을 사용하는 것 같습니다. 그림자가 보이지 않으면 오프셋을 변경해보십시오 (Y 값을 높이면 도움이 됨).
Jason

14

SWIFT 4.2

사용자 정의 셀 또는 cellForItemAt에 이것을 추가해야합니다.

        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

이것은 둥근 테두리와 그림자가있는 셀을 제공합니다.


13

내 대답은 다른 것에 가깝지만 모서리 반경을 레이어에 추가하지 않으면 모서리가 올바르게 채워지지 않습니다. 또한 이것은 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:)셀을 대기열에서 빼면 데이터 소스 에서 호출 할 수 있습니다 .


8

(a) 설정 cornerRadius하고 (b) 다음 shadowPath과 같은 반경을 가진 둥근 사각형으로 설정 하면됩니다 cornerRadius.

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

2
왜 이것이 내 하단 모서리를 둥글게 만드는지 아십니까?
user3344977

반올림하는 레이어가 부분적으로 가려진 것처럼 들립니다. 세부 사항 없이는 더 이상 갈 수 없습니다.
Timothy Moose

Tim, 방금이 질문을했습니다. 빨리 얻을 수있을 것 같아요. 셀 아래 / 아래에 그림자 만 있기 때문인가요? stackoverflow.com/q/27929735/3344977
user3344977

6

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;

3

Mike Sabatini의 대답은 collectionView cellForItemAt에서 직접 셀 속성을 구성하는 경우 잘 작동하지만 사용자 지정 UICollectionViewCell 하위 클래스의 awakeFromNib ()에서 설정하려고하면 장치에 잘못된 bezierPath가 설정되어 종료됩니다. 스토리 보드 (IB)에서 이전에 설정 한 너비 및 높이와 일치하지 않습니다.

나를위한 해결책은 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}
 }

3

이것은 나를 위해 일했습니다.

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

3

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

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
    }
}

2

당신은 그림자 색상, 반경을 설정하고 오프셋 할 수 UICollectionViewDataSource의 작성하는 동안 방법 UICollectionViewCell을

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

2

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

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

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가 모든 작업을 내부적으로 수행합니다.


제 생각에는 가장 깨끗한 대답입니다. 반경을 동기화하는 아이디어를 좋아합니다.
Kirill Kudaev

2

중요한 점을 발견했습니다 clear. 위의 작업을 수행 하려면 UICollectionViewCell에 backgroundColor가 색상으로 있어야합니다.


그림자를 자르지 않는 것이 매우 중요합니다! 이 대답을 무시하지 마십시오. 감사합니다.
DennyDog
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.