見出し画像

SwiftUIにチャレンジしてみました

こんにちは、iOSエンジニアの譚です。

最近、エンジニアはどうやってモチベーションを続けられるだろうをよく考えてました。やはり新しい技術を触れつつ、社会に貢献できることだと現時点の個人的な思いでした。さて、iOSの新しい技術(そんなに新しいではないですが)と言えば、去年WWDC19で発表されたSwiftUIですね。自分は全然触ったことがないので、今回はこれをテーマとして、ブログを書かせていただきます。


画像1

実際に作ってみたのが、このシンプルな画面です。一番上に、Imageがあり、真ん中にTextを置き、一番下にButtonを設置します。Buttonの機能は、クリックしたらTextを"Spacemarket is great"を"Spacemarket is awesome"に切り替えることができます。ソースコードは下に貼っておきます。

//
//  ContentView.swift
//  MyFirstSwiftUI
//
//  Created by Spacemarket on 2020/09/27.
//
import SwiftUI
struct ContentView: View {
   @State var spacemarketGreat = "Spacemarket is great"
   @State var loveSpacemarket = "I love Spacemarket"
   @State var flag = true
   var body: some View {
       ZStack {
           Color(.systemTeal)
               .edgesIgnoringSafeArea(.all)
           VStack {
               
               Image("spacemarket")
                   .resizable()
                   .aspectRatio(contentMode: .fit)
                   .frame(width: 300.0, height: 150.0)
                   .padding(.horizontal)
               Spacer()
               TextView(fontSize: 30, textContent: spacemarketGreat)
               TextView(fontSize: 25, textContent: loveSpacemarket)
               Spacer()
               Button(action: {
                   if flag{
                       self.spacemarketGreat = "Spacemarket is great"
                       self.flag = false
                   }else {
                       self.spacemarketGreat = "Spacemarket is awesome"
                       self.flag = true
                   }
               }) {
                   Text("Button")
                       .foregroundColor(.white)
                       .font(.system(size: 30))
                       .fontWeight(.heavy)
               }
           }
       }
   }
}
struct ContentView_Previews: PreviewProvider {
   static var previews: some View {
       Group {
           ContentView().previewDevice(PreviewDevice(rawValue: "iPhone XR"))
       }
   }
}
struct TextView: View {
   let fontSize: CGFloat
   let textContent: String
   var body: some View {
       Text(textContent)
           .foregroundColor(.white)
           .font(.system(size: fontSize))
           .padding(.horizontal)
   }
}

勉強できたこと

・SwiftUIにはZStack、VStack、HStackのViewを使って最初から描画するです。(UIKitというとUIStackViewですね、ZStackは内包する子Viewを重ねて配置するViewなので、少し斬新)

・同じViewであれば、外にstructで切り出して、MainViewから呼び出すことができます。例:TextView

・@Stateを変数につけることによって、struct内のプロパティを変更することができます。

・Xcode11は、Previewでデバイスを変更したらエラーになったようですが、Xcode12はどうやら順調にiPhone XRでプレビュー表示できました。

感想

・Viewの位置づけなどはpadding()が使われていますが、storyboardのautoLayoutと違くてちょっと難しいですね。少し時間をかけて勉強する必要があります。

・ソースコードは非常に読みやすくてシンプルで読みやすい。

・コードを書きながらPreviewで表示されるのが便利ですね。Build時間を待たずに。

スクリーンショット 2020-09-28 0.09.45

まとめ

まだ未熟ですが、今後SwiftUIに適用するアプリ設計なども勉強したいと思います。新しい技術を習得するのは最初から取っつきづらいですが、思い切って勉強すれば面白い技術世界が広がれられるかもしれません。みなさんもぜひ挑戦してください。


この記事が気に入ったらサポートをしてみませんか?