[iOS] SwiftUIを使ってみよう!

この記事では、SwiftUIを使用して画像を表示するアプリを作成する手順を紹介します。

その過程で、オブジェクトライブラリ、Modifiersライブラリ、属性インスペクタの使い方、VStack、ZStack、HStackの内容、Imageや.font()、.foregroundColor()の使用法について解説します。

目次

SwiftUIの基礎

Xcodeのインストールが未了の方は、次の記事のこちらのページを確認ください。

あわせて読みたい

Xcodeの新規プロジェクト作成

SwiftUIを使用してiOSアプリを開発するには、まずXcodeで新しいプロジェクトを作成します。XcodeはAppleが提供する統合開発環境(IDE)です。

STEP
Xcodeを起動し、新規プロジェクト「Create a new Xcode project」を選択します。
STEP
プロジェクトテンプレートの一覧が表示されます。SwiftUIのプロジェクトを作成するには、「iOS」タブ→Applicationエリアで[App]を選択し、[Next]をクリックします。
STEP
プロジェクトの詳細情報(プロジェクト名、組織名、インターフェース、言語など)を入力します。

Intefaceオプションは「SwiftUI」を選択してください。

STEP
プロジェクトの保存先を指定し、[作成]ボタンをクリックします。

保存先は、プロジェクトファイルを格納するディレクトリの場所を指定します。デフォルトの場所を使用するか、独自の場所を指定することができます。

Xcodeの各エリアの確認

プロジェクトが作成されると、次のような画面が表示されます。

Xcodeには、さまざまなエリアがあり、それぞれのエリアが特定の役割を果たしています。ここでは、Xcodeの主要なエリアを紹介し、それぞれの役割と使い方について解説します。

ナビゲータエリア

ナビゲータエリアは、Xcodeの左側に位置する領域で、プロジェクトのファイル構造リソースにアクセスするためのナビゲーションパネルです。

初めてSwiftUIプロジェクトを作成した場合、ナビゲータエリアにはプロジェクトファイルやディレクトリが表示されます。

ナビゲータエリアでは、プロジェクト内のファイルやグループを作成、管理、編集することができます。ファイルの追加や削除、リネーム、移動などの操作は、ナビゲータエリアを通じて行います。

エディターエリア

エディターエリアは、Xcodeの中央左側部分に位置し、SwiftUIプロジェクトでは、Swiftコードファイルを編集するために使用されます。

デフォルトではContentView.swiftというファイルが開かれています。このファイルには、初期の画面構造が定義されています。

エディターエリアでは、選択したファイルのコードを表示し、編集することができます。また、自動補完やエラーチェック、シンタックスハイライトなどの機能も備わっており、開発作業を効率化するのに役立ちます。

プレビューエリア

プレビューエリアは、Xcodeの中央右側に位置し、SwiftUIビューのプレビューを表示するための領域です。ここでは、作成したビューコンポーネントの外観やレイアウトをリアルタイムで確認することができます。

SwiftUIプロジェクトの場合、プレビューエリアにはプレビュー画面が表示され、ビューの変更を即座に反映させることができます。

デバイスの選択やオリエンテーションの変更なども行え、さまざまなシナリオでビューの外観を確認することができます。

インスペクターエリア

インスペクターエリアは、Xcodeの右側に位置し、ビューコンポーネントのプロパティを編集するためのパネルです。属性インスペクタなどとも呼ばれます。

インスペクターエリアでは、選択したビューコンポーネントのプロパティを直接編集することができます。SwiftUIプロジェクトでは、インスペクターエリアを使用してビューコンポーネントの外観や動作をカスタマイズすることができます。

初心者にとっては、インスペクターエリアを使用することで、コードを書かずにビューコンポーネントのプロパティを編集できるため、簡単かつ迅速にアプリの外観を調整することができます。

ライブラリと属性インスペクタについて

SwiftUIは、ビューの作成とカスタマイズにおいて非常に便利なツールを提供しています。その中でも特に重要な機能として、「オブジェクトライブラリ」「Modifiersライブラリ」「属性インスペクタ」があります。ここでは、それぞれの機能について詳しく見ていきましょう。

オブジェクトライブラリ

オブジェクトライブラリは、SwiftUIで使用できるビューコンポーネントの一覧を提供します。これにより、ビューを作成する際に便利なコンポーネントを簡単に追加することができます。例えば、テキストフィールド、ボタン、イメージビューなどが含まれています。

オブジェクトライブラリを使用する方法は簡単です。Xcodeのインタフェースビルダーでビューを作成する際に、オブジェクトライブラリから適切なコンポーネントを選択し、ビューにドラッグアンドドロップするだけです。これにより、コードを書かずにビューを迅速に構築することができます。

Modifiersライブラリ

Modifiersライブラリは、ビューコンポーネントの外観や動作をカスタマイズするための機能を提供します。このライブラリには、背景色、フォントスタイル、角丸の設定、アニメーションなど、さまざまな修飾子が含まれています。修飾子はビューに追加され、ビューの見た目や動作を変更する役割を果たします。

Modifiersライブラリを使用するには、ビューのコード内でドット構文を使用して修飾子を適用します。例えば、.foregroundColor()メソッドを使用してテキストの色を変更することができます。修飾子はチェーンすることも可能であり、複数の修飾子を組み合わせることでより高度なカスタマイズが可能です。

Modifiersライブラリから修飾子をビューに適用するには、以下の手順を実行します。

  1. Xcodeのエディターエリアで修飾子を適用したいビューを選択します。
  2. Modifiersライブラリから目的の修飾子を探し、ドラッグします
  3. ドロップ先のビューの後ろに修飾子が追加されます。

属性インスペクタ

属性インスペクタは、ビューコンポーネントのプロパティを直接編集するためのパネルです。ビューを選択すると、属性インスペクタが表示され、ビューのさまざまなプロパティを編集することができます

属性インスペクタを使用することで、ビューコンポーネントのプロパティを直感的に編集することができます。たとえば、テキストの内容やフォントサイズ、イメージの表示モードなどを簡単に変更することができます。

属性インスペクタを使用することで、コードを書かずにビューコンポーネントのプロパティを編集できるため、初心者にとって非常に便利です。また、リアルタイムでプレビューを確認しながら、ビューの外観を調整することができるため、直感的な開発が可能です。

属性インスペクタを使用して設定を行うためには、以下の手順に従います。

STEP
ビューの選択

Xcodeのプレビューエリアで、設定したいビューを選択します。
ビューを選択すると、属性インスペクタが表示されます。

STEP
属性の設定

属性インスペクタでは、さまざまな設定オプションを利用できます。
例)テキストの色やフォント、ビューの背景色、レイアウト制約などを設定することができます。

各オプションは、ドロップダウンメニューやテキストフィールド、スライダーなどのインタラクティブなコントロールを介して設定します。

STEP
即時プレビューコード更新

属性を設定すると、プレビューエリアでビューの外観が即座に反映されます。さらに、エディタエリアでコードが即座に更新されます。
設定した属性を調整しながら、ビューの見た目や動作を確認できます。

SwiftUIの主要な項目

Stackの内容と使い方

SwiftUIでは、ビューを縦方向(VStack横方向(HStack、または重ねて配置する(ZStackためのコンテナビューが提供されています。それぞれの使い方について見ていきましょう。

VStack(縦方向)

VStackは、縦方向にビューを積み上げて配置するためのコンテナビューです

  1. VStackを作成するために、VStack { }という形式でコードを記述します。
  2. { }の中に、縦方向に配置したいビューを追加します。ビューは上から順に配置されます
VStack {
    Text("上のビュー")
    Text("中央のビュー")
    Text("下のビュー")
}

HStack(横方向)

HStackは、横方向にビューを並べて配置するためのコンテナビューです

  1. HStackを作成するために、HStack { }という形式でコードを記述します。
  2. { }の中に、横方向に並べたいビューを追加します。ビューは左から順に配置されます
HStack {
    Image("ichigo")
    Image("melon")
    Image("mikan")
}

ZStack(垂直方向)

ZStackは、ビューを重ねて配置するためのコンテナビューです

  1. ZStackを作成するために、ZStack { }という形式でコードを記述します。
  2. { }の中に、重ねて配置したいビューを追加します。最後に追加されたビューが最前面に表示されます。
ZStack {
    Image("melon")
    Text("メロン")
}

Imageの使用法

SwiftUIでは、Imageビューを使用して画像を表示することができます。以下では、初心者向けにImageの使用法を詳しく説明します。

STEP
画像をプロジェクトに追加

まず最初に、プロジェクトに表示したい画像を追加する必要があります。以下の手順に従って画像をプロジェクトに追加しましょう。

  1. Xcodeのナビゲータパネルで、「Assets.xcassets」というフォルダを選択します。
  2. 画像をプロジェクトにドラッグアンドドロップします。

画像がプロジェクトに追加されたら、次のステップに進みます。

STEP
画像を表示

Imageビューを使用して画像を表示するには、以下のコードを使用します。

Image("imageName")

上記のコードの"imageName"には、実際に表示したい画像の名前を指定します。画像の拡張子は指定する必要はありません。

STEP
画像のリサイズ

Imageビューをカスタマイズするためには、いくつかの修飾子(modifiers)を適用することができます。代表的なカスタマイズ方法を紹介します。

画像のサイズを変更するには、.resizable()修飾子を使用します。この修飾子を適用することで、画像のサイズを自由に変更できます。

Image("iOS-Pro")
    .resizable()
STEP
画像のスケーリングとトリミング

Imageビューでは、画像のスケーリングトリミングをカスタマイズすることもできます。以下の修飾子を使用することで、画像の表示を調整できます。

.scaledToFit(): 画像をビューのサイズに合わせて縮小または拡大します。

Image("iOS-Pro")
    .resizable()
    .scaledToFit()

.scaledToFill(): 画像をビューのサイズに合わせて拡大し、余分な部分はトリミングします。

Image("iOS-Pro")
    .resizable()
    .scaledToFill()

.aspectRatio(contentMode: .fit): 画像のアスペクト比を維持しながら、ビューのサイズに合わせて縮小または拡大します。

Image("iOS-Pro")
    .resizable()
    .aspectRatio(contentMode: .fit)
STEP
画像の位置とサイズを指定

画像の位置サイズを指定するには、.position(x: xPos, y: yPos).frame(width: width, height: height)修飾子を使用します。
これにより、画像を任意の位置に配置し、サイズを指定することができます

Image("iOS-Pro")
    .resizable()
    .position(x: 100, y: 100)
    .frame(width: 200, height: 200)

.font()の使用法

  • .font()は、SwiftUIの修飾子の一つであり、テキストビューのフォントを変更するために使用されます
  • フォントはテキストの見た目に重要な影響を与える要素であり、アプリのスタイルやブランディングに合わせてカスタマイズすることができます。

フォントの指定方法

  • .font()修飾子では、さまざまな方法でフォントを指定することができます。
  • フォントを指定する際には、以下のいずれかの方法を選択することができます。
1.システムフォントの使用

システムフォントを使用する場合は、以下の手順に従います。

font(.system(size: 20))のように、.systemとサイズを指定します。サイズは任意のポイント数で指定することができます。

Text("iOS-Pro")
    .font(.system(size: 40))

システムフォントはデバイスのデフォルトのフォントを使用するため、アプリの外観を統一させる場合に適しています。

2.カスタムフォントの使用

カスタムフォントを使用する場合は、以下の手順に従います。

  • プロジェクトにフォントファイル(.ttf形式(TrueType)または.otf形式(OpenType))を追加します。
  • フォントファイルをプロジェクト内でアクセス可能に設定します。
  • .font(.custom(“CustomFontName”, size: 16))のように、カスタムフォントの名前、サイズを指定します。
Text("iOS-Pro")
    .font(.custom("CustomFontName", size: 40))

”CustomFontName”は、実際のカスタムフォントの名前に置き換えてください。

フォントスタイルの設定

  • .font(.title)のように、.title、.headline、.subheadlineなどのフォントスタイルを指定することもできます
  • フォントスタイルは、テキストの重要度などに基づいて適切な見た目を提供するために使用されます。

.font()修飾子には、さらに追加のオプションを指定することもできます。

  1. 太字の設定
    .bold()を使用して、テキストを太字にすることができます。
    例).font(.bold())と指定します。
  2. 斜体の設定
    .italic()を使用して、テキストを斜体にすることができます。
    例).font(.italic())と指定します。
  3. 文字間隔の調整
    .kerning()を使用して、文字間のスペースを調整することができます。
    例).font(.kerning(2))と指定します。
    値はポイント数で指定し、正の値で文字間が広がり、負の値で文字間が狭まります。
  4. ラインの高さの設定
    .lineSpacing()を使用して、行の高さを設定することができます。
    例).font(.lineSpacing(5))と指定します。
    値はポイント数で指定し、正の値で行の高さが増加し、負の値で行の高さが減少します。
  5. 複数のフォント設定を組み合わせることも可能です
    例).font(.custom("CustomFontName", size: 20)).bold()と指定することで、カスタムフォントと太字を同時に適用することができます。

.foregroundColor()の使用法

  • .foregroundColor()は、SwiftUIの修飾子の一つであり、テキストの色を変更するために使用されます
  • テキストの色は、アプリのデザインやメッセージの重要度を示すために重要な要素です。

色の指定方法

  • .foregroundColor()修飾子では、さまざまな方法で色を指定することができます。
  • 色を指定する際には、以下のいずれかの方法を選択することができます。
システムカラーの使用

.foregroundColor(.blue)のように、指定したシステムカラーを使用します

Text("iOS-Pro")
    .foregroundColor(.brown)

システムカラーは、デバイスのテーマやユーザーの設定に基づいて自動的に適応されるため、アプリの外観を一貫させる場合に適しています。

カスタムカラーの使用

カスタムカラーを使用する場合は、以下の手順に従います。

  • Colors.xcassetsファイルに新しいカラーセットを作成します。
  • カラーセットにカスタムカラーを追加し、名前を指定します。
  • .foregroundColor(Color(“CustomColorName”))のように、カスタムカラーを指定します。
Text("iOS-Pro")
    .foregroundColor(Color("CustomColorName"))

“CustomColorName”は、実際のカスタムカラーの名前に置き換えてください。

RGB値またはHEXコードの使用

RGB値またはHEXコードを使用して、具体的なカラーを指定することもできます

  • RGB値の場合:
    例).foregroundColor(Color(red: 0.2, green: 0.4, blue: 0.6))
  • HEXコードの場合:
    例).foregroundColor(Color(hex: “#336699”))
Text("iOS-Pro")
    .foregroundColor(Color(red: 0.2, green: 0.4, blue: 0.6))

これらの例を参考にしながら、.foregroundColor()を活用してテキストの色を設定しましょう。アプリのデザインやメッセージに合わせて適切な色を選び、テキストを鮮やかに表示させることができます。

色の設定

透明度の設定
  • .foregroundColor()修飾子には、透明度を設定することもできます
  • 透明度を指定することで、テキストの色を透明にしたり、半透明にしたりすることができます。
  • 透明度は、0.0(完全に透明)から1.0(完全に不透明)の範囲で指定します。
Text("iOS-Pro")
    .foregroundColor(Color.blue.opacity(0.5))
複数の色設定の組み合わせ
  • 複数の色設定を組み合わせることも可能です
  • 例えば、.foregroundColor(.red).bold()と指定することで、赤いテキストを太字にすることができます。

これらの色の設定オプションを活用することで、テキストの色をカスタマイズし、アプリのデザインやユーザーの希望に合わせた表現を実現できます。適切な色と設定を選択し、テキストを鮮やかに表示させましょう。

この記事が気に入ったら
いいね または フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

目次