【SwiftUI入門】コンポーネントまとめーその１

はじめに

SwiftUI のコンポーネントまとめです。下記ドキュメントにあるやつをまとめました（ターゲットは iOS14 です）。

ソースはこちら↓↓↓
GitHubソース

Text

UILabel 相当？

@frozen struct Text

1	@frozen struct Text

ドキュメント：Text

簡易実装。フォント、文字色、下線などいろいろ設定できる。

Text("Hello, world!")

1	Text("Hello, world!")

TextField

UITextField, UITextView 相当？

struct TextField<Label> where Label : View

1	struct TextField<Label> where Label : View

ドキュメント：TextField

簡易実装。

@State private var text: String = ""

TextField("PlaceHolder",text: $text) { isEditing in
    // 編集開始と終了時呼ばれる
    print(isEditing)
} onCommit: {
    // returnキー押下時に呼ばれる
    print("Commit")
}

@State private var text: String = ""

TextField("PlaceHolder",text: $text) { isEditing in

// 編集開始と終了時呼ばれる

print(isEditing)

} onCommit: {

// returnキー押下時に呼ばれる

print("Commit")

}

キーボード表示時に自動スクロールして、return 押下でキーボード閉じてくれた！

style

以下の style があるようです。

DefaultTextFieldStyle
PlainTextFieldStyle
RoundedBorderTextFieldStyle
SquareBorderTextFieldStyle
macOS 用

ドキュメント：TextFieldStyle

SecureField

UITextField の secureTextEntry = true 相当？

struct SecureField<Label> where Label : View

1	struct SecureField<Label> where Label : View

ドキュメント：SecureField

簡易実装。

@State private var text: String = ""

SecureField("PlaceHolder", text: $text) {
    print("Commit")
}

@State private var text: String = ""

SecureField("PlaceHolder", text: $text) {

print("Commit")

}

TextEditor

UITextView 相当？

struct TextEditor

1	struct TextEditor

ドキュメント：TextEditor

簡易実装。

@State private var text: String = ""

TextEditor(text: $text)

@State private var text: String = ""

TextEditor(text: $text)

Images

Image

UIImage 相当？

@frozen struct Image

1	@frozen struct Image

ドキュメント：Image

簡易実装。

Image(systemName: "trash")

1	Image(systemName: "trash")

AsyncImage

iOS 15 以上なので割愛。

struct AsyncImage<Content> where Content : View

1	struct AsyncImage<Content> where Content : View

ドキュメント：AsyncImage

Buttons

Button

UIButton 相当？

struct Button<Label> where Label : View

1	struct Button<Label> where Label : View

ドキュメント：Button

簡易実装。

Button("Button") {
  print("Tap")
}

Button("Button") {

print("Tap")

}

style

以下のような style があるようです。

DefaultButtonStyle
BorderlessButtonStyle
CardButtonStyle
tvOS 用
LinkButtonStyle
macOS 用
PlainButtonStyle

ドキュメント：PrimitiveButtonStyle

EditButton

UIViewController の editButton 相当？

struct EditButton

1	struct EditButton

ドキュメント：EditButton

簡易実装。押下すると「Edit」と「Done」で切り替わる。たぶん NavigationView と併用するやつ。

EditButton()

1	EditButton()

PasteButton

macOS 用なので割愛。

struct PasteButton

1	struct PasteButton

ドキュメント：PasteButton

Controls

Link

その名の通りリンク。外部ブラウザで指定 URL に遷移する。

struct Link<Label> where Label : View

1	struct Link<Label> where Label : View

ドキュメント：Link

簡易実装。

Link("am10ぶろぐ", destination: URL(string: "https://www.am10.blog/")!)

1	Link("am10ぶろぐ", destination: URL(string: "https://www.am10.blog/")!)

Value Selectors

Toggle

UISwitch 相当？

struct Toggle<Label> where Label : View

1	struct Toggle<Label> where Label : View

ドキュメント：Toggle

簡易実装。

@State private var isOn = false

Toggle("Toggle", isOn: $isOn)

@State private var isOn = false

Toggle("Toggle", isOn: $isOn)

style

以下のような style があるようです。

DefaultToggleStyle
ButtonToggleStyle
iOS 15 以上
CheckboxToggleStyle
macOS 用
SwitchToggleStyle

ドキュメント：ToggleStyle

Slider

UISlider 相当？

struct Slider<Label, ValueLabel> where Label : View, ValueLabel : View

1	struct Slider<Label, ValueLabel> where Label : View, ValueLabel : View

ドキュメント：Slider

簡易実装。

@State private var value = 50.0

Slider(
    value: $value,
    in: 0...100,
    onEditingChanged: { editing in
        // 編集開始と終了時に呼ばれる
        print("editing: \(editing), value: \(value)")
    }
)

@State private var value = 50.0

Slider(

value: $value,

in: 0...100,

onEditingChanged: { editing in

// 編集開始と終了時に呼ばれる

print("editing: \(editing), value: \(value)")

}

)

Stepper

UIStepper 相当？

struct Stepper<Label> where Label : View

1	struct Stepper<Label> where Label : View

ドキュメント：Stepper

簡易実装。

@State private var value = 50.0

Stepper("Stepper", value: $value, step: 5) { editing in
    // 編集開始と終了時に呼ばれる
    print("editing: \(editing), value: \(value)")
}

@State private var value = 50.0

Stepper("Stepper", value: $value, step: 5) { editing in

// 編集開始と終了時に呼ばれる

print("editing: \(editing), value: \(value)")

}

Picker

UIPicker 相当？

struct Picker<Label, SelectionValue, Content> where Label : View, SelectionValue : Hashable, Content : View

1	struct Picker<Label, SelectionValue, Content> where Label : View, SelectionValue : Hashable, Content : View

ドキュメント：Picker

簡易実装（最初のラベルはなんだろう？）。

@State private var value = 1

Picker("Value", selection: $value) {
    Text("Value1").tag(0)
    Text("Value2").tag(1)
    Text("Value3").tag(2)
}

@State private var value = 1

Picker("Value", selection: $value) {

Text("Value1").tag(0)

Text("Value2").tag(1)

Text("Value3").tag(2)

}

style

以下の style があるようです。

DefaultPickerStyle
InlinePickerStyle
Wheel との違いがわからない。。。
MenuPickerStyle
項目５つ以上のときに使う？
RadioGroupPickerStyle
macOS 用
SegmentedPickerStyle
項目２〜５のときに使う？
WheelPickerStyle
Inline との違いがわからない。。。

ドキュメント：PickerStyle

DatePicker

UIDatePicker 相当？

struct DatePicker<Label> where Label : View

1	struct DatePicker<Label> where Label : View

ドキュメント：DatePicker

簡易実装。

@State private var date = Date()

DatePicker(
  "Date",
  selection: $date,
  displayedComponents: [.date, .hourAndMinute]
)

@State private var date = Date()

DatePicker(

"Date",

selection: $date,

displayedComponents: [.date, .hourAndMinute]

)

style

以下のような style があるようです。

DefaultDatePickerStyle
CompactDatePickerStyle
FieldDatePickerStyle
macOS 用
GraphicalDatePickerStyle
StepperFieldDatePickerStyle
macOS 用
WheelDatePickerStyle

ドキュメント：DatePickerStyle

ColorPicker

ついに登場したカラーピッカー！（AMColorPickerもよかったら使ってください。。。）

struct ColorPicker<Label> where Label : View

1	struct ColorPicker<Label> where Label : View

ドキュメント：ColorPicker

簡易実装。

@State private var color = Color(.systemBlue)

ColorPicker("Color", selection: $color, supportsOpacity: true)

@State private var color = Color(.systemBlue)

ColorPicker("Color", selection: $color, supportsOpacity: true)

Value Indicators

Label

文字とアイコンが表示できる。その名の通りラベル？

struct Label<Title, Icon> where Title : View, Icon : View

1	struct Label<Title, Icon> where Title : View, Icon : View

ドキュメント：Label

簡易実装。

Label("Trash", systemImage: "trash")

1	Label("Trash", systemImage: "trash")

style

以下のような style があるようです。

DefaultLabelStyle
IconOnlyLabelStyle
TitleAndIconLabelStyle
iOS 14.5 以上
TitleOnlyLabelStyle

ドキュメント：LabelStyle

ProgressView

UIProgressView 相当？

struct ProgressView<Label, CurrentValueLabel> where Label : View, CurrentValueLabel : View

1	struct ProgressView<Label, CurrentValueLabel> where Label : View, CurrentValueLabel : View

ドキュメント：ProgressView

簡易実装。

ProgressView(value: 0.5)

1	ProgressView(value: 0.5)

style

以下のスタイルがあるようです。

DefaultProgressViewStyle
LinearProgressViewStyle
CircularProgressViewStyle

ドキュメント：ProgressViewStyle

Gauge

watchOS 用なので割愛。

struct Gauge<Label, CurrentValueLabel, BoundsLabel, MarkedValueLabels> where Label : View, CurrentValueLabel : View, BoundsLabel : View, MarkedValueLabels : View

1	struct Gauge<Label, CurrentValueLabel, BoundsLabel, MarkedValueLabels> where Label : View, CurrentValueLabel : View, BoundsLabel : View, MarkedValueLabels : View

ドキュメント：Gauge

Localization

LocalizedStringKey

Text, Toggle, Picker などで文字列を設定すると LocalizedStringKey を作成してローカライズファイルを検索してくれるらしい。

@frozen struct LocalizedStringKey

1	@frozen struct LocalizedStringKey

ドキュメント：LocalizedStringKey

簡易実装。

Localizable.strings に下記のように記載。

// en
"hoge" = "Hoge";

// ja
"hoge" = "ほげ";

// en

"hoge" = "Hoge";

// ja

"hoge" = "ほげ";

// 英：Hoge, 日：ほげと表示される。
Text("hoge")

1 2	// 英：Hoge, 日：ほげと表示される。 Text("hoge")

Infrequently Used Views

EmptyView

View が空であることを示す View。たぶん自分で生成することはあんまりない？

@frozen struct EmptyView

1	@frozen struct EmptyView

ドキュメント：EmptyView

簡易実装。

EmptyView()

1	EmptyView()

EquatableView

子 View が頻繁に更新されないように使うやつ？

A view type that compares itself against its previous value and prevents its child updating if its new value is the same as its old value.

@frozen struct EquatableView<Content> where Content : Equatable, Content : View

1	@frozen struct EquatableView<Content> where Content : Equatable, Content : View

ドキュメント：EquatableView

AnyView

型を消してくれるやつ？

@frozen struct AnyView

1	@frozen struct AnyView

ドキュメント：AnyView

たぶんこんな感じでいろんな型の View 返したいときとかに使う？

func makeView(isHoge: Bool) -> AnyView {
    if isHoge {
        return AnyView(HogeView())
    }
    return AnyView(FugaView())
}

func makeView(isHoge: Bool) -> AnyView {

if isHoge {

return AnyView(HogeView())

}

return AnyView(FugaView())

}

TupleView

うーん。これはちょっとどういうときに使うやつなのかわからない。。。

A View created from a swift tuple of View values.

@frozen struct TupleView<T>

1	@frozen struct TupleView<T>

ドキュメント：TupleView

Deprecated Views

Deprecated になったやつ。

MenuButton
PullDownButton
Alert
ActionSheet

Deprecated Views and Controls

おわりに

List とかないなと思ったら別のページにあるみたいです。

View Layout and Presentation

こちらもまた別の機会にまとめたいと思います。

参考

https://amzn.to/4118Aol

はじめに

Text

Text

TextField

style

SecureField

TextEditor

Images

Image

AsyncImage

Buttons

Button

style

EditButton

PasteButton

Controls

Link

Menu

style

Value Selectors

Toggle

style

Slider

Stepper

Picker

style

DatePicker

style

ColorPicker

Value Indicators

Label

style

ProgressView

style

Gauge

Localization

LocalizedStringKey

Infrequently Used Views

EmptyView

EquatableView

AnyView

TupleView

Deprecated Views

おわりに

参考

コメント