Building a Simple User Interface

2013年8月29日

今回は前回のFirstAPPを再利用して簡単なUIの作成。

レイアウトの仕組みや、リソースの使われ方などを理解するためのトレーニングです。

指示通りに、FirstAPPのTextViewエレメントを削除してLinearLayoutでhorizontalに配置されるレイアウトを作成します。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal" >
    <EditText
        android:id="@+id/edit_message"
        android:layout_weight="1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:hint="@string/edit_message" />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/button_send" />
</LinearLayout>

このエレメント内に記述されたオブジェクトは直列に並び続け、ラップアラウンドしません。右側に溢れたものは折り返されず、画面外に消えます。

この章で編集するのは以下の通り、
layout/activity_main.xml レイアウトリソース
values/string.xml 文字列リソース
レイアウト上でエレメントIDをandroid:id="@+id/…."としたものはgen/R.javaに自動生成され、コード上でIDとして使用できます。

android:hintやandroid:textで使用される@string/….の記述は、文字列リソースが参照されるので合わせて編集します。

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="app_name">First App</string>
    <string name="action_settings">Settings</string>
    <string name="edit_message">Enter a message</string>
    <string name="button_send">Send</string>
</resources>

Make the Input Box Fill in the Screen Widthの項目でエレメントの重みについて記述されていますが、少々分かりにくいのでボタンを例に解説します。

android:layout_weightのデフォルトは0で、エレメントはandroid:layout_widthとandroid:layout_hightで指定されたサイズの通りに並びます。

layout_weightは各パーツがlayout_weight 0の状態で並んだと仮定して、余白をweight値に応じて各エレメントに分配する仕組みです。

言葉で説明するより図解したほうが分かりやすいので、ボタンをweight値 1:1:0で３つ並べたものを例にします。

weightが無い状態での余白を元に分配し、

このようになります。