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

SwiftUIではButtonのactionをどのように扱うのか見てみましょう。

Swift 5.3
Xcode 12.4

 

Button

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

ボタンのタップで状態を変化させるために、@State を使うところがポイント。
 

 

ボタンの設定

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

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

「+」ボタンでViewsリストから Button を選んでPreView上の Hello World! の下にドラッグ&ドロップでButtonを配置します。

ContentViewのbodyに直に記述することもできます。

コードでは、

 
actionとそれによる事象を記述していきます。

ボタンをタップするとボタンの文字が「Button Tapped」になるコードは、
 

Buttonの文字は最初の buttonText の設定で 「Button」 ですが
ボタンタップのactionで文字を「Button Tapped」に変更します。
 

@State SwiftUIでのViewは状態を持たないstructなので、そのままではプロパティを変更できない作りになっています。
状態を変更する場合は @State を宣言しメモリの管理を SwiftUIフレームワーク に反映させて値を更新します。

 
Previewでこれを確認してみましょう。

 

Previewでボタンactionの確認

 
Previewでボタンの挙動を確認するために、左上にある丸に三角のアイコン
「Live Preview」ボタンをクリックします。

これでButtonをタップすると、

ボタンの文字が変わりました。

尚、コードがエラーになっていると実行されません
また、Previewがグリーンになっていない場合には「Resume」をもう一度クリックしてみます。

Simulatorを起動させても同じように確認することができます。

 

actionでTextを変更する

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

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

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

 

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

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

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

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

 

Button本体をImageで作る

 
ボタン本体を画像にするために、Image()を設定します。
画像の設定は、以下を参考にしてください。
 

画像をSwiftUIで扱うにはImageを使います。円形のクリッピングや影などが簡単に作れます。
 
例として猫のイラストを2つ、cat_01.png とcat_02.png をAssets.xcassetsに入れます。
ボタンアクションで画像が変わるようにcatsというプロパティを@Stateで設定します。
 

 
ボタンタップで文字列と猫の画像が変わるようにできました。

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

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

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



TECH ACADEMY
iPhoneアプリコース


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



CodeCamp
現役エンジニアによるオンラインプログラミングスクール【CodeCamp】


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



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





–>

シェアする

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

フォローする