2017-04-21 2 views
0

コレクションビューを使用してイメージに表示されているレイアウトを実現するにはどうすればよいですか?コレクションビューで異なる行の列数を異ならせる方法

enter image description here

私は下のリンクから滝のフローレイアウトを使用してそれを達成しようとしているが、成功を得ていないのです。 https://github.com/chiahsien/CHTCollectionViewWaterfallLayout

以下は、私がそうしようとしているコードです。

override func viewDidLoad() { 
    super.viewDidLoad() 
    let identifier = String(describing: collectionCell.self) 
    collectionView.register("collectionCell", forCellWithReuseIdentifier: "collectionCell") 
    collectionView.register(UINib(nibName: "collectionCell", bundle: nil), forCellWithReuseIdentifier: identifier) 
    let layout = CHTCollectionViewWaterfallLayout() 
    layout.sectionInset = UIEdgeInsets(top: 10, left: 10, bottom: 10, right: 10) 
    layout.minimumInteritemSpacing = 0 
    layout.minimumColumnSpacing = 10 
    collectionView.collectionViewLayout = layout 
} 

//セル

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

    let width = Double((self.collectionView.bounds.size.width-(4*minimumSpaceBetweenCells))/3) 

    if indexPath.row == 0 { 
     return CGSize(width:width * 2, height: width * 2) 
    } 
    else 
    { 
     return CGSize(width:width, height: width) 
    } 

} 

のサイズを設定する。しかし、それだけですべての行で同じサイズの2列を表示してください。

どうすればいいのか分かりますか教えてください。

ありがとうございます。

+0

レイアウトをコーディングする必要があると思います。インターネット上で見つかるほとんどのチュートリアルでは、アイテムの高さや幅が同じで、幅や高さが可変であることが分かります。あなたの場合、高さと幅の異なる2種類のアイテムがあります。あなたはそれらのアイテムを自分でレイアウトする必要があります。 –

+2

http://stackoverflow.com/questions/43186246/uicollectionview-layout-like-snapchat/43409440#43409440?フレームを自分で計算すれば簡単です。 – Larme

+0

ありがとう@Larme私はあなたが提供したリンクから迅速なバージョンを作成し、それは私のために動作します。 –

答えて

0

各collectionViewCell内に新しいtableViewを作成し、tableViewのnumberOfRowsに必要な列数を設定することをお勧めします。

関連する問題