はい、それでは第 3 回 [iPhoneアプリ開発] 中学生でもわかるSwiftUI(スフィフト ユーアイ)をはじまめます。今回は 「Image とButton」 について説明します。
★★★(飛ばす)
この動画を最後まで見て頂けましたら
簡単なIPhone画面を作成できるようになります。
(最終結果動画を差し込む)
★★★(飛ばす)
最初にImageについて説明します。まず最初は画像を用意する必要があります。画像に関しては「pixabay」がおすすめです。著作権フリー素材でクレジット表記不要です。
※2022年 1月11日現在
pixabay
無料で高画質かつ商用可の画像が豊富にあります。
| ・商用利用：OK |
| ・クレジット表記：不要 |
| ・改変：可能 |
| ・会員登録：不要 |
画像が用意できたらXcodeのナビゲーターエリアにある「Assets.xcassets」を選択します。「Assets」フォルダ内のナビゲータエリアを「右クリック」もしくは「２本指でクリック」して「New Image Set」を選択してください。名前は「image」ではなく好きな名前に変更ください。今回はわかりやすくするために、「中学生でもわかるSwiftUI」という名前に変更します。準備ができたら、表示したい画像を、このようにドラッグ&ドロップしてください。
以上で準備は完了です。実際に画像を表示してみましょう。このようにコーディングします。
Imageカッコ() 先ほど設定した名前になります。今回ですと「中学生でもわかるSwiftUI」になります。
★一般的に使用される公式
Image(“イメージ名“)
var body: some View {
Image(“中学生でもわかるSwiftUI”)
}これで実行してみます。
このように先ほど取り入れた画像が、表示されていることが確認できます。しかし、表示したい画像を画面いっぱいに表示されてしまいます。ですので、カスタマイズしたいと思います。このようにコーディングしてください。
var body: some View {
Image("中学生でもわかるSwiftUI")
.resizable()
}これで実行してみます。
このようにiPhone画面に全体を表示することができました。
.resizable()はImage()に紐づけることで、Imageで指定した画像に対してカスタマズすることができます。この.(ドット)を日本語の「の」と置き換えると理解しやすいかもしれません。.resizable()はiPhoneの画面サイズに合わせて画像を伸縮します。というプログラムです。しかし、まだ画像をカスタマイズする必要がありますね。縦横比が取り込んだ画像に同じようにしたいと思います。このようにコーディングします。
var body: some View {
Image("中学生でもわかるSwiftUI")
.resizable()
.aspectRatio(contentMode:.fit)
}これで実行してみます。
このように 「中学生でもわかるSwiftUI」画像が綺麗に表示できていることが確認できました。
画像をiPhone画面のトップに表示したい場合は、Imageプログラムの下にSpacer()と書きます。
struct ContentView: View {
var body: some View {
Image(“中学生でもわかる”SwiftUI)
.resizable()
.aspectRatio(contentMode:.fit)
Spacer()
}
}これで実行すると
このようにImage画像がiPhone画面の上から詰めて表示されます。
逆も然りで、画像をiPhone画面のボトム、つまり下に表示したい場合は、Imageプログラムの上にSpacer()と書きます。
struct ContentView: View {
var body: some View {
Spacer()
Image(“中学生でもわかる”SwiftUI)
.resizable()
.aspectRatio(contentMode:.fit)
}
}これで実行すると
このようにImage画像がiPhone画面の下から詰めて表示されます。Spacer()を使うことで上詰めでの表示や下詰めでの表示ができます。Spacer()は応用してVStackやHStackでも使えますので上下左右で表示を変更できます。是非使ってください。
次にButtonについて説明します。Buttonはこのように書きます。
struct ContentView: View {
var body: some View {
Button(action: {
},label: {
})
}
}簡単に説明すると、このaction は { } 中括弧内のプログラムをボタンが押された時に実行します。このlabel は { } 中括弧内のプログラムがボタンの表示方法になります。試しにこのように書いてみましょう。
var box = "OFF"
struct ContentView: View {
var body: some View {
Button(action: {
box = "ON"
},label: {
Text("\(box)")
})
}
}これで実行してみます。
試しに「OFF」ボタンを押下してみましょう。すると、OFFボタンを押下していることが確認できますが、「ON」に表示されていないことが確認できます。
どいうことかと言うと、グローバル変数の「box」には最初”OFF”が入っております。今、ButtonのlabelではText形式の「box」変数を表示するようにしていますね。ですのでiPhone画面には「OFF」ボタンが表示されました。次に、OFFボタンを押すと、Buttonのactionが実行されますので、「box」変数に”ON”を上書きしています。ですので、Buttonのlabelの表示が「ON」に切り替わるはずですが、OFFボタンをいくら押下してもiPhone画面のButtonの表示は「OFF」のままになっています。
実はこれはViewの特性によるものです。プログラム基本的には上から下に向かって１度しか走りません。
つまり変数の中身が変更された後に、ContentViewをもう一度プログラムが実行される必要がありますね。では、どのようにすればよいかと言うと。「@State」という「Property Wrappers」を使います。
@Stateとは、簡単に言うと変数をSwiftUI側が管理させるようにさせるものです。つまり@Stateをつけることで、変数の更新をモニタリングしているイメージになります。変数の更新があった場合、対象の変数を参照しているViewを再度プログラムが実行されます。@StateはViewとbodyの間に書きます。
このように書きます。
struct ContentView: View {
@State var box = "OFF"
var body: some View {
Button(action: {
box = "ON"
},label: {
Text("\(box)")
})
}
}これで実行してみます。試しに「OFF」ボタンを押下してみましょう。すると、このようにButtonの文字が変更されることが確認できました。
補足説明としてButtonをデザインしてみます。このように書きます。
struct ContentView: View {
@State var box = "OFF"
var body: some View {
Button(action: {
box = "ON"
},label:{
Text("\(box)")
.font(.largeTitle)
.frame(width: 280, height: 60, alignment: .center)
.foregroundColor(Color.white)
.background(Color.orange)
.cornerRadius(15,antialiased: true)
})
}
}試しにこれで実行してみます。
このようにTextにカスタムすることでボタンになります。
どいうことかと言うと
.font(.largeTitle).font(.largeTitle)というのはTextを大きく見せます。
.frame(width: 280, height: 60, alignment: .center).frame(width: 280, height: 60, alignment: .center)というのはTextのフレームをボタン風にします。
※widthというのが幅
※heightというのが高さにな理ます。
.foregroundColor(Color.white).foregroundColor(Color.white)というのは文字を白になります。
.background(Color.orange).background(Color.orange)というのは背景色がオレンジになります。
.cornerRadius(15,antialiased: true).cornerRadius(15,antialiased: true)というのはフレームの角を丸くさせるものです。
この「.」ドットをつけることで上に書いてTextに紐づけることができます。
はい、今回はImage とButtonについてということで、Imageは画像を表示するものでしたね、Spacer()を使うことで上下左右に表示できましたね。Spacer()に関してはTextなどでの使えますので、是非使ってみてください。Butonについてはacttionにはボタンに押した時の処理が
変数のスコープというのは、変数には使える所と使えない所がありましたね。
どこでも使えるのがグローバル変数
一部の使えるのがローカル変数
変数の概念の、値を一時的に保持することから、実際に変数に値を入れて表示まで行いました。
次回の講座ではVStack HStack ZStackについての内容となります。是非ご覧ください。
はい以上で、[iPhoneアプリ開発]中学生でもわかるSwiftUIを終了したいと思います。
「ワトソン博士よかったよ〜〜」と思って下さった方は、グッドボタン、バッドボタンどちらでも構いません。
ぜひ押していただけると嬉しいです。コメントもお待ちしております。
※返信はできませんが動画投稿する上で励みになります。
また、ワトソン博士での[iPhoneアプリ開発]中学生でもわかるSwiftUIの応用編はUdemyでご覧頂けます。
決済システムの導入方法などを講座にしております。是非概要欄をご覧ください。
それでは終わります。最後までご静聴頂きありがとうございました。
以上で
第 3 回 中学生でもわかるiPhoneアプリ開発を終了致します。ご視聴いただきありがとうございました。(#^.^#)
参考文献
Image(Apple Developer Documentation)
※個人の見解による意見でございます。参考程度にお願い致します。
2022年 1月11日 著作者 西村太智
コメント