なかなか難しいと考えがちなプログラミングですが、割と簡単にできるとしたら。

ちょっとやるだけなら　iPad、MacのアプリSwiftPlaygrounds(MacではPlaygrounds)が良いです。

そして、アップルが作成しているSwiftの公式サイトを日本語に翻訳されて公開されています。

コードを書いて実行する環境があっという間にできてしまう優れものです。

例えば

struct ContentView: View {

    var body: some View {
       
　　　　 Text("Hello")
        
        Rectangle()
            .fill(Color.red)
            .frame(width: 300, height: 300)
            
        Circle()
            .fill(Color.blue)
            .frame(width: 300, height: 300)
            .overlay(
                Image(systemName: "figure.australian.football")
                    .font(.system(size: 150))
            )
    }
}

実行すると、テキスト、四角、丸と簡単な命令で配置、カスタムができます。

下のコードは丸"Circle()"の中に画像を表示するためのコードです。(下の青丸の中にボールを蹴っているような図)

  Circle()
            .fill(Color.blue)
            .frame(width: 300, height: 300)
            .overlay(
                Image(systemName: "figure.australian.football")
                    .font(.system(size: 150))
            )

こんな感じで大きな命令で表示させて、そのカスタマイズを"."をつけて情報を付け加えていくという感じです。数字などいろいろ変えてどんなふうになるか試して見ておくが良いと思います。

この積み重ねで複雑なこともできていきます。

あとレイアウトをするときに便利なのが縦並びにするVStackと、横並びにするHStackです。これを組み合わせて

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack{
            HStack{
                Rectangle()
                    .fill(Color.red)
                    .frame(width: 40, height: 40) 
                    .overlay(
                        Image(systemName: "message.fill")
                            .font(.system(size: 20))
                    ) 
                Text("Hello")
                    .font(/*@START_MENU_TOKEN@*/.title/*@END_MENU_TOKEN@*/)  
            }        
            Circle()
                .fill(Color.blue)
                .frame(width: 100, height: 300)
                .overlay(
                    Image(systemName: "figure.australian.football")
                        .font(.system(size: 40))
                ) 
        }        
    }
}

これを実行すると

こんな感じで表示することができます。

プログラミング言語Swiftの使い方がわからなくてもブロックを積み上げるようにしてある程度は作っていけます。