スタイルによるインタフェース構築

こんにちは Luke Larsonです Xcodeのエンジニアです 後ほどYoussef Elabdが 加わります Interface Builderは コード無しで シンプルで直感的な App UIがデザインでき コードを書かずに 目に留まるAppの作成に 集中できるツールです 今日は Xcode 13における Interface Builderで コントロールスタイルなどの プラットフォームの 最新機能を活用し Appを際立たせる方法を紹介します このビデオでは キャンバスの改善点 ボタンスタイルや テーブルコンテンツスタイル 階層シンボルや アクセシビリティなどの サポートについてお話しします まずはキャンバスの改善点からです Xcode 13のInterface Builderで まず気付くのがキャンバス 下部のコントロールバーです

左側のコントロールの機能は 以前と同じですが さらにコンパクトになり キャンバスのスペースを 拡張します デバイスを選ぶ ポップオーバーがあり 各種のデバイスが グループ分けされています グループをクリックすると 選んだデバイスグループが 拡張され デバイスが 見つけやすくなります

またシーンレイアウトや 方向 外観 そして 新しいアクセシビリティの ボタンがあります またキャンバスの アウトラインビューも改善しました ではInterface Builderの デモでお見せしましょう これはホテルAppの予約シーンで 左側のアウトラインビューに プロモシーンが隣に ないことに気づきます

予約シーンから プロモシーンに 続くのが普通です アウトラインビュー でのシーンの ドラッグアンドドロップが 可能になりました では予約シーンを プロモシーンの下に ドラッグします

これで両シーンが並び ナビゲートが簡単です ドラッグする間 Optionキーを押せば シーンをコピーできます もう一つの改善点は Constraintsのような アウトライングループが 選択可能になり キーボードでのナビゲーションと グループ全体の変更や 削除が可能になりました それではアウトラインビューで Constraint グループを選びます グループ内の Constraintを全て選びました 右矢印をクリックし グループ内の４つの エッジの制約が現れ インスペクタの全Constraintで 定数を簡単に変更できます

または 選択した後 Deleteキーで制約グループ 全体を削除できます 次に新しいボタンスタイルです

Xcode 13では 新しいプリセットスタイルの 作成ボタンがサポートされ お馴染みのPlainスタイルに加え Gray TintedとFilledの ３スタイルが加わりました これによりInterface Builderで 統一した美しいボタンが作れ Dynamic Typeや 複数ラインのタイトル アクセシビリティなど システム機能を 自動的にサポートします またボタンサイズや コーナースタイルなどの カスタマイズも可能です これは後ほど お話しします ボタンスタイルの詳細は 「UIKitボタンシステムについて」を 参照してください ではInterface Builderに 戻りましょう このシーンの下に 宿泊予約のボタンがあります ピンチズームで見てみましょう

塗りつぶしと 丸いコーナーで 目を惹きましょう Xcode 13では直接 Interface Builderで Button Styleを使って ボタンが作れます インスペクタを見てみましょう Buttonインスペクタに 新しくStyleが加わりました デフォルト以外だと 新しいButton Systemが選ばれ Dynamic Typeや Multiline Titlesなどが 自動的にサポートされます インスペクタの Styleメニューを選び 予約ボタンにFilledを選びます ボタンが青く塗られ 丸いコーナーに なりました 変更１つで済んだのです Button Styleは 素早く簡単です スタイルを選んだ後 プロパティが Buttonインスペクタに表示され さらにカスタマイズできます SubtitleやTitle Alignment 色のオプションに加え 画像の配置やコーナーのスタイル 詳細の背景設定などがあります

Filledスタイルは Appの基本色を使い 塗りつぶりを設定し UI上の重要なボタンを 適切で目立つ外観にします コーナーのスタイルは 角の半径を 設定せずに済みます デフォルトはDynamicで Dynamic Typeにより 自動的に調整され どのようなサイズでも ボタンの見た目を維持できます 一方で Fixedコーナースタイルの半径は サイズが変わっても同じです 調整が必要な場合 DynamicもFixedも 角の半径を調整できます さらに いろんなプリセットもあり Small Medium Largeと Capsuleがあり どれも動的なコーナーの サイズ調整をサポートします またSizeインスペクタで Button Sizeプロパティに アクセスでき Small Medium Largeの プリセットの ボタンサイズがあります ホテルAppに戻って さらにボタンスタイルを試しましょう チェックイン･アウトが 冴えません Tintedスタイルを使えば 透明性のある背景色で 重要ではあるものの Filledほど目立つ必要のない ボタンに最適です Commandキーを押しながら アウトラインビューの チェックインとチェックアウト ボタンを選びます

インスペクタの Button Styleから Tintedを選びます

このボタンがピッタリです プロモシーンにも Tintedが最適な ボタンがいくつかあります それでは見てみましょう キャンバスのミニマップで プロモシーンを ダブルクリックします

ここには ホテルのプロモが並び ゲストはGetボタンで 選ぶことができます それぞれのGetボタンは イメージに重ねてあり Tintedの透明背景で コントラストがより強調されます Commandキーを押しながら ３つのGetボタンを選びます

インスペクタのStyleから Tintedを選び 全ボタンのスタイルを 同時に変えます

いい感じです Tintボタンのタイトルと 背景色は Tint色に基づき 適切なコントラストになります またGetボタンをトグルさせ どのプロモが選択されたか 外見でわかるように したいと思います このために iOS 15の新機能である トグルボタンを使います Menuのインスペクタで Selection as Primary Optionとして トグルボタンを選びます

続ける前に予約シーンに ヘルプボタンを 足してみましょう

オブジェクトライブラリを開きます

新しいスタイルシステムを使う ボタンが事前設定されており Plainに加え Gray TintedとFilledがあります Grayは透明の灰色背景があり よりコントラストがあります このGrayをドラッグして ヘルプボタンとして使うため ナビゲーションバーに 配置します

Outline Viewで 新しいボタンを選びます

ピンチズームで拡大します

TitleとSubtitleを設定

Imageにquestion mark symbolを選びます

イメージとタイトルに 隙間を置くため Image Paddingを設定します

Interface Builderの利点は 変更結果を すぐ確認できることです どのコーナースタイルがいいか わからないので Capsuleを使ってみます

悪くはないですが イマイチです 今度はLargeを選んで ルックスを変えてみます 簡単でしたね ボタン作りに必要なものが すべて Buttonインスペクタにあります さらに高度なカスタマイズが必要なら Background Configurationを Customに設定し Corner RadiusやStrokeなど さらなる微調整が 可能になります

部屋を予約する前に 人数の入力が必要です ここでは １人から４人 選べることにします iOS 15の新機能 Pop Upボタンが これには最適です

Pop Upボタンは クリックされると リストが表示される ボタンです そこから選んだものが Pop Upボタンのラベルになります

ゲストラベルはあるので Pop Upボタンを足します オブジェクトライブラリを開き ドラッグします

Pop Upボタンも 設定可能です チェックインボタンに 合わせて Tintedを選びます

Optionキーを押しながらドラッグして Outline Viewにある 今のメニューを もう２つコピーします

最後に１から４の 値を設定します

MacでMac Catalyst 15を 使用している場合 スタイル付きのボタンは 自動的にmacOSバリアントに マップされ Macでも見栄えるAppを 簡単に作成できます iOS Pop Upボタンと マウスカーソルで 情報が得られるTool Tipは どちらもMac Catalyst 15 でサポートされています

Mac Catalyst版Appでの Pop Upボタン用に Controlインスペクタで Tool Tipを設定します

これで完了です 実行時に表示されるには メニューアイテムが アクションと繋がっている 必要があります

では実行してみましょう

Grayスタイルの ヘルプボタンに Tintedを使った 部屋のオプション Filledの予約ボタンが 使用されています

そしてプロモボタンには Tintedが使われています

続いてYoussefから Table Contentスタイルと 階層モードのシンボルと アクセシビリティのお話です では Youssef ありがとう Luke 次のワークフローは Table Viewセルの コンテンツ構成スタイルです いいホテルには レストランがあります このホテルもそうです 最近 このAppに レストランのメニューを 見られる機能を足しました その作業を続けます Table View Controllerを ２本指でダブルタップし ズームします このTable Viewには ホテルの設備のリストがあり レストランのTable Viewを 追加しました タイトルをサブタイトルより 目立たせましょう Table Viewセルの コンテンツ構成スタイルで それが可能になります

これらは新しいセルレイアウトで ヘッダーグループや 値のセル フッターグループがあります これらはイメージと使え Dynamic Typeのような機能も 使えます Interface Builderで このTable Viewのセルの スタイルを調整しましょう ドキュメントアウトラインで すべてのセルを選び

Attributesインスペクタの 一番上にあるStylesドロップダウンを選ぶと すべてのコンテンツ構成スタイルが 表示されます Subtitleセルを選びます 新しいスタイルを選んだので Image Paddingを インスペクタ内で変更できます ラベルとイメージの間に 少し間を入れることにします これで大きく明確な ラベルになりました これで期待通り 見た目が改善されました でもカラーが必要に感じます 階層シンボルが 役に立ちます iOS 15ではシンボルに 複数レイヤーを与えられ レイヤー毎に色を特定できます これによりシンボルに 色彩と深さを与えられます これには２つの レンダーモードがあります 一つ目は階層タイプで シンボルの第一レイヤーに 色を指定でき それ以外のレイヤーには 第一レイヤーを薄めた色が 適用されます もう一つはパレットで シンボルのレイヤーに 個々の色を指定できます 新しいシンボルの レンダリングモードについては 「SF Symbolsの新機能」をご覧ください このTable Viewでは モノクロを使用しています シンボルの第一要素を 強調させたいのですが その場合 階層モードが最適です このモードでレンダーした シンボルがこれらです レイヤー間の不透明度の違いで 強調性が出せたので Interface Builderで これを採用しましょう 再びすべてのcellを選び シンボルのレンダーモードを選びます

Hierarchicalを選び Appのカラースキーマにあう Tintカラーを選びます

コンテンツ構成スタイルと 階層モードのシンボルを使うことで ホテルの設備メニューが 新鮮なルックスになりました それでは次は アクセシビリティです Menu Item Detail Viewで レストランの あるメニューの詳細が見れます Description Labelに Subhead Text Styleが使われ Dynamic Typeを サポートします このラベルは すでに幅広いため タイプ設定によっては おそらくレイアウトに 問題が起きるでしょう Xcode 13の Interface Builderで iOSシーンが アクセシビリティに どう反応するか デザイン時に確認できます キャンバスの下部バーには アクセシビリティ メニューがあります これをクリックすると ここで調整できる 設定が表示されます テキストサイズや フレームバリュー 色などが調整できます これらを作動させ プレビューすることで 予定通り表示されるか 確認できます Description Labelに戻り 大きいサイズでも 大丈夫か確認します アクセシビリティメニューで 設定をオンにし Dynamic Type スライダーを動かします Description Labelが 表示領域外に出ています Constraintメニューを開け Trailing Constraintを足し 解決します ラベルの行数も Attributeインスペクタの Linesで０にします

これでラベルは必要なだけ 改行されます これによりラベルは 中途カットされず テキストにフィットします Dynamic Typeスライダーで Description Labelがどのサイズでも フィットすることが確認できます

デザイン時に アクセシビリティ設定を プレビューできることで Interface Builder内で iOS内の アクセシビリティ設定を 素早く確認できるのは 非常にパワフルです これらの変更を 加えたところで シミュレータでAppを 試してみましょう ホテル設備のTable Viewは Table Viewセルの コンテンツ構成スタイルで 希望のレイアウトになりました 階層レンダーモードで シンボルを設定し シンボルの主要素が 目立つようになりました メニューの詳細を クリックすると すべて画面内に収まっています おさらいです デバイスバーが小型化し Outline Viewが 向上されました 新しいボタンスタイルのシステムで ボタンを カスタマイズできます iOSとMac Catalystで Pop Upボタンを使用でき Table Viewセルの 新しいレイアウトを 設定する方法も カバーしました 新しいレンダーモードで シンボルに色と強調を 与えられます そしてiOSの アクセシビリティ設定で Appが期待通りの動作になるよう デザイン時に 確認することができる アクセシビリティ機能を 紹介しました これらすべての変更を 一行もコードを 書くこともなく デザインに集中しながら 達成できました

今日 お話しした すべてのツールで Appのアップデートにお役立てください 合わせて 「UIKitボタンシステムについて」と 「SF Symbolsの新機能」も ぜひ ご覧ください ありがとうございました [パーカッシブな音楽]