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

このレッスンでは、Android Studio Layout Editor を使って、テキスト ボックスとボタンが含まれたレイアウトを作成します。次のレッスンでは、テキスト ボックスのコンテンツを別のアクティビティに送信することにより、アプリがボタンのタップに応答するようにします。

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

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

図 2.レイアウト内での ViewGroup オブジェクトの分岐や View オブジェクトとの親子関係を表す階層図

Android では、ViewGroup および View クラスの XML ボキャブラリが提供されるため、ほとんどの UI は XML ファイルで定義されます。ただし、このレッスンでは、XML の記述を学習するのではなく、Android Studio の Layout Editor を使ってレイアウトを作成する方法を説明します。Layout Editor では、ビューをドラッグ&ドロップしてレイアウトを簡単に作成できます。

このレッスンでは、Android Studio 3.0 を使用して前回のレッスンの説明に従って Android プロジェクトを作成していることを想定しています。

Layout Editor を開く

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

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

これで、エディタは図 3 のように表示されます。

図 3. activity_main.xml が表示された Layout Editor

詳しくは、Layout Editor の概要をご覧ください。

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

ConstraintLayout は、兄弟ビューや親レイアウトの制約に基づいて各ビューの位置を定義するレイアウトです。これにより、フラットなビュー階層を持つ単純なレイアウトと複雑なレイアウトの両方を作成できます。つまり、UI の描画に時間がかかる場合があるネストされたレイアウト(図 2 に示すようなレイアウト内のレイアウト)を作成する必要がなくなります。

図 4. ConstraintLayout 内に配置された 2 つのビューの図

たとえば、(図 4 で)以下のレイアウトを宣言できます。

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

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

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

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

  1. 最初に、レイアウトにすでに適用されている制約を削除する必要があります。その後、[Component Tree] ウィンドウの [TextView] をクリックして Delete キーを押します。
  2. [Palette] で [Text] をクリックして、使用可能なテキスト コントロールを表示します。
  3. [Plain Text] をデザイン エディタにドラッグし、レイアウトの上部近くにドロップします。これは、書式なしテキストの入力を受け入れる EditText ウィジェットです。
  4. デザイン エディタでビューをクリックします。ここで、4 つの角にサイズ変更ハンドル(正方形)が表示され、4 つの側面に制約アンカー(円)が表示されます。

    より細かくコントロールするには、ツールバーのボタンを使用してエディタで拡大します。

  5. 上部のアンカーを押し続けながらレイアウトの上部にスナップするまでドラッグし、ドロップします。これで制約が適用されました。ビューをレイアウトの上部から 16dp 離れた位置に配置するように指定されます(デフォルトのマージンを 16dp に設定したため)。
  6. 同様に、ビューの左側からレイアウトの左側に対して制約を適用します。

これで、図 5 のスクリーンショットのようになります。

ボタンを追加する

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

  1. [Palette] で [Buttons] をクリックします。
  2. [Button] をデザイン エディタにドラッグし、右側近くにドロップします。
  3. ボタンの左側からテキスト ボックスの右側に対して制約を適用します。
  4. 水平方向に配置されたビューに制約を適用するには、テキスト ベースラインの間に制約を作成する必要があります。ボタンをクリックし、デザイン エディタ内の選択したビューのすぐ下に表示される [Baseline Constraint] をクリックします。ボタン内にベースライン アンカーが表示されるので、このアンカーを押し続けながらテキスト ボックス内に表示されるベースライン アンカーにドラッグします。

これで、図 6 のスクリーンショットのようになります。

注: 上端または下端にあわせて水平方向に整列することもできますが、ボタンにはその画像の周囲にパディングがあるため、この方法でこれらのビューを揃えると視覚的に正しく整列されません。

UI 文字列を変更する

UI をプレビューするには、ツールバーの [Select Design Surface] をクリックして、[Design] を選択します。テキスト入力には「Name」があらかじめ設定されていて、ボタンに「Button」というラベルが付いています。

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

    これは文字列リソース ファイルです。ここですべての UI 文字列を指定する必要があります。UI 文字列を指定すると単一の場所ですべての UI 文字列を管理できるようになり、(レイアウトまたはアプリコードのハードコード文字列と比較して)検索、アップデート、ローカライズが簡単になります。

  2. エディタ ウィンドウの上部にある [Open editor] をクリックして、Translations Editor を開きます。このエディタは、デフォルトの文字列を追加および編集できるシンプルなインターフェースを備えており、変換されたすべての文字列を簡単に整理できます。
  3. [Add Key] をクリックして、テキスト ボックスの「ヒントテキスト」として新しい文字列を作成します。

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

    1. [Add Key] ダイアログで、キーの名前には「edit_message」と入力します。
    2. 値には「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. レイアウトでボタンをクリックし、[text] プロパティ(「Button」に設定されています)を見つけて [Pick a Resource] をクリックしてから [button_send] を選択します。

テキスト ボックスのサイズを柔軟にする

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

手順を進める前にツールバーで [Show] をクリックし、[Blueprint] を選択します。

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

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

図 10. テキスト ボックスが引き延ばされて残りのスペースを埋める

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

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

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

    「Match Constraints」とは、水平の制約とマージンによって幅が決定されることを意味します。したがって、テキスト ボックスが引き延ばされて水平方向のスペースを埋めています(ボタンとすべてのマージンを考慮)。

これでレイアウトが完了し、図 10 のように表示されます。

レイアウトが予想どおりに表示されない場合は、以下をクリックして正しい XML を表示し、[Text] タブに表示される XML と比較します(属性が異なる順番で表示されても問題ありません)。

ConstraintLayout で実行できるチェーンとすべての操作について詳しくは、ConstraintLayout でレスポンシブ UI を作成するをご覧ください。

アプリを実行する

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

ここでボタンをタップしても何も起こりません。ボタンをタップしたときに別の activity が開始されるようにするには、次のレッスンに進んでください