IT アプリ開発

【SwiftUI】SwiftUIの基本形

2021年2月20日


SwiftUIでは、Webでいうhtmlやcssのように記載することができるもので、
今までのswiftではdelegateやviewControllerなど少々難しく、さらには書くコードの量も多かったが、
より直感的に、そしてweb開発をやってた人もハードルが低くiOSアプリ開発に臨める点がいいところかなと思います！

そんなSwiftUIですが、ここでは基本的なSwiftUIの構造について話していきたいと思います！
SwiftUIってどんなもんなのかなど軽ーくわかってもらえればなと思います。

  • structによる表示
  • PreviewProviderでのプレビュー表示
  • VStack、HStack、ZStack
  • Text()、Button()、Image()の3大UI
  • ビルドした際の最初に表示するview(struct)の指定方法

1. structによる表示

swiftUIではstructにviewを継承することで、表示できるようになります。
このviewを継承したstruct単位が1つのまとまった表示となります。

SwiftではViewControllerを継承したクラスが1画面の表示クラスとなるが、

SwiftUIでは以下のようにstructでviewを継承し、var body: some view{}の中にText()などの文字を生成して、そして処理のコードを記載することで画面に表示することができます。

import SwiftUI

struct ContentView: View {
        
    var body: some View {
        // Text()やVStackなど、画面に表示するコンテンツを生成するコード記載する
        
    }
}

※ var body: some view{}の戻り値はviewであり、そのviewの数は10個まで。そのためグループなどで複数のviewを1つにまとめてなどの処理が必要になります。

import SwiftUI
struct ContentView: View {
    
    @State private var show: Bool = false
    
    // Viewで画面全体の枠を意味する
    var body: some View {
        
        // Vstackでdivつまりviewの中でviewというか塊を作る
        VStack{
            //position(x: 100, y: 100)
            //border(/*@START_MENU_TOKEN@*/Color.black/*@END_MENU_TOKEN@*/)
            
            // buttonをクリックしたらPresent遷移
            Button(action: { self.show = true /*またはself.show.toggle() */ }) {
                Text("Present").fontWeight(/*@START_MENU_TOKEN@*/.bold/*@END_MENU_TOKEN@*/).font(.largeTitle)
                }
                .sheet(isPresented: self.$show) {
                    SecondView()
                }
            }
            Text("teeeete")
        }
    
}

2. PreviewProviderでのプレビュー表示

今までは都度ビルドして画面の表示などを確認していました。

swiftUIでは以下のようにPreviewProviderで継承し、プレビューで見たいstructを生成します。例えばContentViewの画面を見たいとしたら、ContentView()と記載します。

そうするとxcodeの画面上で簡単に見ることができ、Webでいう開発者ツールのようにカーソルを当てて余白などをリアルタイムに修正したりすることができます。

import SwiftUI

struct Preview: PreviewProvider {
        
    static var previews: some View {
        // プレビューで確認したいviewを指定する
        ContentView()
    }
}

3.  VStack、HStack、ZStack

htmlタグでいうdivタグのような感じです。
divタグの中にこの後紹介するtextやbuttonを入れます。

項目 説明
VStack y軸方向(Vertical:垂直)に揃える。
HStack x軸方向に揃える。
ZStack z軸方向に揃える。これは画像と文字(テキスト)を重ねたい場合に行う。

基本形：

VStack(){
   /* ここにText()やButton()などを作成する。
      VStackなので上から垂直に配置される。 */
}

HStack(){
   /* ここにText()やButton()などを作成する。
      HStackなので上から垂直に配置される。 */
}

ZStack(){
   /* ここにText()やButton()などを作成する。
      ZStackなので上から垂直に配置される。 */
}

 

さらに入れ子のように、

VStack(){
   Text("a")
   HStack(){
      Text("b")
   }
}

などのようにhtmlのdivタグの中に、divタグを入れる感覚で、
SwiftUIでも同じことができます。

ちなみに、

Vstack(spacing: 15){
   Text("a")
   Text("b")
}

各オブジェクト(上記ではText())ごとに15pxの空白を入れる

4. Text()、Button()、Image()の3大UI

冒頭でも話しましたが、SwiftUIはhtmlやcssのような感じで書くことができる点で
かなり開発のハードルが下がっているのではないかなと思います。

例えば、
Webと比較すると、

項目 Web SwiftUI
文章 pタグ / spanタグ / labelタグなど Text()
ボタン buttonタグ Button()
画像 imgタグ Image()

というように、
SwiftUIでは、struct:view内のコードで
Text()と記載するだけで、画面上に文字が表示されたり、
Button()と記載するだけで、ボタンが
Image()と記載するだけで、画像が
というように簡単に表示させることができます。
※ 引数に値は必要です。

・Text()

Text()
.frame()
.backgroundColor()
.forefont()
のように、ViewはText()という表示するものに対して、frame()やbackgroundColor()などCSS的な要素、つまりはViewの属性を適用していきます。
Textでは当然表示する言葉を入れないとダメなので、
Text("必須") // 必須項目は引数に入れる
.frame() // 必須ではないが表示を変更したりするための属性をそれ以降付与していく
という形になります。
※ ただし、上記のように属性は属性を付与する順番で表示結果が変わることもあるので注意が必要。適用順は上からで、

5. ビルドした際の最初に表示するview(struct)の指定方法

xcodeで開発をしてビルドした際に最初にどのstructを表示したいかがあると思います。
その場合は、SceneDelegate.swiftの以下のメソッド内の、
rootViewに指定する必要があります。

func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) {
        // Use this method to optionally configure and attach the UIWindow `window` to the provided UIWindowScene `scene`.
        // If using a storyboard, the `window` property will automatically be initialized and attached to the scene.
        // This delegate does not imply the connecting scene or session are new (see `application:configurationForConnectingSceneSession` instead).

        // Create the SwiftUI view that provides the window contents.
        let contentView = ContentView()

        // Use a UIHostingController as window root view controller.
        if let windowScene = scene as? UIWindowScene {
            let window = UIWindow(windowScene: windowScene)
            window.rootViewController = UIHostingController(rootView: contentView)
            self.window = window
            window.makeKeyAndVisible()
        }
    }

上記の感じだけでも、swiftUIの操作感はわかったかなと思います。
結局、
表示するオブジェクト.プロパティ(属性操作)
は

6. 文字などの色変更

基本として、以下はよく使うと思うので、覚えておくと良いかもです。
 

文字の色変更。Hello Worldを赤色に変更

Text("Hello World!").foregroundColor(Color.red)

 

フォントサイズや太字、フォントを変更。

Text("Hello World!").font(.system())

 

Hello Worldの文字の背景色を黄色に変更。

Text("Hello World!").background(Color.yellow)

このような感じで、Text()という表示させたいもの（Viewプロトコルに準拠してるもの)に対して、
モディファイアと呼ばれる装飾的なものを適用することでデザインなどの変更ができる。
 

7. 状態変数

通常Webでは、URLを実行するとそのWebサーバへリクエストして、該当のHTMLファイルをサーバから受け取りブラウザに表示します。
そしてまたリンクなりを踏んで別のURLにアクセスすると、WebサーバからまたHTMLファイルを受け取ってブラウザ表示します。
なので、ブラウザ側でそのHTMLファイルを常に保存するわけではなく、破棄してまた新しいHTMLファイルを受け取っての繰り返しになるので、毎回最新の更新された状態のHTMLファイル（画面）が表示されます。
 

しかし、アプリの場合は常にWebでいう画面のプログラム、つまりHTMLファイル的なものは、もうアプリ内に組み込まれています。
そのため、アプリのスクリーンを行ったり来たりしても、最初にスクリーンにアクセスした時に一回そのスクリーンのプログラム処理が走り、再度そのスクリーンに訪れても再度プログラム処理は走りません。
なので画面を再更新するためには、SwiftUIでは状態変数というものを使って実装します。
 

状態変数については下で扱ってます。
 

状態変数State
 

-IT, アプリ開発
-, ,

© 2024 Yosshi Labo. Powered by AFFINGER5