web-dev-qa-db-ja.com

Swift：カスタムUICollectionViewCellを円として設定するにはどうすればよいですか？

UICollectionViewCellとUILabelを含むカスタムUIImageを作成しました。セルを円形に設定したい。

注：-sizeForItemAtIndexPathは、AutoLayoutのため変更できません。

以下は私が使用したコードです：

func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout,sizeForItemAtIndexPath indexPath:NSIndexPath ) -> CGSize {

          return CGSize(width: (self.objKeypadCollectionView.frame.size.width/3)-10, height: (self.objKeypadCollectionView.frame.size.height/4)-10)
    }

func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {

        let objKeypadCollectionViewCell = collectionView.dequeueReusableCellWithReuseIdentifier("idKeypadCollectionViewCell", forIndexPath: indexPath) as! KeypadCollectionViewCell

        if (self.numberArray[indexPath.item])=="asda" {
            objKeypadCollectionViewCell.lblNumber.text = ""
            objKeypadCollectionViewCell.imgPrint.hidden = false
        }
        else if (self.numberArray[indexPath.item])=="Derterel" {
            objKeypadCollectionViewCell.lblNumber.text = self.numberArray[indexPath.item]
            objKeypadCollectionViewCell.imgPrint.hidden = true
        }
        else {
            objKeypadCollectionViewCell.imgPrint.hidden = true
            objKeypadCollectionViewCell.lblNumber.text = self.numberArray[indexPath.item]
            objKeypadCollectionViewCell.layer.borderColor = UIColor.lightGrayColor().CGColor
            objKeypadCollectionViewCell.layer.borderWidth = 1
            objKeypadCollectionViewCell.layer.cornerRadius = objKeypadCollectionViewCell.frame.size.width/2
        }
        return objKeypadCollectionViewCell
    }

Screenshot 1

Design screen

iosswiftxcodeuicollectionviewuicollectionviewcell
8
Jayprakash Dubey

これは私のUICollectionViewの例であり、ソリューションを確認できます。ストーリーボードを使用して、AutoLayoutでプライマリcollectionViewをセットアップしています。また、結果を明確にするためにいくつかのスクリーンショットを添付します。

drawRect()というメソッドがあります。これをcollectionViewCellクラス内で使用して、UIを実行できます。

これが私のコードです。

1。 ViewController.Swift//あなたのような通常のUIViewControllerだけで、他には何もありません... :)

//
//  ViewController.Swift
//  CollectionCheckCircle
//
//  Created by Tuhin Samui on 02/09/16.
//  Copyright © 2016 Tuhin Samui. All rights reserved.
//

import UIKit

class ViewController: UIViewController, UICollectionViewDelegate, UICollectionViewDataSource {

    @IBOutlet weak var collectionView: UICollectionView!

    override func viewDidLoad() {
        super.viewDidLoad()
        collectionView.delegate = self
        collectionView.dataSource = self
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }


    func numberOfSectionsInCollectionView(collectionView: UICollectionView) -> Int {
        return 1
    }

    func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return 200
    }


    func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
        let cellOfCollection = collectionView.dequeueReusableCellWithReuseIdentifier("cellCollectionView", forIndexPath: indexPath) as! CollectionViewCell

        return cellOfCollection
    }

}

2。 CollectionViewCell.Swift//セルをデキューするためのUICollectionViewCellクラスのみ。

//
//  CollectionViewCell.Swift
//  CollectionCheckCircle
//
//  Created by Tuhin Samui on 02/09/16.
//  Copyright © 2016 Tuhin Samui. All rights reserved.
//

import UIKit

class CollectionViewCell: UICollectionViewCell {
    @IBOutlet weak var imageView: UIImageView!

    override func drawRect(rect: CGRect) { //Your code should go here.
        super.drawRect(rect)
        self.layer.cornerRadius = self.frame.size.width / 2
    }

}

注：このcollectionViewには、flowlayoutのUICollectionViewFlowLayoutまたはsizeForItemAtIndexPath内のセルサイズを使用していません。それらも追加できます。必要に応じて実験を行ってください。ところで、私はXcode7.3.1とSwift 2.2を使用しています。

これは、collectionViewのセットアップとシミュレーターでの結果のストーリーボードのスクリーンショットです。 First Storyboard screenshot with simulator result

Second Storyboard screenshot with simulator result

これがお役に立てば幸いです。間違いでごめんなさい。

12
onCompletion

コーナーの半径をheight/2として指定し、セルの高さと幅が同じであることを確認してください。

cell.layer.cornerRadius = min(cell.frame.size.height, cell.frame.size.width) / 2.0

cell.layer.masksToBounds = true

これでうまくいくかどうか教えてください。

4
Sandy

あなたの細胞の高さを計算するためにこの線を与えることによって

return CGSize(width: (self.objKeypadCollectionView.frame.size.width/3)-10, height: (self.objKeypadCollectionView.frame.size.height/4)-10)

あなたはあなたが望むものを達成することはできません。アスペクト比の手法を使用します。セルの高さと幅については、画面の幅を使用し、そのアスペクト比に基づいてセルの高さと幅を更新します。その後、この行が機能します。

明確化が必要な場合はスカイプしてくださいiammubin38

1
Mubin Mall

問題は、セルのwidthとheightが実行時に画面の幅に応じて変更されることです。したがって、この問題を解決するには、セル内に1つの正方形UIViewを追加し、UIViewメソッド内でそのcellForItemAtIndexPathを使用してこのような円ビューにします。

objKeypadCollectionViewCell.circleView.layer.borderColor = UIColor.lightGrayColor().CGColor
objKeypadCollectionViewCell.circleView.layer.borderWidth = 1
objKeypadCollectionViewCell.circleView.layer.cornerRadius = objKeypadCollectionViewCell.frame.size.width/2
objKeypadCollectionViewCell.circleView.layer.masksToBounds = true
1
Nirav D

このコードを確認してください。

func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout,sizeForItemAtIndexPath indexPath:NSIndexPath ) -> CGSize {
CGSize size = CGSize(width: (self.objKeypadCollectionView.frame.size.width/3)-10, height: (self.objKeypadCollectionView.frame.size.height/4)-10);
CGFloat width = size.width;
CGFloat height = size.height;
  if (width < height) {
     height = width;
   } else {
     width = height;
   }
   return size;
}
0
Rajesh Maurya

UICollectionViewDelegateFlowLayout ...を試すことができます。

最初にデリゲートを追加します。

 class ViewController: UIViewController, UICollectionViewDelegate, UICollectionViewDataSource, UICollectionViewDelegateFlowLayout {

        func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize {
            let collectionWidth = CGRectGetWidth(collectionView.bounds);
                var itemWidth = collectionWidth / 3 - 1;
                return CGSizeMake(itemWidth, itemWidth);
            }
        }

        func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAtIndex section: Int) -> CGFloat {
            return 1
        }

        func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAtIndex section: Int) -> CGFloat {
            return 1
        }
    }
0
Anand Nimje

この更新されたセルを使用します。

class KeypadCollectionViewCell: UICollectionViewCell {

    var circularBGLayer: CALayer!

    override func awakeFromNib() {
        super.awakeFromNib()
        backgroundColor = UIColor.clearColor()
        circularBGLayer = CALayer()
        circularBGLayer.backgroundColor = UIColor.lightGrayColor().CGColor
        layer.addSublayer(circularBGLayer)
    }

    override func layoutSubviews() {
        super.layoutSubviews()

        var frame = self.bounds
        frame.size.width = min(frame.width, frame.height)
        frame.size.height = frame.width
        circularBGLayer.bounds = frame
        circularBGLayer.cornerRadius = frame.width*0.5
        circularBGLayer.position = CGPoint(x: frame.midX, y: frame.midY)
    }
}
0
Arun Ammannaya