2016-12-29 24 views
0

我是一名android開發人員,正在開發我的第一個iOS應用程序,我需要實現GridView才能添加一些社交圖標,因此在搜索後發現UICollectionView,但未按預期工作。如何設置UICollection視圖的動態高度?其實我想顯示所有圖標,但它顯示滾動UICollectionView後只顯示一行和其他人。UIViewController中的動態UICollectionView

下面

是例如: 這是我得到

enter image description here

這就是我想要的:

enter image description here

我使用下面的代碼:

import UIKit 

class CollectionViewDemo: UIViewController, UICollectionViewDelegate, UICollectionViewDataSource { 

@IBOutlet weak var socialHandleCollection: UICollectionView! 


@IBOutlet weak var socialImageView: UIImageView! 

var socialHandleArray:[String] = ["Facebook", "Twitter", "Youtube","Vimeo", "Instagram", "Custom URL", "Linkedin", "pinterest"] 


override func viewDidLoad() { 

    self.socialHandleCollection.delegate = self 
    self.socialHandleCollection.dataSource = self 

    // socialHandleCollection.frame.size.height = 130 
} 

func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int { 
    return socialHandleArray.count 
} 

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

    let cell: colvwCell = collectionView.dequeueReusableCellWithReuseIdentifier("cell", forIndexPath: indexPath) as! colvwCell 

    cell.imgCell.image = UIImage(named: "demo_img.png") 

    return cell 
} 

func collectionView(collectionView: UICollectionView, didSelectItemAtIndexPath indexPath: NSIndexPath) { 
     print(self.socialHandleArray[indexPath.row]) 
} 
} 

任何幫助,將不勝感激。

+0

你可以使用autoLayout嗎? –

+0

使用自動佈局:此集合視圖的出口高度,高度:NSLayoutConstraint! - >在此之後Height.constant = 52(根據您的要求) –

回答

0

假設你正在使用的autoLayout

首先聲明,您希望先

let numberOfColumns = 5 

好了,所以第一件事情列的具體數量。你將不得不讓你的課程符合UICollectionViewDelegateFlowLayout。現在實現的功能 -

func collectionView(_ collectionView: UICollectionView, 
         layout collectionViewLayout: UICollectionViewLayout, 
         sizeForItemAt indexPath: IndexPath) -> CGSize{ 

     return CGSize(width: collectionView.bounds.size.width/numberOfColumns, height: collectionView.bounds.size.width/numberOfColumns); 
} 

這裏5可以改變你想在每一行和傳遞價值相同的高度將確保形狀始終是方形的列數。因此,您可以應用圓角半徑以使其成爲圓形。

現在繼續。從你的界面生成器,按Ctrl +單擊和UICollectionView高度約束拖動到你的UIViewController(類似於你將如何爲UIView做,但做到這一點的約束)

現在,一旦你知道你需要的項目數您UICollectionView裏面顯示,你可以這樣做:

//replace 5 with the number of columns you want 
//array contains the items you wish to display 
func figureOutHeight(){ 

    if(array.count == 0){ 
     //as no items to display in collection view 
     return 
    } 

    //ceil function is just to round off the value to the next one, for example 6/5 will return 1 but we need 2 in this case. Ensure all arguments inside ceil function are float 
    let rowsCount = ceil(Float(array.count)/Float(numberOfColumns)) 

    //now you have number of rows soo just update your height constraint by multiplying row count with height of each item inside UICollectionView 
    collectionViewHeightConstraint.constant = rowsCount * collectionView.bounds.size.height/numberOfColumns; 

    view.layoutIfNeeded() 
} 

而且如果你沒有改變滾動方向垂直。

+0

您添加的方法是針對Swift 3,而OP則使用Swift 2.x連擊器正確處理第一個。 –

相關問題