ソフトウェアエンジニアの技術ブログ：Software engineer tech blog

デバイスのディスプレイの大きさによってポイント数、画像サイズ、スケールなどが異なる

MakeAppIconで1枚の画像からアイコンを自動生成してくる

MyJanken/Assets.xcassets/AppIcon.appiconset にコピー&ペーストする

アイコンが追加されている

なんかiPhoneに派生して凄いことになってるな

変数では通常値を変更できないが、@Stateで値を更新できるようになる
swiftは型推論を実装している

swift基本型: int, Uint(符号なし), Float, Double, String, Bool

初期値をnullとして、タップされたらグーに変わる

        VStack {
            
            if answerNumber == 0 {
                Text("これからじゃんけんをします")
            } else if answerNumber == 1 {
                Image("gu")
                    .resizable()
                    .aspectRatio(contentMode: .fit)
                Text("グー")
            } else if answerNumber == 2 {
                
            } else {
                
            }
            
            
            Button(action: {
                print("タップされたよ!")
                answerNumber = Int.random(in: 1...3)
            }) {
                Text("じゃんけんする!")
            }
        }

数値をランダムに算出するものを関数(function)と呼ぶ

同じジャンケンが続かないようにする
repeat {} while で繰り返し処理する

            Button(action: {
                answerNumber = Int.random(in: 1...3)
                var newAnswerNumber = 0
                
                repeat {
                    newAnswerNumber = Int.random(in: 1...3)
                } while answerNumber == newAnswerNumber
                answerNumber = newAnswerNumber
            }) {
                Text("じゃんけんする!")
            }

スタイリング

                Text("じゃんけんする!")
                    .frame(maxWidth: .infinity)
                    .frame(height: 100)
                    .font(.title)
                    .background(Color.pink)
                    .foregroundColor(Color.white)

こちらで完成

var body: some View {
        
        VStack {
            
            if answerNumber == 0 {
                Spacer()
                Text("これからじゃんけんをします")
                    .padding(.bottom)
            } else if answerNumber == 1 {
                Image("gu")
                    .resizable()
                    .aspectRatio(contentMode: .fit)
                Text("グー")
                Spacer()
            } else if answerNumber == 2 {
                Image("choki")
                    .resizable()
                    .aspectRatio(contentMode: .fit)
                Text("チョキ")
                    .padding(.bottom)
                Spacer()
            } else {
                Image("pa")
                    .resizable()
                    .aspectRatio(contentMode: .fit)
                Text("パー")
                    .padding(.bottom)
                Spacer()
            }
            
            
            Button(action: {
                answerNumber = Int.random(in: 1...3)
                var newAnswerNumber = 0
                
                repeat {
                    newAnswerNumber = Int.random(in: 1...3)
                } while answerNumber == newAnswerNumber
                answerNumber = newAnswerNumber
            }) {
                Text("じゃんけんする!")
                    .frame(maxWidth: .infinity)
                    .frame(height: 100)
                    .font(.title)
                    .background(Color.pink)
                    .foregroundColor(Color.white)
            }
        }
    }

なるほど、感どころはわかったような気がする
swift独特の書き方は覚えないといかんね。

Image, Text, Buttonを配置する
TextとButtonに背景、文字色、文字サイズを設定
Imageにじゃんけん画像を切り替える

ファイルの役割
– MyJankenApp.swift: アプリケーションのエントリーポイント
– ContentView.swift: アプリの基本的な画面
– Assets.xcassets: 画像、音楽ファイル、アイコン、色などのリソース
– Preview Asset: Preview用のアセットカタログ

### 画像ファイルの取り込み
Assets.xcassetsに画像をドラッグする

### レイアウト構成
VStack(垂直)、HStack(水平)、ZStack(奥行き)があり、組み合わせで親ビュー、子ビューにもなる
レイアウト: ContentView – VStack – Image, Text, Button – Text

### UIパーツの配置

struct ContentView: View {
    var body: some View {
        Image("gu")
    }
}

Image(“gu”).resizable()でサイズを自動調整

struct ContentView: View {
    var body: some View {
        Image("gu")
            .resizable()
            .aspectRatio(contentMode: .fit)
    }
}

struct: 構造体、 swiftは構造体推奨
ContentView: 構造体名、 swiftはViewプロトコルに準拠
View: プロトコル、　resizableやaspectRatioを利用できる
var: 変数、　後から値の変更が可能。定数は不可
body: 変数名
some: 型　　具体的な戻り値を隠すことができる
{}: クロージャー

swiftでは、名前付き型(プロトコル型、クラス型、構造体型、数字文字文字列などのデータ型)と複合型(名前のない型で関数型とタプル型)の2種類がある
returnは省略される

「shift」 + 「command」 + 「L」でLibraryを表示し、VStackを表示
縦のカーソルを確認する

struct ContentView: View {
    var body: some View {
        
        VStack {
            Image("gu")
                .resizable()
                .aspectRatio(contentMode: .fit)
            Text("グー")
            Button(action: {
                print("タップされたよ!")
            }) {
                Text("じゃんけんする!")
            }
        }
    }
}

ボタンをクリックするとテキストが表示される

ここからif文などを使っていくのね
xcodeは大分使い易くなった^^

「shift」 + 「command」 + 「L」でLibraryを表示

VStackでまとめる

        VStack {
            Text("Hello, world!")
                .font(.largeTitle)
                .padding()
            Button(/*@START_MENU_TOKEN@*/"Button"/*@END_MENU_TOKEN@*/) {
                /*@START_MENU_TOKEN@*//*@PLACEHOLDER=Action@*/ /*@END_MENU_TOKEN@*/
            }
        }

VStackの他にHStackやZStackもある

Add Modifierでbackgroundを追加する

– textをwhiteにしてpaddingを追加する
– @State var outputText = “Hello, World!” で変数を宣言する
– outputText = “Hi, Swift!” を定義

struct ContentView: View {
    @State var outputText = "Hello, World!"
    
    var body: some View {
        
        VStack {
            Text(outputText)
                .font(.largeTitle)
                .padding()
            Button(action: {
                outputText = "Hi, Swift!"
            }) {
                Text("切り替えボタン")
                    .foregroundColor(Color.white)
                    .padding(.all)
                    .background(Color.blue)
            }
        }
        
    }
}

Canvas: Static Mode, Live Preview
シミュレータ:　Xodeツールの一部としてインストールされている
実機: 全ての機能を確認

Canvasのライブプレビューでテストできるので、シミュレータを起動しなくても確認できる

iPhone12以外でもiPadなど様々なデバイスで確認できる

コードでcanvasのpreviewを変更

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
            .previewDevice("iPhone 8")
    }
}

複数デバイスのプレビュー

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
            .previewDevice("iPhone 8")
        ContentView()
            .previewDevice("iPad Pro (9.7-inch)")
    }
}

PinPreviewで表示を固定

### シミュレータの起動
Runを押す
シミュレータは時間がかかる、カメラは閲覧できない
シミュレータは停止してから画面を閉じる

なるほど、前のストーリーボードから大分仕様が変わったなwww