プログラミング

【第4回】日本語版SwiftUIチュートリアル【図形の描画】

日本語版SwiftUIチュートリアル

日本語版SwiftUIチュートリアル

日本語版SwiftUIチュートリアル

本チュートリアルは,Appleが掲載している公式のSwiftUIチュートリアルを「日本語で」そして「詳細に」解説し直すことを目的とした記事です.

この手の記事は,他にも似たようなものがありますが,全てを網羅しているわけではなく,部分的に解説している記事が多数です.

そこで,SwiftUIを使ってアプリ開発をしたい方々のために,そして勉強している自分自身のために,日本語版SwiftUIチュートリアルの完全版を書きます.

なお,本記事の難易度としては,初級者も見様見真似で作れるようにはなっていますが,それでは物足りないという中級者のために,細かい文法的な解説も随所に入れていこうと思います

注意として,本記事はSwiftの言語解説はあまり含まないので,以下の記事を別タブで開いておいて,分からなければ逐一確認してみると良いと思います.

  1. Swiftを触ったことがないプログラマーのためのSwiftチュートリアル

 

ちなみに出来上がるアプリは,上図に示すような観光地アプリです.

各観光地の位置情報を確認したり,その観光地をお気に入りに追加したりできるアプリを目指します.

第1回は👇

日本語版SwiftUIチュートリアル

第4回:図形の描画

第4回では,前回作成したアプリからは少し離れ,SwiftUIでの図形描画を使ったバッジビューの解説を行っていきます.

といっても,今回作ったバッジは最終的にはひとつのアプリケーションに統合されるのでご安心ください.

今回作成するバッジは以下のようなものです.

 

Step 1. バッジを仮で定義する

いきなり複雑なバッジを作成するのは困難ですが,まずは大枠を作って簡単なバッジの作り方を学びましょう!

まずは新たに「Badge.swift」をプロジェクトルートディレクトリに作成します.

そうしたら,早速簡単な図形を使ってバッジを作ります.

通常,SwiftUIの図形描画は,輪郭情報の Path 型 (構造体) を使用して行います.

今はまだ何も書いていませんが,この Path { } の引数に図形の輪郭情報を定義していく形になります.

例えば直接,予め用意されている図形を追加することもできます.

日本語版SwiftUIチュートリアル

または,自分で頂点座標を定めて結び,それを塗りつぶす,といったことも可能です.

日本語版SwiftUIチュートリアル

日本語版SwiftUIチュートリアル

次の内容を理解しやすくするために,もう少しだけ図形描画の基礎を学びましょう

先ほどまでは,座標を追加していく方法をとりましたが,以下のような線の引き方も可能です.

日本語版SwiftUIチュートリアル

move(to: ) で描画の始点座標を最初に決め, addLine(to: ) で終点座標を決めて線を引く方法です.

これを使えば,

日本語版SwiftUIチュートリアル

のような描画も可能です.

そしてもう一つ重要な描画方法として以下のようなものがあります.

日本語版SwiftUIチュートリアル

このようなカーブの描画です.

上記コードは以下のようなイメージです.

日本語版SwiftUIチュートリアル

始点は move(to: ) に限らず,最後に移動し終えた座標が,それにあたります.

今回は最後の path.addLine(to: CGPoint(x: 250, y: 200)) で移動した点が,カーブの始点になりますね.

これらを踏まえた上で,本題に移ります.

Step 2. バッジ背景で使う六角形を定義する

さて,背景で使用する六角形を決めるパラメータを管理する構造体を定義しましょう.

「HexagonParameters.swift」を新たにプロジェクトルートディレクトリに作成します.

実際,公式チュートリアルでは定義の説明は皆無ですが,先ほどの話を踏まえて少しだけ解説を入れて実装してみます.

この構造体では,各頂点座標を管理するので, points  というプロパティを持たせてあげます.

ここで,注意として今回描画しようとしている六角形はコーナーが角張ったようなものではなく,丸みを帯びた六角形を描画しようとしています.

なので,先ほど出てきた制御点と終点もパラメータとして管理を行います.

そこでそれらを一つの構造体として管理してしまいましょう.

これだけを見ると,それぞれのプロパティが何を示しているのかわかりにくいですね.

使い方としては,図形の大きさとして width と height という定数をもとに描画することを考えています.

それらに対してその定数を使うか否か ( useXxx ) ,そしてどのくらいの係数 ( xFactor ) で描画するかをこれで管理しようという考えです.

また,各タプルのインデックスはそれぞれ, ("始点", "終点", "制御点") として扱うことにします.

そうしたら角頂点の関係を定義していきます.

いきなり,コードが増えましたがここはコピペで構いません

この後,これを呼び出しながら様子を理解していきましょう.

Step 3. Badgeで背景を描画してみる

そうしたら,先ほどの六角形を背景として描画していきましょう.

日本語版SwiftUIチュートリアル

うまく描画できていそうです!

ここで, HexagonParameters.points.forEach { } はリストに対して各要素をクロージャの引数として処理を行うことができる関数です.

今回は引数名は指定していないので, $0 で代用できます.

また,タプルのインデックスをしていしたアクセスの仕方も,コードを見れば分かるかと思います.

クロージャの中でやっていることは,「線を引く」→「曲線を引く」の繰り返しですね.

このとき,線を引けば今見ている座標もそれに伴い移動するので, move(to: ) も最初だけです.

( move(to: )の座標で定数が使われているのが少し気持ち悪いですが,これは仕方がないのでスルーします)

 

さて,今は左上に寄った六角形が描画されていますが,これを画面全体を使った大きなサイズで描画をしたいと考えています.

こういった時は, GeometryReader { } という構造体が利用できます.

使い方はコードを実際に見てみましょう.

日本語版SwiftUIチュートリアル

このように,親ビューのサイズや中心座標などを簡単に扱うことができるのが, GeometryReader { } です.

今回は,幅をビュー縦横サイズのうち,小さい方に指定しています.

さてもう少しデザインを整えていきましょう.

まずはx軸に対して余白を取ります.

日本語版SwiftUIチュートリアル

グラデーションカラーで塗りつぶしてみましょう.

日本語版SwiftUIチュートリアル

色の指定は,0~255の範囲で指定したいがために, red: 239.0 / 255, のような書き方をしていますが,公式でこう書くくらいなら最初からそう定義すれば良かったのでは?と私は思いますが,まあ良いでしょう.

今回の加筆コードでグラデーションの塗りつぶしの仕方もわかりましたね.

最後に,最後にアスペクト比を横幅に合わせ,ビューにフィットするようにします.

日本語版SwiftUIチュートリアル

良い感じですね.

Step 4. バッジシンボルを描く

次に,先ほどの背景の上に描くシンボルを描画していきますが,ここでは一つの図形を複製し,回転などの操作を組み合わせ一つのバッジを描くことをやってみます.

まずはその図形を作りましょう.

この図形については,コードは複雑に見えますがやっていることはシンプルですので,詳細は省きます.

ここはコピペでも構わないです.

日本語版SwiftUIチュートリアル(上図では let height = width * 0.85 となっていますが,本当は let height = width * 0.75 です.筆者は途中で気づいて修正しますので,みなさまは間違わないように... )

かなり決め打ちな値が多いですが,ここでそれらの数字を適当に変えてみて,描画にどのような変化があるか確かめてみると良いでしょう.

日本語版SwiftUIチュートリアル

日本語版SwiftUIチュートリアル

これで,元となる図は完成です.

これを組み合わせていきましょう.

Step 5. バッジの組み合わせ

まず,わかりやすくするためにStep 2で作成した「Badge.swift」を「BadgeBackground.swift」に名前を変更してください.

その次に,BadgeSymbolの回転操作を簡単にするために「RotatedBadgeSymbol.swift」を作成します.

日本語版SwiftUIチュートリアル

プレビューでは仮で,「5度回転」としています.

その次に,また新たに「Badge.swift」を作成し,ここで先ほど作ったパーツたちを呼び出していきます.

まずは適当に呼び出してみます.

日本語版SwiftUIチュートリアル

バッジシンボルを,また GeometryReader { } を使ってサイズ調整しましょう.

日本語版SwiftUIチュートリアル(ここで,先ほどの定数が違うと気がつきました.汗)

最後に,シンボルを量産しましょう.

今回は8分割にして円形に描画してみます.

日本語版SwiftUIチュートリアル

これでバッジ完成です!

このバッジはまたいずれアプリで使用するのでこのままにしておいてください!

第4回:おわりに

今回は,図形の描画について紹介しました.

前回までと毛色が変わり,困惑した方もいるかもしれませんが第6回あたりで合流しますので,引き続き頑張っていきましょう!

さて次回は,「アニメーション」の実装についてです.

日本語版SwiftUIチュートリアル


スポンサードリンク