投稿

ラベル(Swift)が付いた投稿を表示しています

【SwiftUI】Listを使ってリストを作ってみる

イメージ
この記事の概要 簡単なサンプルアプリを通して、SwiftUIにおけるListの使い方をおさらいします。 目次 この記事の概要 目次 作るもの プロジェクトを作る 完成形 まとめ 参考文献 作るもの 週刊少年ジャンプ連載中の漫画・ハイキュー!!に登場するキャラクター5人の情報をリスト形式にまとめたアプリを作りながら、Listの使い方をまとめようと思います。 完成イメージはこんな感じです。 [図1] 完成イメージ プロジェクトを作る ページ上部のナビゲーションメニューの[New]>[File]より、[SwiftUI View]を選択し、ファイル名を指定。自分の場合は[ListSampleView]と設定します。 [図2-1]  [図2-2] まずキャラクタークラスを定義してあげます。大事なのはCharacterクラスの型をIdentifiableにしておくこと。今回は、背番号(player_number)と氏名(name)、そしてポジション、CV(声優)の4つのプロパティを用意してあげます。idはリストの項目固有のidである、くらいの認識で大丈夫です。 struct   Character :  Identifiable {      var   id :  Int //リストアイテム固有のID      let   player_number :  String //背番号      let   name :  String //名前      let   position :  String //ポジション      let   CV :  String //声優 } それが出来たら、今度はListSampleViewの中に今回用意する配列を書きます。実務であればここの配列はAPIなどから値を取ってくるコードになるのですが、難しくなるので今回は省略し...

【SwiftUI】 タイトルTextの下にサブタイトルTextをつける / Textの間に余白を入れる

イメージ
この記事の概要 SwiftUIで、.subheadLineプロパティを使って、サブタイトルを設定すると同時に、VStackや Hstackの使い方もマスターします。 目次 この記事の概要 目次 前回からの変更点 タイトルTextにサブタイトルを導入しよう サブタイトルにHStackViewを導入してViewを分割しよう 余白を入れよう まとめ 前回からの変更点 よくよく考えたら、ハイキュー!!のロゴってオレンジじゃん......... ということで修正              Text ( "ハイキュー!!" )                  . font (. title )                  . fontWeight (. heavy )                  . foregroundColor ( Color . pink ) から、              Text ( "ハイキュー!!" )                  . font (. title )                  . fontWeight (. heavy )                  . foregroundColor ( Color . orange ) に修正。 タイトルTextにサブタイトルを導入しよう まず、ライブプレビュー画面になっている方は、スマホの横に青い円ボタン...