コンテンツに移動

よくアクセスするページ

最近アクセスしたページ

navigation

簡単なユーザー インターフェースの作成

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

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

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

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

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

Layout Editor を開く

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

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

  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 in Editor] をクリックし、 [Pixel XL] を選択します。

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

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

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

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

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

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

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

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

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

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

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

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

その結果は、図 5 のスクリーンショットのようになります。

ボタンを追加する

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

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

その結果は、図 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. 図 7 新しい文字列を追加するためのダイアログ

    [Add Key] をクリックして、 テキスト ボックスの「ヒントテキスト」として新しい文字列を作成します。
    1. キーの名前には「edit_message」と入力します。
    2. 値には「Enter a message」と入力します。
    3. [OK] をクリックします。
  4. 名前「button_send」と値「Send」で別のキーを追加します。

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

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

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

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

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

図 8. [Center Horizontally] をクリックした結果

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

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

  1. 両方のビューを選択してから(1 つのビューを選択してから、Shift キーを押しながらもう 1 つのビューをクリックします)、いずれかのビューを右クリックして、[Chain > Create Horizontal Chain] を選択します。

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

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

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

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

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

ConstraintLayout で実行できるチェーンとすべての操作の詳細については、ConstraintLayout による応答性が高い UI の作成をご覧ください。

アプリを実行する

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

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

このサイトでは、ユーザーが選択したサイトの言語と表示設定を保存する目的で Cookie を使用しています。

Android デベロッパー向けの最新情報やヒントを入手して、Google Play での成功を手に入れましょう。

* 必須

送信しました

WeChat で Google Developers をフォローする

このサイトをで表示しますか?

ページの表示言語としてを選択しましたが、このサイトの言語はに設定されています。

言語設定を変更してこのサイトをで表示しますか?言語設定を変更する場合は、各ページの下にある言語メニューを使用してください。

このクラスには、API レベル 以上が必要です。

API レベル が選択されているため、このドキュメントは非表示になっています。左のナビゲーションの上にあるセレクタを使って、ドキュメントの API レベルを変更できます。

アプリに必要な API レベルを指定する方法について、詳しくは異なるプラットフォーム バージョンのサポートをご覧ください。

Take a short survey?
Help us improve the Android developer experience. (April 2018 — Developer Survey)