[SwiftUI] Button を簡単に作成する

PreviewでもSimulatorと同じようにactionの挙動を反映させて確認がある程度できるようです。ただのレイアウトようのCanvasではありませんね

Swift 5.1
Xcode 11.3.1

 

Button

 
SwiftUIのButtonはUIButtonに比べて柔軟に作られています。最初からボタン枠があるわけではなく、文字だったり画像だったりと
 

 

ボタンの設定

 
基本的な設定には以下の2つが必要です。

  1. タップされたときのaction
  2. タップされるボタン本体がどのようなものか

コードでは、
 

 
具体的にはPreView上でButtonを選んで配置するか

ContentViewのbodyに直に記述することもできます。
ボタンをタップすると「Tapped Button」とprintするコードはこのようになります。
 

Buttonという文字がボタン本体になりますのでこれをタップするとactionが起きる設定です。
Previewでこれを確認してみましょう。

 

Previewでボタンactionの確認

 
Previewでボタンの挙動を確認するために、右下にある三角アイコンの「Play」ボタンをControl+クリック
「Debug Preview」を選択

「Debug Area」が下に現れます。
PreviewでButton文字をクリックするとButton Tappedが表示されます。

もちろん、Simulatorを起動させても同じように確認することはできます。

 

actionでTextを変更する

 
Button actionでTextの文字を変えることをUIKitでやりましたが、これをSwiftUIで同様に作ってみます。

iOSアプリを始めるにあったて、まず簡単な例としてボタンをタップするとラベルの文字が変わるアプリを作ってみたいと思います。アプリ作成の基...

ボタンタップでに文字を変える流れです。
 

 
SwiftUIではToggleを使ってBool値の反転をさせることもできます。

 

三角アイコンの「Play」ボタンを押すとactionが反映されるようになります。
ボタンをタップするとTextが Tapped ! に変わりました。

@State:
Property Wrapper の1つで@Stateを宣言してメモリの管理をSwiftUIフレームワークに反映させて値を更新することができるようにする

VStack:
ViewのレイアウトでVerticalつまり垂直に並べる時に使います。水平方向はHStackです。

Modifiers:
InspectorあるいはPreviewから文字のフォント、色、背景、paddingなどを変更できます。

ボタンを角丸枠にするのも簡単です。Buttonに.overlayの設定

Modifierではこのように見えます。

角丸ボタンになりました。


References:
Button – SwiftUI | Apple Developer Documentation
VStack – SwiftUI | Apple Developer Documentation
State – SwiftUI | Apple Developer Documentation

一人でアプリ開発の限界を感じたら

アプリ開発を始めたけどわからないところがあり、誰かに聞きたいけど周りにはそんな人はいない…あるいは、会社で働いていて日中そんなに時間をとれないなど、オンライン・スクールがいいと思います。


TECH ACADEMY
自宅にいながら1時間でプログラミング基礎を習得

こういうものではアプリ作れないと言う意見もありますが、それは結局本人のやる気があるかないかです。やる気があっても独学では突破しにくいところは教えてもらうのが一番早い。


侍エンジニア塾
侍エンジニア塾 無料体験レッスン



とても簡単なことなのに本やネットの画像だけでは分かりにくいことはあります。実際に質問してピンポイントで教えてもらうと、なんだそんなこと、と言うのがけっこうあります。


CodeCamp
~約20,000名の受講生と300社以上の導入実績~
現役エンジニアのオンライン家庭教師CodeCamp




直接(ネットで)誰か分かる人に聞いた方が早く解決して、上達も早いと思います。


Play Ground
本業と並行してやるには月額制なのがありがたいです。


無料で転職まで
これはiOSアプリ限定ではありませんが無料です
その代わり就職することを前提にしたスクールで「エンジニアになって職を得たい」のであれば手っ取り早いかもしれません

受講料無料:社会人転職コース


誤字脱字、意味不明などのご意見は 謙: e-mail まで
ブックマークしておくと便利です このエントリーをはてなブックマークに追加
Twitter:


シェアする

  • このエントリーをはてなブックマークに追加

フォローする