SwiftUIでアプリ作成 〜Text&Button〜

こんにちは、賞味期限の近いマシュマロを押し付けられ気付いたら一人で食べ切っているcyanです。
もはや甘ったるくて気持ち悪くなってきました、、
と言いながら袋の底には二つしか残ってないんだから恐ろしいものです。
ノルマは残り一袋!

今回はSwiftUIを使用したテキストとボタンの簡単なアプリを作成しました。
storyboard版はこちらです。
0から始めるSwift! [Part1] 〜LabelとButton〜

今回のサンプルプロジェクト:
https://github.com/cyan-drop/TextViewApp/

SwiftUI

Swiftのバージョンアップで新しく登場したこのSwiftUIですが、
宣言構文から設計ツールまで以前と大幅に変化しています。
各パーツの名前も変化していて、慣れるまでもう少し時間がかかりそうです。
Viewで使用する変数の前に@Stateをつけなくてはいけない、というのも新しいですね

あとは canvas
画期的な仕組みでした。
これ旧storyboardって言ってしまったんですが、
まだstoryboard共存してましたので
Playgroundと掛け合わせたものとして語っていこうと思います。
resumeはそのまんまレジュメで良さそうです。
途中何を血迷ったのかレジュームと呼んでました←

公式ドキュメント: https://developer.apple.com/xcode/swiftui/

今回のまとめ

Stackを活用すべき

VStackとHStackという強力なものが出ましたので積極的に使っていこうと思います。
そして、Spacerやpaddingを加えることによって間隔をより細かく設定することもできます。
使用方法としては大きく以下の三つになります。

  • パーツにつける
    既に存在するパーツにStackを加える(今回の方法)
    ⌘+クリックで可能。
  • コードから作成
    Stack{}を構造体内のコードに加えるだけ
  • libraryからドロップ
    他のパーツと同じようにcanvasにドラッグ&ドロップ

紐づける → コードと一緒に組み立てる

今までストーリーボードのパーツをコードに紐づけてきましたが
Canvasにパーツをドロップすればコードが追加され
コードにパーツを記述すればcanvasにパーツが表示されます。
コードとデザインが一体化してます。

あとがき

今回のプロジェクトで初めて触ったんですが面白い仕組みですね。
パーツの配置位置がコード上でわかるようになってます。
storyboardの際は
パーツが右にあろうが一番下にあろうがコード上ではわからなかったです。
(一応多少の気を使って変数は並べてました。)
が、SwiftUIなら一発です
コードを見ただけで大方のデザインを想像できる、というのは強いと思います。
ボタンひとつ押せばシュミレーター起動せずにデザイン見れますし!

タップアクションの記述もクロージャで処理が書けるようになってました。
存在とその処理内容が一緒に記述されているのは分かりやすいと思います。
ただ、膨大なコード量になってしまわないように気をつけたいです。

別ファイルとの連携がいまいち理解できてないので、次回はそこも触れられたらいいと思ってます。
次回もみてください!

参考にしたサイト


SwiftUIチュートリアル(公式)

How to create a tappable button

SwiftUI Button Tutorial






2 Thoughts

  1. はじめまして。
    森と申します。
    swiftのアプリ作成で、YouTubeからこのブログにたどり着きました。
    動画で色々と勉強させてもらってます。
    質問があります。
    ①今までプログラミングはしてきたのですか?swiftがはじめてですか?
    ②アプリ作成時は、電卓の時のように、ある程度ボタンやテキストラベルなどサムネイル的に書いてあって作成してるんですか?
    ③独学ですか?メンターなんかいるんですか?

    突然のメールと質問責めお許しください。

    ps.YouTube動画頑張って体にお気をつけを…

    1. はじめまして!
      返信遅くなり申し訳ありません。
      ①中学時代にHTML/CSS,PHPを触ったことはありましたが、本腰入れて勉強したのはSwiftが初めてです。
      ②作り始める前に、大まかなデザインは書き起こしてから実装するようにしています。
      個人的には、最初にパーツを配置して表示画面をイメージできるようにするのが好きです!
      質問の意図とずれていたらすみません。。
      ③一応独学です。(質問サイト等で他のエンジニアさんから教えてもらうことはあります。)

      ありがとうございます!
      また動画見ていただければ嬉しいです!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です