iOS App Dev Tutorialsを読んで実際にやってみた。その３

前回の記事

　iOS App Dev Tutorialsを読んでみた。その２　前回の記事を読んだ後、この記事をご覧ください。

今回の範囲

　Creatng a card view
　第３回目はカードビューを作成する。

内容の要約

1.カラーテーマを作成する。

• Xcodeを開き新しくModelsという新しい新しいグループを作成する。そのグループで新しくTheme.swiftというファイルを作成する。
• 列挙型[enum]を使用して色のカタログを作る。

Theme.swift

enum Theme: String {
    case bubblegum
    case buttercup
    case indigo
    case lavender
    case magenta
    case navy
    case orange
    case oxblood
    case periwinkle
    case poppy
    case purple
    case seafoam
    case sky
    case tan
    case teal
    case yellow
}

• 入力された値に応じて色を返すColorというという名前のプロパティを追加する。

Theme.swift

var accentColor: Color {
    switch self {
    case .bubblegum, .buttercup, .lavender, .orange, .periwinkle, .poppy, .seafoam, .sky, .tan, .teal, .yellow: return .black
    case .indigo, .magenta, .navy, .oxblood, .purple: return .white
    }
}
var mainColor: Color {
    Color(rawValue)
}

2.毎日のスクラム モデルを作成する。

• ModelsのグループにDailyScrumという名前の新しいファイルを作成する。
• DailyScrum という構造体を作成する。

DailyScrum.swift

struct DailyScrum {
    var title: String
    var attendees: [String]
    var lengthInMinutes: Int
    var theme: Theme
}

• サンプルデータを入れるために拡張機能を追加する。

DailyScrum.swift

extension DailyScrum {
    static let sampleData: [DailyScrum] =
    [
        DailyScrum(title: "アプリ開発", attendees: ["A男", "B男", "C男", "D男"], lengthInMinutes: 10, theme: .yellow),
        DailyScrum(title: "アプリデザイン", attendees: ["E男", "F男", "G男", "H男", "I男"], lengthInMinutes: 5, theme: .orange),
        DailyScrum(title: "発表会", attendees: ["J男", "K男", "L男", "M男", "N男", "O男", "P男", "Q男", "R男", "S男"], lengthInMinutes: 5, theme: .poppy)
    ]
}

3.カードビューを作成する。

• CardViewという名前の新しいSwiftUI Viewファイルを作成する。
• DailyScrumという名前の定数を追加する。

CardView.swift

 let scrum: DailyScrum

• CardViewという名前の静的変数を作成し、初期値にする。

CardView.swift

static var scrum = DailyScrum.sampleData[0]

• プレビューの背景色を指定する。

CardView.swift

.background(scrum.theme.mainColor)

• 修飾子を使用してプレビュー サイズを設定します。

CardView.swift

.previewLayout(.fixed(width: 400, height: 60))

• Textスクラムのタイトルを表示し、フォント スタイルを見出しに設定する。

CardView.swift

Text(scrum.title)
            .font(.headline)

• Labelを追加してから、出席者数を表示するためSpacerにHStackを埋め込みます。

CardView.swift

Spacer()
HStack {
    Label("\(scrum.attendees.count)", systemImage: "person.3")
}

• SpaceraとLabel会議の長さを表示するa を追加します。

CardView.swift

Spacer()
Label("\(scrum.lengthInMinutes)", systemImage: "clock")

• カードビューの長さを２０に設定する。

CardView.swift

.padding(.trailing, 20)

4.ラベル スタイルをカスタマイズする.

• TrailingIconLabelStyle.swiftという名前の新しい Swift ファイルを作成してSwSwいftUIをインポートする。
• 新しい構造体を作成します

TrailingIconLabelStyle.swift

import SwiftUI

struct TrailingIconLabelStyle: LabelStyle {

}

• 空の関数makeBodyを作成し、HStackを追加する。

TrailingIconLabelStyle.swift

func makeBody(configuration: Configuration) -> some View {
   HStack {
        
  }
}

• HStackの中にconfiguration.titleとconfiguration.iconを追加します。

TrailingIconLabelStyle.swift

configuration.title
configuration.icon

• LabelStyletrailingIconという名前の静的プロパティを作成する拡張機能を追加します。

TrailingIconLabelStyle.swift

extension LabelStyle where Self == TrailingIconLabelStyle {
    static var trailingIcon: Self { Self() }
}

• CardView.swiftファイルに戻って新しいラベルスタイルlengthInMinutesに置き換える

CardView.swift

.labelStyle(.trailingIcon)

5.カード ビューにアクセスできるようにする。

• スクラムのタイトルを表示するテキスト ビューに修飾子を追加します。

CardView.swift

.accessibilityAddTraits(.isHeader)

• アクセシビリティ修飾子を使用して、最初のHStackの内容を説明するラベルを追加します。

CardView.swift

.accessibilityLabel("\(scrum.attendees.count) attendees"

6.今回の内容のまとめ

• 今回書いたコード
  　

次回はデータリストの表示を行います。

　次回　iOS App Dev Tutorialsを読んで実際にやってみた。その４