WaterfallGrid

ウォーターフォールグリッド

Swiftuiの滝グリッドレイアウトビュー。

特徴

• コンテンツの不規則なグリッド。
• 列数デバイスの方向ごとに異なります。
• カスタマイズ可能な間隔とグリッドパディング。
• 水平または垂直のスクロール方向。
• アイテムの更新はアニメーション化できます。

使用法

初期化

データのコレクションを渡すことにより、コレクションの要素を表示するグリッドと、コレクション内の各要素のビューを提供する閉鎖を作成できます。グリッドは、供給された閉鎖を使用して、コレクション内の各要素を子どもビューに変換します。

WaterfallGridは、識別可能なデータ（swiftui.listなど）で動作します。データを2つの方法のいずれかで識別できるようにすることができます。データを渡すことにより、各要素を一意に識別するプロパティへの重要なパスを渡すか、データ型を識別可能なプロトコルに適合させることによって。

例1

キーパスによって識別されたデータのコレクションからのタイプImageのビューのグリッド。

 WaterfallGrid ( ( 0 ..< 10 ) , id :  . self ) { index in
  Image ( " image ( index ) " )
    . resizable ( )
    . aspectRatio ( contentMode : . fit )
}

例2

IdentifiableデータのコレクションからのタイプRectangleViewのビューのグリッド。

 WaterfallGrid ( rectangles ) { rectangle in
  RectangleView ( rectangle : rectangle )
}

または、このような単純なケースの場合、

 WaterfallGrid ( rectangles , content : RectangleView . init )

グリッドスタイル

グリッドの外観をカスタマイズするには、 gridStyle関数を呼び出し、カスタマイズするパラメーターを渡します。

列

 WaterfallGrid ( cards ) { card in
  CardView ( card : card )
}
. gridStyle ( columns : 2 ) 

 WaterfallGrid ( cards , content : CardView . init )
. gridStyle (
  columnsInPortrait : 2 ,
  columnsInLandscape : 3
)

間隔とパディング

 WaterfallGrid ( rectangles , content : RectangleView . init )
. gridStyle ( spacing : 8 )
. padding ( EdgeInsets ( top : 16 , leading : 8 , bottom : 16 , trailing : 8 ) )

アニメーション

 WaterfallGrid ( rectangles , content : RectangleView . init )
. gridStyle ( animation : . easeInOut ( duration : 0.5 ) )

スクロール動作

scrollview＆indicatorsオプションに埋め込みます

 ScrollView ( showsIndicators : true ) {
  WaterfallGrid ( rectangles , content : RectangleView . init )
}

水平スクロール方向

 ScrollView ( . horizontal ) {
  WaterfallGrid ( rectangles , content : RectangleView . init )
  . scrollOptions ( direction : . horizontal )
}

完全な例

 ScrollView ( . horizontal , showsIndicators : false ) {
  WaterfallGrid ( cards ) { card in
    CardView ( card : card )
  }
  . gridStyle (
    columnsInPortrait : 2 ,
    columnsInLandscape : 3 ,
    spacing : 8 ,
    animation : . easeInOut ( duration : 0.5 )
  )
  . scrollOptions ( direction : . horizontal )
  . padding ( EdgeInsets ( top : 16 , leading : 8 , bottom : 16 , trailing : 8 ) )
} 

サンプルアプリ

より詳細でインタラクティブな例については、 WaterfallGridSampleアプリを調べてください。

インストール

Swiftパッケージマネージャー

アプリの依存関係

[ファイル]> [Swiftパッケージ]> [パッケージの依存関係の追加]を選択し、リポジトリURLを入力します（アプリにパッケージの依存関係を追加）

パッケージの依存関係

Package.swift内の依存関係として追加します。swiftマニフェスト：

dependencies: [
  . package ( url : " https://github.com/paololeonardi/WaterfallGrid.git " , from : " 1.1.0 " )
]

cocoapods

次の行をPodfileに追加して、Cocoapods経由でWaterfallGridをインストールできます。

 pod 'WaterfallGrid' , '~> 1.1.0'

pod installコマンドを実行してライブラリをダウンロードし、Xcodeプロジェクトに統合します。

移行ガイド

• ウォーターフォールグリッド1.0.0移行ガイド

バージョン化

利用可能なバージョンについては、このリポジトリのリリースを参照してください。

貢献

貢献は大歓迎です。プルリクエストを提出する前に、実装を計画および議論する前に、githubの問題を作成してください。

著者

• Paolo Leonardi（@paololeonardi）

クレジット

ウォーターグリッドは、次のプロジェクトに触発されました。

• qgrid -https：//github.com/q-mobile/qgrid
• グリッド-https：//github.com/swiftuiextensions/grid
• Swiftui Lab -https：//swiftui-lab.com

ライセンス

WaterfallGridはMITライセンスの下で利用できます。詳細については、ライセンスファイルを参照してください。