web-dev-qa-db-ja.com

サイズクラスごとにUICollectionViewセルサイズを構成するにはどうすればよいですか？

UICollectionViewCellsにレスポンシブ/アダプティブUIStoryboardを作成しようとすると、摩擦が生じます。

私が見ている問題は、Cell SizeごとにSize Classを設定できないようであり、これに対する正しいアプローチを確認しようとしています。サイズクラスに関係なく、セルがshould自動サイズになるように、セルをコンテナに合わせて調整するように設計しました。これは主に、サイズクラスを変更し、セルビューを選択して、Update Framesを実行すると、すべて新しいサイズに合わせてサイズが変更されるという点で機能します。ただし、これは1回限りの取引であり、Any/Anyサイズのクラスに戻ると、サイズ変更されたバージョンが引き続き表示されます。

これが私が試すことができると私が知っていることです：

  • サイズクラスごとにストーリーボードビューで、固定サイズの複数のセルを作成します。その場合、実行時にse正しいものしかできませんでしたが、設計時にseeできました。
  • I couldサイズごとのコレクションビューを作成します。各クラスはそのサイズに対してのみインストールされます。これは機能しますが、複数のUICollectionViewsを管理するのは面倒です。
  • インターフェースや制約をプログラムで作成します（デザインの可視性を失います）。

これが解決されたシナリオであり、何かが足りないことを願っていますが、現時点ではIBツールがコードと一致していない可能性があることを認識しています。

iosxcodeuistoryboard
21
Tristan Warner-Smith

私が思いついた解決策は、UICollectionViewDelegateFlowLayoutを実装してsizeForItemAtIndexPathメソッドを実装することだけでした。これは、セルの寸法を使用可能なSize Class寸法と一致するように設定できることを意味します。

ストーリーボードの変更を見ることができず、ユニバーサルデザインを作成してそれぞれで見ることができないため、これはまだ理想的ではありませんさまざまな形式。

私はまだ誰かがより良い選択肢を持っていることを望んでいます。

15
Tristan Warner-Smith

これは、Swiftでコード化された同様のソリューションです。ストーリーボードで両方のセルのスタイルを設定し、任意のサイズのクラスの組み合わせで表示できるようにしました。トレイトコレクションが変更されたら、使用するcellSizeとcellReuseIDを更新し、表示されているすべてのセルを再読み込みするようにcollectionViewに指示します。次に

collectionView(collectionView: UICollectionView,
    layout collectionViewLayout: UICollectionViewLayout,
    sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize

そして

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

（サンプルコードには表示されていません）が呼び出され、セルのサイズを更新したり、セルのストーリーボードのスタイルを更新したりできます。したがって、ストーリーボードで完全に行われるわけではありませんが、Xcodeでより多くのサポートが提供されるまでは十分です。

struct MyCollectionViewConstants{
    static let CELL_ANY_ANY_REUSE_ID = "cell";
    static let CELL_COMPACT_REGULAR_REUSE_ID = "cellSmall"
    static let CELL_ANY_ANY_SIZE = 100;
    static let CELL_COMPACT_REGULAR_SIZE = 70;
}

class MyCollectionView: UICollectionViewController, UICollectionViewDataSource, UICollectionViewDelegateFlowLayout {

    var cellSize = MyCollectionViewConstants.CELL_ANY_ANY_SIZE
    var cellReuseID = MyCollectionViewConstants.CELL_ANY_ANY_REUSE_ID


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

        return CGSize(width: cellSize, height: cellSize)
    }

    override func traitCollectionDidChange(previousTraitCollection: UITraitCollection?) {
        super.traitCollectionDidChange(previousTraitCollection)

        if (self.traitCollection.horizontalSizeClass == UIUserInterfaceSizeClass.Compact
            && self.traitCollection.verticalSizeClass == UIUserInterfaceSizeClass.Regular){
            cellSize = MyCollectionViewConstants.CELL_COMPACT_REGULAR_SIZE
            cellReuseID = MyCollectionViewConstants.CELL_COMPACT_REGULAR_REUSE_ID
        } else {
            cellSize = MyCollectionViewConstants.CELL_ANY_ANY_SIZE
            cellReuseID = MyCollectionViewConstants.CELL_ANY_ANY_REUSE_ID
        }

        self.collectionView.reloadItemsAtIndexPaths(
            self.collectionView.indexPathsForVisibleItems())
    }
}
7
Martin Woolstenhulme

サイズクラス（iPadとiPhone）を実装した後、同じ問題で立ち往生しました。まあ、私は解決策を見つけました。それが役に立てば幸い！

UICollectionViewDelegateFlowLayoutを実装します。

func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize
    {
         var device = UIDevice.currentDevice().model  
         var cellSize:CGSize = CGSizeMake(155, 109)

         if (device == "iPad" || device == "iPad Simulator") {
            cellSize = CGSizeMake(240, 220) 
         }

         return cellSize
    }
1
A.G

Swift 4
こんにちは、開発者仲間、

UICollectionViewCellの高さと幅が同じであれば、これは簡単に実行できます。

enter image description here

ステップ
1。インポート** UICollectionViewDelegateFlowLayout **
2。 UICOllectionViewのsizeForItem IndexPathメソッドを次のように追加します

func collectionView(_ collectionView : UICollectionView,layout collectionViewLayout:UICollectionViewLayout,sizeForItemAt indexPath:IndexPath) -> CGSize {
    return CGSize(width: collectionVw.frame.size.height, height: collectionVw.frame.size.height)
}

注：UICollectionViewの高さをUICollectionViewCellの高さと幅として設定しています。

ハッピーコーディング:)

0
Ariven Nadar