Skip to content

Most visited

Recently visited

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 2.3 以降を使用して、前のレッスンの説明に従って 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. [Show Blueprint] をクリックして、 ブループリント レイアウトのみが表示されるようにします。
  5. [Show Constraints] がオンになっていることを確認します。ツールバーのツールチップは [Hide 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 つの側面に制約アンカー(円)が表示されます。

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

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

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

ボタンを追加する

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

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

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

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

UI 文字列を変更する

ツールバーの [Show Design] をクリックして、 UI のプレビューを表示します。テキスト入力に "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. レイアウトのテキスト ボックスをクリックし、右側に [Properties] ウィンドウが表示されていない場合は、右側のサイドバーにある [Properties] を をクリックします。
  2. [hint] プロパティを見つけて、そのテキスト ボックスの右側にある [Pick a Resource] を クリックします。表示されたダイアログのリストで [edit_message] をダブルクリックします。
  3. 表示されているテキスト ボックスのプロパティで、[text] プロパティの値(現在、"Name" に設定されている)を削除します。
  4. ここで、レイアウトのボタンをクリックし、[text] プロパティの横にある [Pick a Resource] をクリックしてから、 [button_send] を選択します。

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

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

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

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

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

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

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

    目的はビューを中央に揃えることではありませんが、こうすると、2 つのビューの間にチェーンをすばやく作成できます。チェーンは複数のビュー間の双方向の制約であり、チェーンで連結されたビューを揃えて配置することができます。ただし、チェーンにより水平マージンが削除されるため、後でマージンを追加します。

  2. ボタンを選択し、[Properties] ウィンドウを開きます。左マージンと右マージンの両方を 16 に設定します。
  3. テキスト ボックスを選択し、左マージンのみを 16 に設定します。
  4. 表示されているテキスト ボックスのプロパティで、図 9 のコールアウト 1 で示しているように、幅インジケーターをクリックして [Match Constraints] に 設定 します。

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

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

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

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

アプリを実行する

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

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

This site uses cookies to store your preferences for site-specific language and display options.

Get the latest Android developer news and tips that will help you find success on Google Play.

* Required Fields

Hooray!

Follow Google Developers on WeChat

Browse this site in ?

You requested a page in , but your language preference for this site is .

Would you like to change your language preference and browse this site in ? If you want to change your language preference later, use the language menu at the bottom of each page.

This class requires API level or higher

This doc is hidden because your selected API level for the documentation is . You can change the documentation API level with the selector above the left navigation.

For more information about specifying the API level your app requires, read Supporting Different Platform Versions.

Take a short survey?
Help us improve the Android developer experience.
(Sep 2017 survey)