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

##  前回の記事
　[iOS App Dev Tutorialsを読んでみた。その２](https://qiita.com/shomiya181210/items/b7b44c8d13e0463c49b1)　前回の記事を読んだ後、この記事をご覧ください。
## 今回の範囲
　[Creatng a card view](https://developer.apple.com/tutorials/app-dev-training/creating-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.今回の内容のまとめ
- 今回書いたコード
　<img width="600" alt="![スクリーンショット 2022-12-16 21.55.59.png]" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2918800/35ee3802-d8d8-9887-760c-0bda19aff5e0.png">
##### 次回はデータリストの表示を行います。
#### 　次回　[iOS App Dev Tutorialsを読んで実際にやってみた。その４](https://qiita.com/shomiya181210/items/35ac69a54a92a1bffef2)