Swiftでアプリ。 - 簡単!SwiftUI!

基本的なことばかりででは面白くないのでSwiftUIで簡単にできることの紹介です。

SwiftUIというのは便利な部品を提供してくれるものです。最近iPadでもアプリが作れるようになったSwift Playgroundsを使ってみます。

Swift Playgrounds

iPadアプリですがMacでも同じものが使えるのでMacで使っていきます。
アプリを立ち上げて、赤丸の"App"をタップ、クリックします。

開いた状態です。

左側にコードを書いていくファイルを表示する画面。真ん中には実際のアプリのコードを書く画面。そして右側にはアプリを起動した時のプレビュー画面。

これだけで赤い地球儀の画像、"Hello,world"の文字を表示するアプリが完成されています。

SwiftUIの定期部分は

import SwiftUI

struct ContentView: View {
    var body: some View {
      
　　　　　//ここにコードを書いていくと画面表示されます。
        
    }
}

内容についてのコードは

VStack {
            Image(systemName: "globe")
                .imageScale(.large)
                .foregroundColor(.accentColor)
            Text("Hello, world!")
        }

このコードの説明ですが、まず一番上の

VStack

これは"縦に並べなさい！"という命令です。実際に

Image()
Text()

という感じで並んでいます。この"Image()"と"Text()"が命令で

Image()　　・・・　"画像を表示しなさい"という命令
Text() 　　   ・・・　 "文字を表示しなさい"という命令

となっています。

Image()　

Image()を使うときの約束事ですが、( )内は

systemName: "globe"

となっています。"systemName"と書けば"SF Symbols"と呼ばれるアイコンが使えるようになり、その名前を指定できるようになります。この場合は"globe"を指定しています。表示としては地球儀アイコンとなっています、

Text()

Text()ですが"()"内に文字を入れることができます。この場合は"Hello, world!"と書いてあります。

基本的な使い方はカッコ内に必要なことを指定してやれば表示することができます。もう少しカスタマイズしたいという時には"モディファイア"を使います。

この場合だと、Image()の下についている

.imageScale(.large)
.foregroundColor(.accentColor)

がモディファイア"となっています。これを外してみましょう。

            Image(systemName: "globe")
//                .imageScale(.large)
//                .foregroundColor(.accentColor)
            Text("Hello, world!"

"//"はコメントアウトと言ってこの記号のあとの命令は無効となります。

Swift Playgroundsのプレビュー画面はコードを変更したら即更新して新しい表示にしてくれるので画面に変化が現れます。

地球儀の画像が小さくなり、赤かったのが白くなったと思います。ですのでこのモディファイアの役割としては少し大きく、赤くしていたということがわかります。

.imageScale(.large)　・・・　大きさの変更  

.foregroundColor(.accentColor)  ・・・　色の変更

それぞれの()の中の値を変更してみると見た目が変わります。".imageScale()"では

".large"と".medium"と".small"が使えます。

"."と書くと自動で出てくるので選択するだけで変更できます。

".foregroundColor()"では、imageScaleと同じように選択肢が出てくるのでそこから選ぶことができます。カラーの場合はたくさんあるのでスクロールして選ぶこともできます。

新規でアプリ作成として立ち上げただけでまず、画像と文字が簡単に入れることができます。ここから編集をすることで新しいアプリを作ることができます。