Google は、黒人コミュニティに対する人種平等の促進に取り組んでいます。取り組みを見る

簡単なユーザー インターフェースを作成する

このレッスンでは、Android Studio Layout Editor を使用して、テキスト ボックスとボタンを含むレイアウトを作成する方法について説明します。次のレッスンでは、今回のレッスンを基に、ボタンをタップしたときにテキスト ボックスのコンテンツを別のアクティビティに送信するようにアプリを設定する方法について説明します。

図 1: 最終的なレイアウトのスクリーンショット

Android アプリのユーザー インターフェース(UI)は、「レイアウト」と「ウィジェット」の階層として作成されます。レイアウトは、ViewGroup オブジェクトであり、子ビューを画面上にどのように配置するのかを制御するコンテナになります。ウィジェットは、View オブジェクトであり、ボタンやテキスト ボックスなどの UI コンポーネントを示します。

図 2: ViewGroup オブジェクトがレイアウト内でブランチを形成し、View オブジェクトを格納する様子を示す図

Android には、ViewGroup クラス用と View クラス用の XML ボキャブラリが用意されています。そのため、ほとんどの UI は XML ファイル内で定義できます。ただし、このレッスンでは、XML の記述方法を説明するのではなく、Android Studio Layout Editor を使用してレイアウトを作成する方法について説明します。Layout Editor がデベロッパーの代わりに XML を記述するため、ビューをドラッグ&ドロップするだけで、簡単にレイアウトを作成できます。

このレッスンは、デベロッパーが Android Studio 3.0 以降を使用していること、そして、独自の Android プロジェクトを作成済みであることを前提としています。

Layout Editor を開く

まず、次の手順に沿って、ワークスペースをセットアップします。

  1. [Project] ウィンドウで、[app] > [res] > [layout] > [activity_main.xml] を開きます。
  2. Layout Editor の作業エリアを広げるには、[Project] ウィンドウを非表示にします。そのためには、[View] > [Tool Windows] > [Project] を選択するか、[Android Studio] 画面の左側にある [Project] をクリックします。
  3. エディタに XML ソースが表示される場合は、ウィンドウの下部にある [Design] タブをクリックします。
  4. [Select Design Surface] をクリックして、[Blueprint] を選択します。
  5. Layout Editor ツールバーで [Show] をクリックして、[Show All Constraints] がオンになっているか確認します。
  6. [Autoconnect] がオフになっているか確認します。[Autoconnect] がオフになっている場合、ツールバーのツールチップに [Enable Autoconnection to Parent] が表示されます。
  7. ツールバーの [Default Margins] をクリックして、[16] を選択します。必要に応じて、後で各ビューのマージンを調整できます。
  8. ツールバーの [Device for Preview] をクリックして、[5.5, 1440 × 2560, 560 dpi (Pixel XL)] を選択します。

Layout Editor は図 3 のようになります。

図 3: activity_main.xml を表示している Layout Editor

詳細については、Layout Editor の概要をご覧ください。

左下の [Component Tree] パネルに、レイアウトのビュー階層が表示されます。この場合、ルートビューは ConstraintLayout で、その中に TextView オブジェクトが 1 つだけ含まれています。

ConstraintLayout は、兄弟ビューや親レイアウトの制約に基づいて、各ビューの位置を定義するレイアウトです。この方法により、フラットなビュー階層を持つシンプルなレイアウトと複雑なレイアウトの両方を作成することができます。このタイプのレイアウトの場合、ネスト レイアウトが不要になります。レイアウト内にレイアウトがあるネスト レイアウト(図 2 を参照)の場合、UI の描画に必要な時間が増加する可能性があります。

図 4: ConstraintLayout 内に配置された 2 つのビューを示す図

たとえば、次のようなレイアウトを宣言できます(図 4 を参照)。

  • ビュー A が親レイアウトの上部から 16 dp 離れたレイアウト。
  • ビュー A が親レイアウトの左側から 16 dp 離れたレイアウト。
  • ビュー B がビュー A の右側から 16 dp 離れたレイアウト。
  • ビュー B の上部とビュー A の上部を揃えたレイアウト。

以降のセクションでは、図 4 のレイアウトに類似したレイアウトを作成します。

テキスト ボックスを追加する

図 5: 親レイアウトの上部と左側を基準にして制約が適用されたテキスト ボックス

テキスト ボックスを追加する手順は次のとおりです。

  1. まず、レイアウト内にすでに存在しているコンテンツを削除する必要があります。そのうえで、[Component Tree] パネルの [TextView] をクリックして、Delete キーを押します。
  2. [Palette] パネルで、[Text] をクリックします。利用可能なテキスト コントロールが表示されます。
  3. [Plain Text] を Design Editor にドラッグして、レイアウトの上部付近にドロップします。これは、プレーン テキスト入力を受け入れる EditText ウィジェットです。
  4. Design Editor 内で、ビューをクリックします。4 つの角に、ビューのサイズを変更する正方形のハンドルが表示され、4 つの辺に、円形の制約アンカーが表示されます。詳細に制御する場合は、エディタ上でズームインします。そのためには、Layout Editor ツールバーの [Zoom] ボタンを使用します。
  5. 上辺のアンカーを長押ししたまま、レイアウトの上部にスナップするまでドラッグして、ドロップします。これで制約が適用されます。ビューの位置は、設定したデフォルト マージン内に制約されます。今回の例の場合、レイアウトの上部から 16 dp の位置に設定されます。
  6. 同じプロセスを使用して、ビューの左側からレイアウトの左側までの制約を作成します。

結果は図 5 のようになります。

ボタンを追加する

図 6: テキスト ボックスの右側とベースラインを基準にして制約が適用されたボタン

  1. [Palette] パネルで、[Buttons] をクリックします。
  2. [Button] ウィジェットを Design Editor にドラッグして、右辺付近にドロップします。
  3. ボタンの左側からテキスト ボックスの右側までの制約を作成します。
  4. ビューの水平方向の配置を制約するには、テキスト ベースラインの間に制約を作成する必要があります。そのためには、ボタンを右クリックして、[Show Baseline] Layout Editor 内でベースライン アクションを表示する を選択します。ボタンの内部に、ベースライン アンカーが表示されます。このアンカーを長押ししたまま、隣のテキスト ボックスに表示されるベースライン アンカーにドラッグします。

結果は図 6 のようになります。

注: 上部または下部にあるエッジを使用して、水平方向の配置制約を作成することもできます。ただし、ボタンの画像にはその周囲にパディングが含まれているため、この方法で作成した場合、視覚的な配置が正しくなりません。

UI 文字列を変更する

UI をプレビューするには、ツールバーの [Select Design Surface] をクリックして、[Design] を選択します。テキスト入力とボタンラベルはデフォルト値に設定されています。

UI 文字列を変更する手順は次のとおりです。

  1. [Project] ウィンドウを開き、[app] > [res] > [values] > [strings.xml] を開きます。

    これは、文字列リソース ファイルです。このファイルで、すべての UI 文字列を指定できます。すべての UI 文字列を 1 つの場所で管理できるため、検索や、アップデート、ローカライズが簡単になります。

  2. ウィンドウの上部にある [Open editor] をクリックします。Translations Editor が開きます。このエディタでは、シンプルなインターフェースを通じて、デフォルト文字列の追加や編集を行うことができます。また、すべての翻訳文字列を簡単に整理できます。
  3. [Add Key] をクリックして、テキスト ボックス用の「ヒントテキスト」となる新しい文字列を作成します。この段階で、図 7 に示すウィンドウが開きます。

    図 7: 新しい文字列を追加するためのダイアログ

    [Add Key] ダイアログ ボックスで、次の手順を行います。

    1. [Key] に、「edit_message」と入力します。
    2. [Default Value] に、「Enter a message」と入力します。
    3. [OK] をクリックします。
  4. 名前「button_send」と値「Send」で別のキーを追加します。

これで、各ビューに文字列を設定できるようになります。レイアウト ファイルに戻るには、タブバーの [activity_main.xml] をクリックします。そして、次のように文字列を追加します。

  1. レイアウト内で、テキスト ボックスをクリックします。[Attributes] ウィンドウが右側に表示されていない場合は、右側のサイドバーにある [Attributes] をクリックします。
  2. 現在「Name」に設定されている [text] プロパティを見つけて、その値を削除します。
  3. [hint] プロパティを見つけて、テキスト ボックスの右側にある [Pick a Resource] をクリックします。表示されるダイアログのリストで、[edit_message] をダブルクリックします。
  4. レイアウト内にあるボタンをクリックして、現在「Button」に設定されている [text] プロパティを見つけます。そして、[Pick a Resource] をクリックして、[button_send] を選択します。

テキスト ボックスのサイズをフレキシブルにする

さまざまな画面サイズに対して応答性に優れたレイアウトを作成するには、テキスト ボックスを引き延ばして、ボタンとマージンを除く残りの水平方向スペースすべてを埋めるようにします。

手順を進める前に、ツールバーの [Select Design Surface] をクリックして、[Blueprint] を選択します。

テキスト ボックスをフレキシブルにする手順は次のとおりです。

図 8: [Create Horizontal Chain] を選択した結果

図 9: クリックして幅を [Match Constraints] に変更

図 10: 残りのスペースを埋めるようにテキスト ボックスを拡張

  1. 両方のビューを選択します。そのためには、いずれかのビューをクリックして、Shift キーを押しながらもう一方のビューをクリックし、いずれかのビューを右クリックして、[Chains] > [Create Horizontal Chain] を選択します。図 8 のようにレイアウトが表示されます。

    チェーンは、複数のビューの間に設定される双方向の制約であり、チェーンで連結したビューは、まとめて配置することができます。

  2. ボタンを選択して、[Attributes] ウィンドウを開きます。そして、[Attributes] ウィンドウの上部にあるビュー インスペクタを使用して、右マージンを 16 dp に設定します。
  3. テキスト ボックスをクリックして、属性を表示します。図 9 のコールアウト 1 のように、幅インジケーターを 2 回クリックして、[Match Constraints] に設定します。

    「Match Constraints」とは、水平方向の制約とマージンの定義を満たすように幅を拡張することを意味します。したがって、テキスト ボックスは、ボタンとすべてのマージンを除く残りの水平方向スペースを埋めるように引き延ばされます。

これで、図 10 のようなレイアウトが完成します。

レイアウトが想定どおりに作成されなかった場合は、下記の最終的なレイアウト XML を表示するをクリックして、正しい XML を確認してください。[Text] タブに表示されている内容と比較してください。なお、属性の順序が異なっていても問題ありません。

チェーンの詳細や、ConstraintLayout を使用して実行できる処理については、ConstraintLayout を使用してレスポンシブ UI を作成するをご覧ください。

アプリを実行する

前のレッスンでアプリをすでにデバイスにインストール済みの場合は、ツールバーの [Apply Changes] をクリックして、新しいレイアウトを使用してアプリをアップデートします。あるいは、[Run] をクリックして、アプリをインストールして実行します。

ここでボタンをタップしても何も起こりません。ボタンをタップしたときに起動する別のアクティビティを作成するには、次のレッスンに進んでください