web-dev-qa-db-ja.com

丸い角とドロップシャドウを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に丸い角と影を追加する方法を知りたい。

iphoneiosuicollectionviewcell
81
Vincent Yiu

これらのソリューションはどちらも私にとってはうまくいきませんでした。すべてのサブビューをおそらく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;

Swift 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
168
Mike Sabatini

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
27
Torre Lasley

役立つ場合：角を丸くするSwiftは次のとおりです。

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

セルはセルを制御する変数です。多くの場合、override func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCellでこれを使用します

楽しい！

23
rocket101

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

ここでは、Swift 4ソリューション、丸いeveryコーナーに更新され、上部コーナーだけでなく：

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
10
Massimo Polimeni

（a）cornerRadiusを設定し、（b）shadowPathをcornerRadiusと同じ半径の丸い長方形に設定するだけです。

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

Swift 4.2

これをカスタムセルまたはcellForItemAtに追加する必要があります：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

これにより、丸い境界線とドロップシャドウのあるセルが作成されます。

7
Alexander

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;
6
Keith Holliday

これは私のために働いた

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
Tom Derry Marion Mantilla

CollectionView cellForItemAtでセルプロパティを直接設定した場合、Mike Sabatiniの答えは正常に機能しますが、カスタム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}
 }
2
frantenerelli

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
1
Rahul Panzade

これが解決策です。他の回答と似ていますが、重要な違いが1つあります。ビューの境界に依存するパスは作成されません。境界に基づいてパスを作成してレイヤーに提供すると、サイズ変更時に問題が発生する可能性があり、パスを更新するためのメソッドをセットアップする必要があります。

より簡単な解決策は、境界に依存するものの使用を避けることです。

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がすべての作業を内部で実行します。

0
Adam

他の人に近い私の答えはここにありますが、レイヤーにコーナー半径を追加します。そうしないと、コーナーが正しく埋められません。また、これは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:)で呼び出すことができます。

0
smileBot

Xibからセルをロードする場合、awakeFromNibはコードを配置する場所です。

class MyCollectionViewCell: UICollectionViewCell {
    override func awakeFromNib() {
        layer.cornerRadius = 7
        layer.masksToBounds = true
    }
}
0
RefuX