キーボードレイアウトのガイド

♪ ♪

こんにちは 私は Kasia Wawerです Keyboards UIチームのエンジニアです 素晴らしい キーボードレイアウトの案内をします 皆さんとお話できることを とても楽しみにしています キーボードをフレームベースの過去から オートレイアウトの未来へ 新しいガイドの話からツアーを始めましょう キーボードをレイアウトに より溶け込ませた新しい機能をご紹介します そして 最後にはキーボードとは何か？ 哲学的に言えば… キーボードの種類を考えます すぐには思いつかないようなケースもあります それではツアーを始めましょう 多くのものと同様これも古くから始まっています 以前にAppでキーボードを操作したこと 古くからキーボードがどのように扱われてきたか 通知に登録することです 適切なオフセットと動画の 通知書の情報から 計算してみて 最後に それを使ってレイアウトを調整します 通知機能張り付いています 非推奨ではありません 詳しくはこちらをご覧ください より良いテキストへの鍵 2017年「Input Experience」 通知がどの使用されるか簡単な例を見てみましょう カスタムガイドの場合 さて このコードをコピーしてはいけません なぜなら 私たちは置き換えようとしています ここではiOS 15以前のキーボードの扱い 通知に対応するためのあなたがカスタムガイドと アンカーを作成する そして 登録すると 適切な通知を受けることができます 通常 少なくともwillShowとwillHideと なりますが たまにフレームの変更などあります 次に通知からフレーム情報を取得して 上記の通知に応答します キーボードが画面から離れている場合は 自分のビューとセーフエリアガイドに合わせて 調整していることを確認してください 通知から動画の情報を得て 最後に 合わせてガイドを変更します さて それはトンではなく すぐに複雑になります 今日 私が発表するのは新しい追加機能で 自動レイアウトコレクション

さて あなたのワクワクを抑えるために この中に飛び込んでいきます KeyboardLayoutGuideはiOS 15の最新機能です レイアウトガイドですね 既存のレイアウトのビューやガイドを 制限することができます レイアウトガイドに慣れていない方へ レイアウトガイドとはビューを使わずに レイアウト上の空間を表現する方法です ビューと同じようにアンカーを持っています レイアウトガイドのApp内でキーボードが 占めるスペースを表現し レイアウトが考慮できるようにします これで完成です ほとんどです 先ほどのコードの更新について 代わりにこれを使います これがその通知コードです まだコピーしないでください 緑のマークが出るまで待つ さて これであなたは先に 追いかけていたアンカーを外します 自分のレイアウトガイドからビューの keyboardLayoutGuideに変更します

そして 通知のための登録はもう必要ありません そして その通知に返信する必要もありません これで おしまいです すべてのコードはこの1行に集約されます 実際の動作を見てみましょう 次のようになります通知コードを使って クリックするとキーボードが表示されます ガイドを使い表示させるとこんな感じです

お気づきかもしれませんがローカライズ以外の 殆ど同じに見えましたが ちょっとしたポイントです あなたがする必要はほとんどありません 同じ結果になります ガイドへのアップデートについて お話ししましょう UIViewのプロパティです ほとんどの場合は ガイドの「topAnchor」を使って更新します ガイドはキーボードの動画に合わせます 持ち上げたり 消したり 高さの変化にも追従します なぜなら 時々 キーボードが 高い場合があるからです 低い時もあります ガイドはどんなサイズでも対応できます キーボードがドック入りして いない場合 デフォルトでは ガイドは画面の下に表示されます ウィンドウの幅に設定すると 一番上のアンカーに結びつけたものがついてきます これで セーフエリアの挿入を考慮しています これでもう心配する必要はありません 基本的な使い方としてはそれだけで十分でしょう さて ここからが本題です面白いことを話しましょう なぜ私たちは通常のレイアウトガイド ではなくニュークラスを採用したか そうですね 今までのキーボードではできなかった ことを できるようにしたかったのです 次のステップは フルキーボードをAppへの統合 なぜ「統合」と言うのか？ さて 私はよく耳にします キーボードについて避けなければならないもの あるいは レイアウトの邪魔をするもの しかし キーボードはAppの一部です UIKeyboardLayoutGuideの主な目的の1つは ユーザーがテキストを入力する様々な方法に 対応する能力を開発者に提供し キーボードをレイアウトの一部として 考えることができるようにすることです 今までにはできなかった方法だと思います この新機能をどのように活用してもらえるか とても楽しみです では 次はkeyboardLayoutGuideです どんなレイアウトガイド？

能力がありますUIKeyboardLayoutGuideです 選択によりキーボードをフォロー することができます 新しいプロパティを使って followingUndockedKeyboard デフォルトではfalseですこれをtrueに設定すると ガイドは キーボードがドッキングしてない状態や フローティング状態でもキーボードに追従します キーボードがどこにあっても レイアウトがどう反応するか 自由にコントロールできます

自動でのdrop-to-bottomがなくなりました ドッキング解除時の通知を聞くことはありません レイアウトガイドはキーボードのあるところ その情報を持っていると いうことは より多くのことを 意識しなければならないということです キーボードの種類に応じてレイアウトの反応を意識 UIKeyboardLayoutGuideはサブクラス 別の新レイアウトガイドのUITrackingLayoutGuide TrackingLayoutGuideと呼んでいます 画面上を移動する際に変更したい制約を 追跡するからです 起動する制約の配列を与えることができます 特定のエッジに付近で起動離れると解除される 活性化する配列 and/or 具体的には エッジから離れているときは となり 近づくと解除されます これで何ができるのか例を見てみましょう それを実現するために必要な コードを見てみましょう これがテストAppです テキストフィールドといくつかのコントロール キーボードの上に置けます しかし 画面上部に近づくと画面の上の方になります

画面外に出ないように 下にドロップしてほしい

また キーボードが左右に移動します UIの他の部分が少しずれるように スペースを確保するために では どのように実現しているのでしょうか？ ここで いくつかのコードを見てみましょう 次のスライドでは editViewは テキストとコントロールを持つビュー そして ImageViewは画像を 表示するためのビューです 識別子を使うべきであることに注意してください サンプルコードでご覧いただけます スライドの方がしっくりきます では まず縦軸に 何が起きているのか 最初に定義するのは結びつける配列です editView下部とKeyboard LayoutGuideトップに結ぶ

アクティブに設定します ガイドが上から離れている時のみ有効にしています 近くにあると無効になるように

次に キーボードが近づいてきたときに 必要な制約の別の配列を定義します keyboardLayoutGuideのトップ セーフエリア下部を使います 簡単なビジュアルの案内です ここでは ガイドとeditViewです 現在はトップから離れています awayFromTopConstraintsが有効になっています しかし ガイドを動かすとトップに近づいていきます awayFromが解除されnearTopが有効になります そして nearTopConstraintsが有効になります ビューの下にドロップします トップから離れると逆になります 次に 水平方向の動きを見てみましょう キーボードがリーディングと トレーリングの両エッジから離れているときに editViewをキーボードの中心に置きたい imageViewはビューの中央に配置したい 制約を定義しリードとトレーリングの両方から 離れた時に有効になるよう設定しています

では エッジに近づいたとき どうなるかを設定してみます

editViewをトレーリングに移行させたい トレイリングエッジの時は リーディングに移行します では まず処理しましょう imageViewがキーボードの 邪魔にならないようにするため どちらかの端に近づいたら中央からキーボードと 反対側に向かって先行して移動させます キーボードが後縁にある場合 その逆も同様です 設定するだけでアクティブにします 適切なエッジの近いとき キーボードがその領域を越えると 起動します領域外だと無効になります これでおしまいです 超高度なキーボード統合 自分だけのレイアウト もう1度見てみましょう editViewがあります フローティングキーボードのままで 上に向かっていくと 下にドロップします そして 横に移動すると 先ほどお話したようなことが起こります かっこいいですねー！ さて 次はnearとは何かについて awayFromとはキーボードのためのものです ドッキングキーボードは底面に近い位置にあり 他のエッジからawayFromと見なされます

スプリットキーボードはエッジがawayFromになり トップエッジに近づくこともあります フローティングキーボードは どのエッジからも離れています 隣接する2つのエッジに同時に近づくこともできます これにより潜在的に面白い コンフリクトには 気をつけなければなりません すべてが適用されるのは followsUndockedKeyboardをtrueに設定した場合のみ ここから先は その前提で話を進めていきます はい それでは最後のストレッチです フルキーボード統合のための考察 キーボードはキーボードでキーボード… そうでなくなるまで フォローを選択するとアンドックキーボードは 考えるべきことが増えます どんなことに気をつければいいのでしょうか？ レイアウト設計時の注意点？ 必ず覚えておいてください フローティングキーボードは すべてawayFromになります すべてがawayFromの場合正しくレイアウト されるための十分な情報はありますか？ また 次のような場合はキーボードが 下端がawayFrom 上端に近い場合はどうなりますか？ 気をつけたいのはキーボードの topAnchorにも結びついています そこまで進むので 気をつけてくださいね それを解決する方法は制約を設けることです キーボードが下端から離れているとき ビューをキーボードのトップアンカーから safeAreaLayoutGuideの下部に移動します

ユーザーはいつでもキーボードを動かせます どこか特定の場所にあるとは言えません それを覚えておいてくださいね

まれな例があります スプリットキーボードです スプリットとアンドックはすべてのエッジ awayFrom 頂点に近づくまで ドッキングキーボード同様 リーディングやトレーリング からも常に離れています 新しいことをお伝えします 今年はカメラを使ってAppに文字を入れる 新しい方法があります

やっぱりキーボードですね ガイドを利用することができます

通常のドッキングキーボードと同じです フルスクリーンに対応する数少ない キーボードの一つです 今年のカメラを使ったテキスト入力の活用は 「Appのキーボード入力に カメラを使用する」をご覧ください 新しい方法の続きです ハードウェアキーボードが付いている場合は？ 今年の新機能として ショートカットバーが常に全角ではなく 適応性のあるものになりました 使用している言語やバーにあるボタンの 数によって幅が変わります

常に画面の幅いっぱいに表示されていましたが 今回ドック入りしていない キーボードを踏襲した場合 実際にバーの本当の前縁と後縁を使用することが できるようになりました では エッジについてはどうでしょうか これは常に底辺に近い位置にあり 他の3つのエッジはawayFromです しかし それは崩壊可能です それを崩すとリーディングエッジや トレーリングエッジの近くにもなります

これは いくつかの理由の一つです キーボードwidthAnchorの使用について 非常に小さくてもいいし 画面の幅いっぱいに表示してもいい ツアーの最も楽しい部分に入りましょう 画面上で唯一のAppではない場合はどうでしょう ドックされていないキーボードを追うには？ キーボードがAppのスペースから離れることが あることを覚えてください そうなると棄却されたものとして 扱うことになります 次に Appの幅が最も狭くなると 上端と下端が出てきますがキーボードがAppの上に あるかどうかに関わらずリーディングと トレーリングはawayFromに とどまります ガイドはキーボードのどの部分がAppの ウィンドウの上に あるかを考慮したサイズになっています 何を示すビジュアルか見てみましょう これらはすべて 以下の場合にのみ適用されます UndockedKeyboardをtrueに設定しています まだの方はガイドは画面下にあります フルスクリーンの場合ウィンドウの幅いっぱいに 表示されます キーボードが真ん中にあります すべてawayFromです すべての awayFrom制約が有効になり すべての near 制約が無効になっています

他のAppが画面に表示されているとき キーボードの幅に合わせて すべてがawayFromにできます 水平方向に近づくためには より少ない動きが必要です これは ポートレートの場合も同様です ハーフスクリーンでは同じ場所のキーボードが リーディングエッジに 近い位置にありガイドはApp上のキーボードの 部分だけに合わせたサイズになっています

限られたAppはガイドが常に考慮され awayFromとなりますiPhoneやドッキング キーボードと同じように 上端に近い位置になることもあります

そして お気づきのようにガイドのサイズは App上の部分のみを考慮しています キーボードをドッキング時 再びフルサイズになります リーディング トレーリング トップからも離れています レイアウトガイドはApp上に合わせた サイズとなっていることに注意してください スライドオーバーのAppは 同様にサイズが変更されます これまでの例と今回のデモコードでは すべて処理されるはずです このシナリオのいずれかに 該当する可能性があることを 念頭に置く必要があります これで準備完了ですAppをキーボード統合の 次のレベルへと導きます keyboardLayoutGuideです UITrackingLayoutGuideの 高度な機能を利用できるAppであれば ぜひ利用してみてください そして 最も重要なことは キーボードの設置にお困りの方は キーボードをレイアウトに 組み込むことを考えてみてくさい すでに お考えであれば自分のビジョンを 実現するためのツールがさらに増えます これで このツアーは終わります 終了する前に皆様のアイテムが すべて揃っているかご確認してください ギフトショップをお忘れなく WWDCをお楽しみください [極めて優美な 打楽の音楽]