web-dev-qa-db-ja.com

Swiftで水平スクロールUICollectionViewを作成するにはどうすればよいですか？

列を下に移動するのではなく、行を横切るセルを埋める水平スクロールcollectionViewを作成するにはどうすればよいですか？

5列と3行にしたいのですが、15項目以上ある場合は、次のページにスクロールします。これを実現するのに多くの問題を抱えています。

iosswiftuicollectionviewuicollectionviewcellhorizontal-scrolling
11
user6520705

オプション1-推奨

コレクションビューにカスタムレイアウトを使用します。これはこれを行う正しい方法であり、セルをコレクションビューに表示する方法を詳細に制御できます。

これが ICollectionViewカスタムレイアウトチュートリアル の "raywenderlich"です。

オプション2

これはあなたが望むことをするハックな方法のようなものです。この方法では、必要なスタイルをシミュレートするためにデータソースにアクセスできます。私はそれをコードで説明します：

var myArray = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18]
let rows = 3
let columnsInFirstPage = 5
// calculate number of columns needed to display all items
var columns: Int { return myArray.count<=columnsInFirstPage ? myArray.count : myArray.count > rows*columnsInFirstPage ? (myArray.count-1)/rows + 1 : columnsInFirstPage }

override func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {        
    return columns*rows
}

override func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
    let cell = collectionView.dequeueReusableCellWithReuseIdentifier("Cell", forIndexPath: indexPath)
    //These three lines will convert the index to a new index that will simulate the collection view as if it was being filled horizontally
    let i = indexPath.item / rows
    let j = indexPath.item % rows         
    let item = j*columns+i

    guard item < myArray.count else {
        //If item is not in myArray range then return an empty hidden cell in order to continue the layout
        cell.hidden = true
        return cell
    }
    cell.hidden = false

    //Rest of your cell setup, Now to access your data You need to use the new "item" instead of "indexPath.item"
    //like: cell.myLabel.text = "\(myArray[item])"

    return cell
}

このコードの動作は次のとおりです。

enter image description here

*「追加」ボタンは、myArrayに別の数を追加し、コレクションビューをリロードして、myArray内の異なる数の項目でどのように見えるかを示します。

Edit-アイテムをページにグループ化：

var myArray = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18]
let rows = 3
let columnsInPage = 5
var itemsInPage: Int { return columnsInPage*rows }
var columns: Int { return myArray.count%itemsInPage <= columnsInPage ? ((myArray.count/itemsInPage)*columnsInPage)  + (myArray.count%itemsInPage) : ((myArray.count/itemsInPage)+1)*columnsInPage }

override func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {        
    return columns*rows
}

override func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
    let cell = collectionView.dequeueReusableCellWithReuseIdentifier("Cell", forIndexPath: indexPath)

    let t = indexPath.item / itemsInPage
    let i = indexPath.item / rows - t*columnsInPage
    let j = indexPath.item % rows      
    let item = (j*columnsInPage+i) + t*itemsInPage

    guard item < myArray.count else {
        cell.hidden = true
        return cell
    }
    cell.hidden = false

    return cell
}
9
Sam_M

UICollectionViewFlowLayout()への参照がある場合は、次のようにします。

layout.scrollDirection = .horizontal

詳細については、こちらのニースチュートリアルをご覧ください。 https://www.youtube.com/watch?v=Ko9oNhlTwH

歴史的な目的ではありますが、StackOverFlowをすばやく検索して、これが重複していないことを確認してください。

お役に立てれば。

更新：最初にアイテムが水平方向にいっぱいになり、コレクションビューの右側に十分なスペースがない場合、アイテムは次の行に移動します。ですから、collectionview.contentsize（スクロールを有効にするには、画面を大きくする必要があります）してから、collectionviewアイテム（セル）のサイズを設定します。

flowLayout.itemSize = CGSize(width: collectionView.contentSize.width/5, height: collectionView.contentSize.height/3)
23
Ian Moses

コレクションビューの高さとセルサイズを指定します。以下の詳細：

  1. エッジを固定して、UICollectionViewの制約を設定します。セルが水平方向にしかスクロールできず、次の行までスクロールできないことを明確にするために、UICollectionViewの高さまたは制約を必ず指定してください。高さは、手順2で指定したセルの高さと同じか、わずかに高くする必要があります。

  2. UICollectionViewDelegateFlowLayoutデリゲートとsizeForItemAtメソッドを実装します。次に、sizeForItemAt実装のサンプルを示します。

    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
    let cellWidth = 100
    let cellHeight = 30
    return CGSize(width: cellWidth, height: cellHeight)
}
0
craft