第3回 [iPhoneアプリ開発] 中学生でもわかるSwiftUI入門 ImageとButtonについて

はい、それでは第 3 回 [iPhoneアプリ開発] 中学生でもわかるSwiftUI(スフィフト ユーアイ)をはじまめます。今回は 「Image とButton」 について説明します。

★★★(飛ばす)
この動画を最後まで見て頂けましたら
簡単なIPhone画面を作成できるようになります。
(最終結果動画を差し込む)
★★★(飛ばす)

★Imageについて

 最初にImageについて説明します。まず最初は画像を用意する必要があります。画像に関しては「pixabay」がおすすめです。著作権フリー素材でクレジット表記不要です。
※2022年 1月11日現在

pixabay
無料で高画質かつ商用可の画像が豊富にあります。

5b0a79df0030b9117fd8578840d1dc07.png.webp
・商用利用:OK
・クレジット表記:不要
・改変:可能
・会員登録:不要
★Image画像をプロジェクトに取り込んでみましょう。

 画像が用意できたらXcodeのナビゲーターエリアにある「Assets.xcassets」を選択します。「Assets」フォルダ内のナビゲータエリアを「右クリック」もしくは「2本指でクリック」して「New Image Set」を選択してください。名前は「image」ではなく好きな名前に変更ください。今回はわかりやすくするために、「中学生でもわかるSwiftUI」という名前に変更します。準備ができたら、表示したい画像を、このようにドラッグ&ドロップしてください。

SwiftUI_3_2.tiff



以上で準備は完了です。実際に画像を表示してみましょう。このようにコーディングします。
Imageカッコ() 先ほど設定した名前になります。今回ですと「中学生でもわかるSwiftUI」になります。

★一般的に使用される公式
Image(“イメージ名“)

var body: some View {
    Image(“中学生でもわかるSwiftUI”)
}

これで実行してみます。

SwiftUI_3_3.tif

このように先ほど取り入れた画像が、表示されていることが確認できます。しかし、表示したい画像を画面いっぱいに表示されてしまいます。ですので、カスタマイズしたいと思います。このようにコーディングしてください。

var body: some View {
    Image("中学生でもわかるSwiftUI")
        .resizable()
}

これで実行してみます。

SwiftUI_3_4.tif

このようにiPhone画面に全体を表示することができました。

★補足説明として

.resizable()はImage()に紐づけることで、Imageで指定した画像に対してカスタマズすることができます。この.(ドット)を日本語の「の」と置き換えると理解しやすいかもしれません。.resizable()はiPhoneの画面サイズに合わせて画像を伸縮します。というプログラムです。しかし、まだ画像をカスタマイズする必要がありますね。縦横比が取り込んだ画像に同じようにしたいと思います。このようにコーディングします。

var body: some View {
    Image("中学生でもわかるSwiftUI")
        .resizable()
        .aspectRatio(contentMode:.fit)
}

これで実行してみます。

SwiftUI_3_5-2.tif

このように 「中学生でもわかる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について説明します。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の特性によるものです。プログラム基本的には上から下に向かって1度しか走りません。
つまり変数の中身が変更された後に、ContentViewをもう一度プログラムが実行される必要がありますね。では、どのようにすればよいかと言うと。「@State」という「Property Wrappers」を使います。

@Stateについて

 @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をデザインする

補足説明として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に紐づけることができます。

他にもButtonを多く使用する事例の紹介

★終わり

 はい、今回は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日 著作者 西村太智

最近の記事

  • 関連記事
  • おすすめ記事
  • 特集記事

コメント

この記事へのコメントはありません。

CAPTCHA


PAGE TOP