2016-09-01 101 views
1

我已經定製UICollectionViewCell其中包含UILabelUIImage。 我想以循環格式設置單元格。Swift:如何將自定義UICollectionViewCell設置爲圓形?

注意: -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

+0

其圖像或按鈕或collectionview單元格 –

+0

那麼,如果你真的不能改變你的'sizeForItemAtIndexPath'實現,那麼最簡單的方法就是給你的單元格添加一個虛擬的矩形視圖,並在其上設置邊界和角點半徑。 – Losiowaty

+0

爲什麼不簡單地改變鍵盤類型來做到這一點? – Desdenova

回答

6

這是我UICollectionView例子,你可以檢查您的解決方案。我正在使用故事板來使用AutoLayout設置主collectionView。我也附上了一些截圖。

有一種方法叫做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 
    } 

} 

注:我沒有使用任何的UICollectionViewFlowLayout任何的FlowLayout或細胞內的大小爲sizeForItemAtIndexPath此的CollectionView。你也可以添加這些東西。請根據您的需求做一些實驗。順便說一句我正在使用Xcode 7.3.1和Swift 2.2。

現在它的時間爲故事板截圖爲collectionView設置和模擬器上的結果。這部分必須編碼部分之前完成....:P

First Storyboard screenshot with simulator result

Second Storyboard screenshot with simulator result

希望這有助於。對不起,有任何錯誤。

3

只是試圖給圓角半徑爲高度/ 2,確保小區應該有高度和寬度相同。

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

cell.layer.masksToBounds = true 

請讓我知道這是否適用於您。

+0

高度和寬度以編程方式生成。它取決於設備的大小 –

+0

然後最小的樂趣將照顧。請檢查並讓我知道。 – Sandy

+0

這不起作用。它顯示橢圓形而不是圓形。 –

1

的問題是電池的widthheight根據您的屏幕寬度在運行時改變,所以要解決這個問題,添加一個方形UIView你的細胞內,並使用該UIViewcellForItemAtIndexPath方法來使它像這個圈子視圖。

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

通過給這條線來計算你的

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

你不能達到你想要什麼樣的高度。使用長寬比技術。對於細胞的高度和寬度使用您的屏幕寬度,並根據該長寬比更新你的高度和寬度,然後才把這一線工程....

如果您需要澄清Skype的我iammubin38

相關問題