SwiftUI

SwiftUIの基本

【SwiftUI】@Stateの使い方
SwiftUIのデータバインディングの仕組みの一つである、@Stateについて解説します。
【SwiftUI】Viewの分割
(2020/03/10 更新)複雑なViewを小さなViewに分割する事で、繰り返しを避け、ソースを見やすくする方法を紹介します。Viewを分割してもパフォーマンスに大きな影響を及ぼさないのがSwiftUIの特徴の一つです。
【SwiftUI】条件によってViewの見た目を変える方法
(2020/03/25 更新)特定の条件によってViewの見た目を変える方法を紹介します。

レイアウト

【SwiftUI】 Viewのレイアウト(VStack、HStack、ZStack)
SwiftUIではStackと呼ばれる部品配置用のViewを組み合わせて、レイアウトを作成します。本記事では3つのStack View(VStack、HStack、ZStack)の使い方を解説します。
【SwiftUI】Viewを11個以上並べる方法
SwiftUIにはVStackやHStackなどのコンテナでViewを10個までしか並べられない制限があります。11個以上のViewを並べる方法を紹介します。
【SwiftUI】Viewのフレームサイズ指定
Viewのフレームサイズを指定する方法を解説します。フレームはレイアウトの基準となる枠で、実際のView表示サイズとは異なる事があります。具体的な例を示すと、下の図の青背景の部分が元々のTextView、回りの赤枠がこのViewに設定さ...
【SwiftUI】Viewの背景設定と重ね合わせ
Viewの背景設定と、別のViewを重ねる方法を解説します。
【SwiftUI】Viewに余白を付加する(padding)
Viewに余白を付加する.padding()について解説します。

UI部品

【SwiftUI】Textの使い方
Textは読み取り専用テキストを表示するViewです。UiKitのUILabelに相当する部品です。
【SwiftUI】Buttonの使い方
Buttonは、ユーザーがタップして何かをするの使う処理を記述するViewです。
【SwiftUI】TextFieldの使い方
(2020/05/3 更新)テキスト入力に使うTextField()の使い方を解説します。
【SwiftUI】Formの使い方
FormはiOSの「設定」アプリのようなUIを実現するViewタイプです。データ入力用の部品(View)をグループ化して表示できます。
【SwiftUI】Pickerの使い方
Pickerは複数の選択肢の中から1つの値をユーザーに選択させる為の部品です。図のような回転ホイール表示が代表的なスタイルですが、プラットフォームによってスタイルが自動的に変わる特徴があります。
【SwiftUI】DatePickerの使い方
DatePickerは日付と時間を選択するための専用Viewです。
【SwiftUI】Stepperの使い方
Stepperの使い方を紹介します。[-]と[+]ののボタンで値を増減するタイプの部品です。
【SwiftUI】Alertの使い方
ユーザーに確認を促すアラートダイアログを表示する、Alertの使い方について解説します。

リスト

【SwiftUI】Listの使い方
Listはデータの一覧表示をするのに適したViewです。画面に収まらない量の場合はスクロール表示になるなど、UIKitのUITableViewに似ていますが、はるかに簡単に使えます。ListはForEachとセットで使うケースが多いの...
【SwiftUI】Listの行削除
(2020/05/9 更新)Listで生成したデータ一覧の行削除処理について解説します。
【SwiftUI】Listの行入れ替え
Listの行入れ替え処理の実現方法について解説します。
【SwiftUI】ForEachの使い方(1/2)
ForEachは繰り返し処理の中で、Viewを生成する仕組みです。名前の配列をループしてそれぞれをTextView化する、あるいはメニュー項目に追加するなどの動きを実現します。加えて、ForEachを使うとViewを手動で追加した場合に...
【SwiftUI】ForEachの使い方(2/2)
ForEachの繰り返し処理にて出力したデータを変更(削除、並び替え)できるようにするには、SwiftUIが該当データを識別する為に、各要素の一意性が保証されている必要があります。本記事(2/2)では、各要素の一意性を保証したデータコレク...

描画

【SwiftUI】色の指定方法
SwiftUIでの色の指定方法を解説します。色の指定にはColor構造体を使用します。
【SwiftUI】画面の背景色指定
画面の背景色を指定する方法を解説します。UIKitではUIViewControllerのプロパティで設定しますが、SwiftUIではどうするのでしょうか?
【SwiftUI】グラデーションの使い方
グラデーションとは、連続した階調で色調や透明度が変化していく色の指定を指します。SwiftUIでは線形、放射状、円すい状の3種類のグラデーションが使えます。これらのグラデーションはすべて、Viewとして単独で使用したり、Modifier...
【SwiftUI】画像(Image)の使い方
SwiftUIで画像を表示するのには、Image()を使用します。Image()はプロジェクトに取り込んだ画像の他に、OSに標準で組み込まれたシステムアイコンの表示も可能です。
【SwiftUI】組み込み図形の描画
SwiftUIに標準で用意されている組み込み図形描画の部品を紹介します。これらの部品はShapeプロトコルに準じています。
【SwiftUI】図形のパス(線)描画(stroke)
図形のパス(線)を描画する.stroke()の使い方を解説します。
【SwiftUI】Viewの切り取りとマスク
Viewの一部分を切り取る方法を解説します。主に画像の切り抜き等で使える方法です。
【SwiftUI】Viewに影をつける(shadow)
Viewに影のエフェクトを付加する.shadow()について解説します。
【SwiftUI】Viewにぼかし効果をつける(blur)
Viewにぼかし効果をつける.blur()について解説します。
【SwiftUI】Viewの境界線描画(border)
Viewの境界線を表示する.border()について解説します。
【SwiftUI】Viewの拡大と縮小(scaleEffect)
Viewを拡大・縮小させるscaleEffectの使い方を解説します。このModifierは、描画された結果を拡大/縮小しているので、あまり拡大しすぎるとジャギーが目立つ場合があります。
【SwiftUI】Viewの回転(rotationEffect)
指定された点を中心にViewを回転させるrotarionEffectの使い方を解説します。
【SwiftUI】Viewの3D回転(rotation3DEffect)
指定された回転軸を中心に、3次元でViewを回転させるrotation3DEffectの使い方を解説します。
【SwiftUI】UnitPointの使い方
UnitPointはViewの相対的な位置を定義する構造体です。用途としては、例えばrotationEffectを使ってViewを回転する時の中心点の指定などがあります。

アニメーション

【SwiftUI】アニメーションの基本
SwiftUIではViewの変化を簡単にアニメーション化できます。本記事ではアニメーションの基本について解説します。
【SwiftUI】アニメーション効果の種類
本記事ではSwiftUIで使えるアニメーション効果の種類について解説します。アニメーション効果はAnimation構造体で定義します。

Modifier

【SwiftUI】Modifierの適用順
Viewに様々な変更を適用するModifierですが、適用する順番によって挙動が変わる事があります。これはModifierが既存のViewのプロパティを変更しているのでは無く、変更を適用した新しいViewを毎回作成している事に関係します。...
【SwiftUI】Modifierをまとめて適用する
コンテナで括られた複数のViewに対して、Modifierをまとめて適用する方法を紹介します。
【SwiftUI】カスタムModifierの作成
(2020/05/4 更新)SwiftUIでは、定形のModifierをまとめたカスタムModifierを作成できます。これは、繰り返し処理を避け、ソースの簡素化をはかるのに有効です。本記事では、カスタムModifierの定義方法と使用...

その他

【SwiftUI】リファレンスマニュアルの読み解き
SwiftUIはUIKitに比べて比較的簡単なコードで記述が可能です。チュートリアルを進めるだけで、おおよそコードの書き方は理解できるのですが、いざリファレンスマニュアルを読んでいくと、予想外の構文が並んでいて戸惑ったので、改めて解読して...
【SwiftUI】フォントの指定方法
フォントの指定方法を解説します。

不具合?情報

【SwiftUI】Listでセルをドラックする時の不具合
Listの並び替え操作時のアニメーションで、挙動がおかしいケースがあります。おそらくXcodeの今後のバージョンアップで解消すると思われますが、現時点での対処方法を残しておきます。
【SwiftUI】編集モードの取得に関する不具合
編集モード(editMode)の取得に関する不具合と思われる現象に遭遇したので、対処方法と一緒に記録を残しておきます。
カピ通信