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

botman_blue iOS

Xcode-12.4 Swift-5.3 iOS-14.0

はじめに

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

Views and Controls

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

Text

text

Text

UILabel 相当?

ドキュメント:Text

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

TextField

UITextField, UITextView 相当?

ドキュメント:TextField

簡易実装。

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

style

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

text_field_style

  • DefaultTextFieldStyle
  • PlainTextFieldStyle
  • RoundedBorderTextFieldStyle
  • SquareBorderTextFieldStyle
    macOS 用

ドキュメント:TextFieldStyle

SecureField

UITextFieldsecureTextEntry = true 相当?

ドキュメント:SecureField

簡易実装。

TextEditor

UITextView 相当?

ドキュメント:TextEditor

簡易実装。

Images

images

Image

UIImage 相当?

ドキュメント:Image

簡易実装。

AsyncImage

iOS 15 以上なので割愛。

ドキュメント:AsyncImage

Buttons

buttons

Button

UIButton 相当?

ドキュメント:Button

簡易実装。

style

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

button_style

  • DefaultButtonStyle
  • BorderlessButtonStyle
  • CardButtonStyle
    tvOS 用
  • LinkButtonStyle
    macOS 用
  • PlainButtonStyle

ドキュメント:PrimitiveButtonStyle

EditButton

UIViewControllereditButton 相当?

ドキュメント:EditButton

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

PasteButton

macOS 用なので割愛。

ドキュメント:PasteButton

Controls

controls

Link

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

ドキュメント:Link

簡易実装。

Menu

ドロップダウンのようなやつ。

ドキュメント:Menu

簡易実装。

style

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

menu_style

  • DefaultMenuStyle
  • BorderlessButtonMenuStyle
  • BorderedButtonMenuStyle
    macOS 用

ドキュメント:MenuStyle

Value Selectors

selectors

Toggle

UISwitch 相当?

ドキュメント:Toggle

簡易実装。

style

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

toggle_style

  • DefaultToggleStyle
  • ButtonToggleStyle
    iOS 15 以上
  • CheckboxToggleStyle
    macOS 用
  • SwitchToggleStyle

ドキュメント:ToggleStyle

Slider

UISlider 相当?

ドキュメント:Slider

簡易実装。

Stepper

UIStepper 相当?

ドキュメント:Stepper

簡易実装。

Picker

UIPicker 相当?

ドキュメント:Picker

簡易実装(最初のラベルはなんだろう?)。

style

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

   
picker picker_menu
  • DefaultPickerStyle
  • InlinePickerStyle
    Wheel との違いがわからない。。。
  • MenuPickerStyle
    項目5つ以上のときに使う?
  • RadioGroupPickerStyle
    macOS 用
  • SegmentedPickerStyle
    項目2〜5のときに使う?
  • WheelPickerStyle
    Inline との違いがわからない。。。

ドキュメント:PickerStyle

DatePicker

UIDatePicker 相当?

ドキュメント:DatePicker

簡易実装。

style

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

date_style

  • DefaultDatePickerStyle
  • CompactDatePickerStyle
  • FieldDatePickerStyle
    macOS 用
  • GraphicalDatePickerStyle
  • StepperFieldDatePickerStyle
    macOS 用
  • WheelDatePickerStyle

ドキュメント:DatePickerStyle

ColorPicker

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

ドキュメント:ColorPicker

簡易実装。

Value Indicators

indicators

Label

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

ドキュメント:Label

簡易実装。

style

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

label_style

  • DefaultLabelStyle
  • IconOnlyLabelStyle
  • TitleAndIconLabelStyle
    iOS 14.5 以上
  • TitleOnlyLabelStyle

ドキュメント:LabelStyle

ProgressView

UIProgressView 相当?

ドキュメント:ProgressView

簡易実装。

style

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

progress

  • DefaultProgressViewStyle
  • LinearProgressViewStyle
  • CircularProgressViewStyle

ドキュメント:ProgressViewStyle

Gauge

watchOS 用なので割愛。

ドキュメント:Gauge

Localization

LocalizedStringKey

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

ドキュメント:LocalizedStringKey

簡易実装。

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

Infrequently Used Views

EmptyView

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

ドキュメント: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.

ドキュメント:EquatableView

AnyView

型を消してくれるやつ?

ドキュメント:AnyView

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

TupleView

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

A View created from a swift tuple of View values.

ドキュメント:TupleView

Deprecated Views

Deprecated になったやつ。

  • MenuButton
  • PullDownButton
  • Alert
  • ActionSheet

Deprecated Views and Controls

おわりに

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

View Layout and Presentation

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

参考

コメント

  1. […] まとめーその1 […]

  2. […] まとめーその1 […]

タイトルとURLをコピーしました