こんにちは、動画を放置しにしまくったcyanです。
気付いたら登録者が400人間近でした。
書いている間に400人超えました、ありがとうございます！
このまま500人突破！よろしくお願いします！！笑
今回はSwiftUIを使用して消去、移動可能なListの簡単なアプリを作成しました。
GitHubはこちらです。
NoteListApp
List
今までのTableViewがSwiftUIでListとなっています。
CellもRowとなって、より作成が簡単になりました。
Listの作成方法は中にRowの部分を作成します。
今回のようにForEachでRowのレイアウトを要素分回すこともできますし、
固定の場合は直接記述することもできます。
またはクロージャで配列を取り出し、記述することができます。
下のコードは全て同じ表示結果になります。
Rowの作成方法もSwiftUIをimportしたファイル一つで作成できるようになりました。
普通にレイアウトを作成して、表示する中身を入れる変数を用意します。
@Stateを作成し、
忘れてはいけないこととして、プレビューにもその値を渡してあげます。
今回のまとめ
.onDeleteと.onMoveでリストの移動消去が可能
onDeleteで編集状態時に消去ボタンが出現し、その際の処理を記述することができます。
クロージャで直接処理を記述することができますし、performに処理を記述したメソッドを入れることもできます。
onMoveではリストのRowが移動可能になります。
よく見る三本線が右端に出現し、入れ替えが可能になります。
その入れ替えた場所を保存するために、元の要素を並び替える処理を記述する必要があります。
同じく、クロージャで直接記述するか、メソッドを作成してperformに渡すことができます。
navigationLinkで遷移が簡単に実装できる
遷移する方法は今までsegueで記述することが多かったのですが
SwiftUIではNavigationLinkでViewの遷移を簡単に実装することができます。
destinationに遷移先のViewを渡すだけです。
これは別ファイルの構造体を渡すこともできますし、直接記述することもできます。
実装は簡単で、遷移のアクションとなるオブジェクトをNavigationLinkの中に入れるだけです。
あとがき
とにかく！Listが簡単でした！
今までtableViewのメソッドを書いていたのが嘘のような簡単さでした。
Rowもxibで記述していた時のような処理は全く必要なく、そのままViewを表示する、というような形でした。
作成しているときには知らなかったんですが、ForEach使わなくても直接Cell書けたんですね。。
場合によってはどんなデザインなのかすぐに把握できるのでとても便利だと思います。
消去と移動ってTableViewの中でもなかなか触りたくない部分の一つだったんですが←
ものすごくとっつきやすくなっていました。
本来こんな少ないコードで実装できるものではなかったはずです笑
ただ使う場面が非常に多いものだと思うので、ひたすらありがとうとしか言いようがありません。
もう楽しくてずっと移動と消去を繰り返してました。
にゅって消去ボタンが出るんですよ！！！！楽しいじゃないですか！！！！
さて、ここでTableViewがListとなったとしたらCollectionViewは？という疑問が出てきます。
それはまた次回扱おうかなーと思ってますので、乞うご期待ください！
結論だけ言いますと、
CollectionViewはSwiftUIにはいません。
そのうち出るとかいう話もあるので楽しみに待ちたいと思います。
次回もみてみてください！
参考にしたサイト
Building Lists and Navigation(公式)
SwiftUI Move Rows from List Tutorial
SwiftUIの画面切替
ここまで簡単になるのか、SwiftUIチュートリアル2 〜Listの作成〜
SwiftUI List Tutorial
