JavaエンジニアがSwiftUIでアプリを作ってみる①

メインでJavaを触っている業務系のエンジニアです。たまにAndroid(Java)の案件もやってます。

ついこないだ、以前作成したアプリのKotlin化をしました。iOSでも作ろうと何度も試みたのですが、今回ちゃんと作ろうと思います。

そもそもswiftは趣味程度でまだリリースには至ってませんが、ストーリーボードとかは慣れてきたかなという頃でした。

しかし、SwiftUI全然違うじゃん...

全く異なる言語みたい...

スプラッシュ画面

参考：https://www.raywenderlich.com/4503153-how-to-create-a-splash-screen-with-swiftui

なんとなくスプラッシュ画面を入れたかったので、上記を参考にしてアイコンだけ表示する画面を差し込みました。

struct SplashScreen: View {
 let fuberBlue = Color("Green")
 
 var body: some View {
   ZStack {
     Image("icon")
       .font(.largeTitle)
       .foregroundColor(.green)
       .offset(x: 20,
               y: 0)
       .frame(maxWidth:.infinity,maxHeight: .infinity)
     Spacer()
   }
   .background(Color.white)
 }
}

struct LoginView : View {
   @State var showSplash = true
   @State var username: String = ""
   @State var password: String = ""
   
   var body: some View {
       ZStack{
           VStack {
               
               WelcomeText()
               TextField("Username", text: $username)
                   .padding()
                   .background(lightGreyColor)
                   .cornerRadius(5.0)
                   .padding(.bottom, 20)
               SecureField("Password", text: $password)
                   .padding()
                   .background(lightGreyColor)
                   .cornerRadius(5.0)
                   .padding(.bottom, 20)
               Button(action: {print("Button tapped")}) {
                  LoginButtonContent()
               }
               Button(action: {print("Button tapped")}) {
                  RegisterButtonContent()
               }
           }
           .padding()
           .edgesIgnoringSafeArea(.all)
           
           SplashScreen()
             .opacity(showSplash ? 1 : 0)
             .onAppear {
               DispatchQueue.main.asyncAfter(deadline: .now() + 2) {
                 withAnimation() {
                   self.showSplash = false
                 }
               }
           }
       }
   }
}

struct WelcomeText : View {
   var body: some View {
       return Text("Welcome!")
           .font(.largeTitle)
           .fontWeight(.semibold)
           .padding(.bottom, 20)
   }
}

struct LoginButtonContent : View {
   var body: some View {
       return Text("LOGIN")
           .font(.headline)
           .foregroundColor(.white)
           .frame(width: 220, height: 60)
           .background(Color.green)
           .cornerRadius(15.0)
           .padding(.bottom,20)
   }
}

struct RegisterButtonContent : View {
   var body: some View {
       return Text("Register")
           .font(.headline)
           .foregroundColor(.white)
           .padding()
           .frame(width: 220, height: 60)
           .background(Color.green)
           .cornerRadius(15.0)
           .padding(.bottom,20)
   }
}

ちなみにログイン画面ですが、まだログイン処理は組み込んでいません。