Swift:如何将自定义UICollectionViewCell设置为圆?

时间:2016-09-01 13:53:42

标签: ios swift xcode uicollectionview uicollectionviewcell

我的自定义UICollectionViewCell包含UILabelUIImage。 我想以圆形格式设置单元格。

注意:由于AutoLayout,无法更改 sizeForItemAtIndexPath

以下是我使用过的代码:

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

8 个答案:

答案 0 :(得分:10)

这是我的UICollectionView示例,您可以检查您的解决方案。我正在使用storyboard来设置带有AutoLayout的主集合。我也附上了一些屏幕截图。

有一种名为drawRect的方法。你可以在collectionView Cell类中使用它来做UI的东西。

现在这是我的代码。

<强> 1。 ViewController.swift //就像普通的ViewController一样,没有别的......:)

//
//  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,我没有在UICollectionViewFlowLayoutsizeForItemAtIndexPath内使用任何flowlayout IMyFancyInterface<T>或单元格大小。你也可以添加这些东西。请根据您的需要做一些实验。顺便说一下,我使用的是Xcode 7.3.1和Swift 2.2。

现在是时候在模拟器上设置collectionView设置和结果的故事板截图了。这部分必须在编码部分之前完成....:p

First Storyboard screenshot with simulator result

Second Storyboard screenshot with simulator result

希望这有帮助。对不起任何错误。

答案 1 :(得分:4)

尝试将角半径设为高度/ 2,确保单元格的高度和宽度相同。

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

cell.layer.masksToBounds = true

请告诉我这是否适合您。

答案 2 :(得分:1)

问题是单元格p2width在运行时根据您的屏幕宽度进行了更改。因此,要解决此问题,请在单元格中添加一个方格heightUIView方法中使用UIView使其成为圆形视图。

cellForItemAtIndexPath

答案 3 :(得分:1)

通过这条线来计算你的细胞的高度

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

你无法达到你想要的。使用宽高比技术。对于单元格的高度和宽度,使用您的屏幕宽度并根据该宽高比更新您的单元格高度和宽度然后只有这条线才有效....

如果你需要澄清skype me iammubin38

答案 4 :(得分:0)

您可以尝试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
        }
    }

答案 5 :(得分:0)

使用此更新的单元格。

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

答案 6 :(得分:0)

嘿检查这段代码。

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

答案 7 :(得分:0)

在 swift 5

import UIKit
import Kingfisher

class StoryCollectionViewCell: UICollectionViewCell {
    
    override func awakeFromNib() {
        super.awakeFromNib()
        // Initialization code
    }
    
// this override can make the circle

    override func draw(_ rect: CGRect) {
        super.draw(rect)
        self.layer.cornerRadius = self.frame.size.width / 2
    }

}