LoginSignup
2

posted at

【SwiftUI】iOS16から追加されたLabeledContentとは?

はじめに

iOS16からLabeledContentというものが追加されていました。
LabeledContentってLabelとなにが違うのって思ったのでちょっと調べてみました。

違い

Simulator Screen Shot - iPhone 14 - 2022-11-24 at 20.29.07.png

LabeledContentはUITableViewCellのAccessoryType的なことができる機能っぽいですかね。
ただ、AccessoryTypeより自由度が高そうです。

実装方法

基本形

Contentの中には何でもいれることができます。

struct ContentView: View {
    var body: some View {
        LabeledContent {
            Text("SubTitle")
        } label: {
            Text("Title")
        }
    }
}

URL

struct ContentView: View {
    private let url = "https://qiita.com/SNQ-2001"
    var body: some View {
        List {
            LabeledContent(
                "URL",
                value: URL(string: url)!,
                format: .url.path(.omitIfHTTPFamily)
            )
        }
        .listStyle(.grouped)
    }
}

スクリーンショット 2022-11-24 20.59.49.png

日付

struct ContentView: View {
    var body: some View {
        List {
            LabeledContent(
                "Data",
                value: Date.now,
                format: .dateTime.day()
            )
        }
        .listStyle(.grouped)
    }
}

スクリーンショット 2022-11-24 21.07.03.png

パーセント

うまく表示できなかったので空白にしておきます。
誰かアドバイスください。
国によってパーセントの表記が違うのが原因?

数値

小数点を四捨五入しています。

struct ContentView: View {
    var body: some View {
        List {
            LabeledContent(
                "数値",
                value: 50.51142535,
                format: .number.notation(.compactName)
            )
        }
        .listStyle(.grouped)
    }
}

スクリーンショット 2022-11-24 21.12.34.png

おわり

めっちゃ便利なコンポーネントです。
iOS16からしか使えないので出番はまだないと思いますが、これからが楽しみです。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
2