Build interfaces with style

ハイライト

Xcode 13 では、Interface Builder で iOS 15 のボタン スタイル、テーブル ビュー セルのコンテンツ構成、SF シンボルのレイヤー化レンダリング、およびアクセシビリティ プレビューを直接構成できます。開発者はスタイルの反復を完了し、キャンバス内の動的なフォント レイアウトの問題を発見できます。

主要内容

多くの UIKit プロジェクトでは、依然として Storyboard と XIB が多くのインターフェイス構築作業を担っています。問題は、最新の iOS インターフェイスがシステム スタイルにますます依存していることです。ボタンはダイナミック タイプ、複数行のタイトル、状態変更、および Mac Catalyst をサポートする必要があります。リストのセルには明確なタイトル、サブタイトル、アイコンが必要です。シンボルは、色合いのカラー レンダリング階層に従う必要があります。アクセシビリティ設定では、テキストのサイズ、色、レイアウト境界も変更されます。

以前は、これらのことを行うときに、Interface Builder とコードの間を頻繁に行き来する必要がありました。予約ボタンをデザインするには、まずキャンバス上の位置を設定し、次に背景色、丸い角、アイコンの間隔を処理するコードを記述します。テーブル ビュー セルを調整するには、まずプロトタイプ セルを変更し、それをシミュレーターで実行してダイナミック タイプを確認します。テキストがトリミングされていることを発見した後、制約とラベル属性に戻ってテキストを変更しました。

このセッションは、ホテルのアプリを使用してプロセス全体を通して実施されました。予約シーンには、部屋の予約、チェックイン、チェックアウト、ヘルプ、ゲストの選択ボタンがあります。プロモーション シーンには、オプションの割引ボタンのセットがあります。アメニティ テーブル ビューにはレストランやその他の施設のリストがあります。メニューの詳細ページは、大きなフォント サイズでのテキストの折り返しをテストするために使用されます。 Xcode 13 の焦点は、これらの高頻度のインターフェイスの反復を Interface Builder に直接戻すことです。

Apple は 4 つのカテゴリーの改善を行いました。キャンバス下部のツールバーはよりコンパクトになり、アウトライン ビューではドラッグ アンド ドロップによるシーンの再配置や制約グループの一括選択がサポートされています。ボタンインスペクターは、プレーン、グレー、色付き、塗りつぶしのスタイルをサポートし、サブタイトル、画像の配置、コーナーのスタイル、ボタンのサイズなどの属性を公開します。テーブルビューセルインスペクターは、新しいコンテンツ構成スタイルをサポートします。キャンバスでは、アクセシビリティ オーバーライドを直接開き、ダイナミック タイプやコントラストの増加などの設定でインターフェイスのパフォーマンスをプレビューすることもできます。

詳細

キャンバスとドキュメント アウトラインは、大規模なストーリーボードを整理するのに適しています。

（00:51）

Xcode 13 では、Interface Builder のキャンバスの下部バーが再設計されています。デバイスの選択、シーンのレイアウト、方向、外観、およびアクセシビリティのオプションはすべて、よりコンパクトなコントロールに詰め込まれているため、キャンバス上により多くのスペースが残ります。アウトライン ビューでの変更はより直接的です。1 つまたは複数のシーンをドラッグして移動したり、コンストレイントなどのグループを選択してまとめて変更または削除したりできます。

Booking Scene
Promotions Scene
Constraints
  Top
  Leading
  Trailing
  Bottom

キーポイント:

• Booking SceneにドラッグできますPromotions Scene近くでは、ストーリーボード構造とセグエ関係が対応しやすくなります。
• チェックConstraintsgroup は、グループ内のすべての制約を選択することと同等であり、定数の一括変更または 1 回限りの削除に適しています。
• Option キーを押しながらシーンをドラッグすると、シーン全体がコピーされます。これは、類似したページから反復するのに適しています。

Interface Builder で新しいボタン スタイルを採用する

（02:53）

Xcode 13 の Button インスペクターは、Style プロパティを追加します。 [塗りつぶし]、[色付き]、または [グレー] を選択すると、ボタンは iOS 15 の新しいボタン システムになり、ダイナミック タイプ、複数行のタイトル、およびアクセシビリティのサポートが自動的に取得されます。ビデオでは、Book Room は塗りつぶしを使用し、チェックインとチェックアウトは色付きを使用し、Get Help はグレーを使用します。

時間	キャンバスオブジェクト	操作	結果
03:39	部屋を予約するボタン	ピンチしてズームした後、ボタンインスペクタのスタイルメニューを開きます	下部のメインボタンを変更する準備をします
04:16	部屋を予約するボタン	塗りつぶしスタイル	を選択します。ボタンは青色で塗りつぶされ、角が丸くなります。
05:54	チェックイン/チェックアウトボタン	アウトライン ビューでコマンドを押して複数選択し、[色付きスタイル	色付きスタイル] を選択します。 2 つの日付ボタンは透明な色合いの背景を取得します。
08:04	「ヘルプを表示」ボタン	オブジェクト ライブラリからグレーのボタンをドラッグし、ナビゲーション バーに配置します。新しいヘルプ入口を追加
08:42	「ヘルプを表示」ボタン	タイトル、サブタイトル、疑問符記号、画像パディングを設定	タイトル、サブタイトル、アイコンの間隔を指定したボタン
09:13	「ヘルプを表示」ボタン	最初にカプセル コーナー スタイルを試してから、ラージ コーナー スタイル	に変更します。キャンバス内で直接角の丸い部分を比較します。

キーポイント:

• 塗りつぶしスタイルでは、アプリの色合いを塗りつぶしの色として使用します。ブックルームなどの主要な操作に適しています。
• 色付きスタイルは、透明な色付きの背景を使用します。これは、重要ではあるが強い強調を必要としないボタンに適しています。
• ボタンインスペクターには、スタイルを選択した後、字幕、タイトルの配置、色のオプション、画像の位置、コーナースタイル、その他のプロパティが表示されます。
• サイズ インスペクタには、小、中、大のボタン サイズが用意されており、コーナー スタイルには、動的、固定、小、中、大、カプセルなどのオプションが用意されています。

トグルボタンとポップアップボタンを使用して選択状態を表現します

（07:29）

プロモーション シーンの [取得] ボタンは、クリックされた後に外観を変更して、特定のオファーが選択されたことを示す必要があります。 Xcode 13 では、インスペクターのメニュー領域で [プライマリ オプションとしての選択] をオンにし、ボタンをトグル ボタンに変えることができます。予約シーンのゲストの選択は、ポップアップ ボタンに適しています。クリックすると、1 ～ 4 人のメニューがポップアップし、選択した項目がボタンの新しいラベルになります。

時間	キャンバスオブジェクト	操作	結果
06:36	プロモーションシーン	キャンバス ミニマップを使用してダブルクリックしてジャンプします	プロモーション リスト シーンをすばやく見つける
06:56	3 つの取得ボタン	アウトライン ビューで Command を押して複数選択	複数のボタンを同時に変更する
07:10	3 つの取得ボタン	[スタイル] メニューの [色付き] を選択します。コントラストを高めるために画像を覆うボタン
07:40	3 つの取得ボタン	メニュー領域のプライマリ オプションとして選択を開く	[取得] ボタンがトグル ボタンになります
10:21	ゲストフィールド	オブジェクト ライブラリからポップアップ ボタンをドラッグ	1 ～ 4 人のゲスト用の選択コントロールを作成する
10:38	ポップアップボタン	着色スタイルを選択	外観の一致 チェックインとチェックアウト
10:48	メニュー項目	Option キーを押しながらドラッグして 2 つのメニュー項目をコピーし、1 から 4 に設定します。メニューには 4 つのオプションの値があります。
11:34	ポップアップボタン	コントロールインスペクタでツールチップを設定	Mac Catalyst バージョンのマウスオーバーのヒントを取得する

キーポイント: ・プライマリオプションとしての選択はインスペクタ内の設定であり、ボタンをクリックした後に選択状態が切り替わります。

• ポップアップ ボタンの動作は、クリックしてメニューを表示し、単一の項目を選択して、その項目をボタン ラベルに変えることです。
• トランスクリプトは、メニュー項目がアクションに関連付けられている必要があり、実行時まで表示されないことを明確に思い出させます。
• iOS ポップアップ ボタン、スタイルとツールチップ付きのボタンはすべて Mac Catalyst 15 をサポートします。

コンテンツ構成と階層シンボルを使用してテーブル ビューを更新します

（12:31）

アメニティ テーブル ビューの問題は、タイトルとサブタイトルの階層が十分に明確ではなく、アイコンに色がないことです。 Xcode 13 のテーブルビューセルインスペクターは、サブタイトルセル、値セル、グループ化ヘッダー、グループ化フッターなどの新しいコンテンツ構成スタイルを選択できます。その後、SF シンボルのレンダリング モードを階層に切り替えることができ、ティント カラーを使用してシンボルのメイン レベルを強調することができます。

時間	キャンバスオブジェクト	操作	結果
12:49	テーブルビューコントローラー	2本指でダブルタップ フォーカス	アメニティを入力してください。 テーブルビュー
13:36	すべてのセル	ドキュメントのアウトラインですべてを選択	セル スタイルをバッチで変更する準備をする
13:40	属性インスペクタ	[スタイル] ドロップダウン メニューを開きます	新しいコンテンツ構成スタイルを表示
13:48	すべてのセル	字幕セルを選択	タイトルが大きくなり、字幕レベルがより明確になりました
13:51	すべてのセル	インスペクターで画像のパディングを調整する	画像と文字の間に呼吸感を残す
15:17	セル記号	[レンダリング モード]ドロップダウン メニューを開きます。シンボルのレンダリングを変更する準備をする
15:21	セル記号	階層と色合いの色を選択	メイン レベルがより目立ち、シンボルはアプリの配色と一致します。

キーポイント:

• 新しいセル スタイルには、グループ化されたヘッダー、値セル、グループ化されたフッター、および字幕セルが含まれます。
• これらのスタイルは画像で動作し、ダイナミック タイプをサポートします。
• 階層レンダリング モードでは、メイン レイヤのカラーを使用して、さまざまな透明度のレベルを導き出します。
• セッションでは、異なるシンボル レイヤーに異なる色を設定できるパレット レンダリング モードについても言及されました。

キャンバスでアクセシビリティ設定をプレビューする

（15:42）

メニュー詳細ページの説明ラベルは小見出しテキスト スタイルを使用し、ダイナミック タイプをサポートします。ダイナミック タイプ スライダーを拡大すると、ビデオ内のラベルがビューの境界を超えます。修正は非常に具体的です。必要に応じてテキストを折り返せるように、末尾の制約を追加し、行数を 0 に変更します。

時間	キャンバスオブジェクト	操作	結果
16:16	アクセシビリティポップオーバー	キャンバスの下部バーの「アクセシビリティ」ボタンをクリックします。デザイン時のアクセシビリティ オーバーライドを開く
16:39	ダイナミックタイプスライダー	設定をアクティブにして、スライダーをドラッグします	説明 ラベルがビューの境界を超えています
16:53	説明ラベル	[制約] ポップオーバーを開き、末尾の制約を追加します。右側の境界線が拘束されています
17:00	説明ラベル	属性インスペクタで行数を 0 に設定します。必要に応じてテキストを折り返す
17:15	ダイナミックタイプスライダー	スライダーをもう一度ドラッグして確認します。ラベルを各フォント サイズで完全に表示できます。

キーポイント:

• 行数を 0 に設定すると、インスペクタでの属性の変更に対応し、ラベルが複数行を占めることが可能になります。
• 末尾制約により、大きなフォント サイズでテキストが右側にはみ出す問題が解決されます。
• アクセシビリティ ポップオーバーにより、デザイン中にダイナミック タイプやコントラストの増加などのオーバーライドを開くことができ、シミュレータの実行後に発見されるレイアウトの問題の数を減らすことができます。
• このプロセスは、ストーリーボード プロジェクトの迅速なアクセシビリティ検査に適しています。

重要ポイント

1. ボタン スタイルを古いストーリーボードに移行します。

手順: 主アクション ボタンを塗りつぶしに変更し、副アクション ボタンを色付きに変更し、ツール ボタンをグレーまたは無地に変更します。

実行する価値がある理由: このセッションでは、ボタン スタイルがダイナミック タイプ、複数行のタイトル、コーナー スタイル、Mac Catalyst マッピングを直接サポートしており、移行コストはインスペクターに重点を置いていることがわかります。

開始方法: まず、チェックアウト、予約、または送信ページを選択し、主ボタン、副ボタン、およびユーティリティ ボタンをリストし、次に塗りつぶし、色付き、グレー、または無地をそれぞれ適用し、大きなフォント サイズを確認します。

2. フィルター項目をポップアップボタンに変更します。

手順: 人数、並べ替え方法、日付範囲などのラジオ設定をポップアップ ボタンに作成します。

実行する価値がある理由: ビデオの [ゲスト] ボタンは、ポップアップ ボタンがメニューと現在の選択内容を 1 つのコントロールに結合できることを示しています。これは、フォームでのコンパクトな選択に特に適しています。

開始方法: ポップアップ ボタンをオブジェクト ライブラリにドラッグし、Option キーを押しながらドラッグしてメニュー項目をコピーし、候補値を完全に設定して、各メニュー項目がアクションに接続されていることを確認します。

3. コンテンツ構成を使用して、設定ページまたは詳細ページのリストを更新します

対処方法: 静的テーブル ビューの施設、設定、およびアカウント情報をシステム コンテンツ構成スタイルに変更します。

実行する価値がある理由: アメニティ テーブル ビューの例は、タイトル、サブタイトル、画像間隔、およびダイナミック タイプをシステム スタイルのメンテナンスに任せることができることを示しています。

開始方法: 字幕セルから開始し、静的セルをバッチで選択し、スタイル、画像パディング、シンボルのレンダリング モードを調整してから、キャンバスを使用してタイトル、字幕、アイコンのレベルを確認します。

4. アクセシビリティ キャンバス チェックリストを作成する

やるべきこと: ストーリーボードを変更するたびに、Interface Builder でダイナミック タイプ、コントラストの増加、および異なる外観を確認してください。

これを行う価値がある理由: ビデオ内の説明ラベルのオーバーフローの問題がキャンバス内に直接表示されます。これを修正するには、末尾の制約と複数行の設定を追加するだけです。

開始方法: アプリでテキストの多いページを 5 つ選択し、ダイナミック タイプ スライダーをより大きなフォント サイズにドラッグして、クリッピング、オーバーラップ、コントラストの問題を 1 つずつ記録します。

関連セッション

• UIKit ボタン システムの紹介 — iOS 15 のボタン スタイル、トグル ボタン、ポップアップ ボタン、メニュー状態について詳しく説明します。
• UIKit の新機能 - iOS 15 の UIKit のボタン、シンボル、セル構成、および Mac Catalyst アップデートの概要。
• SF シンボルの最新情​​報 — 階層、パレット、マルチカラーなどのシンボル レンダリング モードの設計と使用法を説明します。
• UIKit および AppKit の SF シンボル — カラフルな SF シンボルが UIKit および AppKit コントロールにどのように統合されるかを示します。
• 超高速なリストとコレクション ビューの作成 — リストのパフォーマンスとセルのライフ サイクルの観点から、テーブル ビュー/コレクション ビューのコンテンツ構成を拡張します。