Androidでフォーム画面をつくるということは、多々ありますね。
そんなとき、テーブルを使って左に項目名、右に入力部分を持ってくるというのが一般的かと思われます。
こんな感じで。
レイアウトする前に - ゴールとなるxmlの構造を把握してみよう -
今回のゴールは以下のようなレイアウト構造になります。
<LinearLayout>
<TableLayout>
<TableRow>
<TextView>
<EditText>
</TableRow>
</TableLayout>
</Linearlayout>
下準備編 - テーブルを画面幅いっぱいに表示する -
テーブルを画面いっぱいにするためには、まずはLinearLayoutの幅を画面幅いっぱいにしましょう。
android:layout_width="match_parent"
次に、テーブルの中で一番大枠のTableLayoutの幅を常に画面幅いっぱいになるようにしましょう。
幅にfill_parentを指定するだけでLinearLayoutの幅いっぱいになります。
<TableLayout android:layout_width="fill_parent"
fill_parentは、その名の通り、親の幅をfillします！つまり、自分の横幅を親要素の幅いっぱいにします。
ここでの親要素はLinearLayoutですね！
次に、テーブルの一行ごとの要素である、TableRowの幅も画面いっぱいになるようにしちゃいましょう！！
<TableRow android:layout_width="fill_parent" android:layout_height="wrap_content" android:gravity="center_vertical"
「center_vertical」というのは、TableRowの中の要素を、TableRowの縦の中心に表示させるというものです。
上下均等に綺麗に余白ができるということです。
これで下準備が完了です！
実践編 - テーブルの中身をつくりましょう -
では、下準備ができたことですので、テーブルの中身をつくりましょう。
使うのは、
TextView -> 項目名 EditText -> 入力部分
TextViewがテーブルの左側に表示させる項目名、EditTextが右側に表示させる入力部分。
まずは、この二つをTableRowの中に配置しましょう。
<TableRow
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="項目名1">
</TextView>
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:inputType="text"
android:layout_weight="1">
</EditText>
</TableRow>
TextViewとEditTextのwidthとheightには、wrap_contentを指定しました。
これは、Androidが自動的に幅を決めてくれる優れモノです。一概には言えませんが、画面全体に表示させたいというわけでないなら、wrap_contentを使いましょう。
ここで、EditTextだけに「layout_weight」が指定されています。
これは、親要素の余白を使う比率を表しています。
これを1に指定すれば、親要素のすべての余白を吸収して自分の横幅に使うことができます。
この場合、EditTextはTableRowの余白を吸収し、自分の横幅にしてしまいました。
EditTextとTextViewの間に格差ができたわけですね。
これで、横幅が可変になるフォームを作れます。
あとは自力でマージンやパディングを指定して、綺麗なフォームを作ってください！
おわりに・・・
ついに今回の白熱講義が終わってしまいました。
ちなみに、画面を横にした時の画像はこれです。
ちゃんと入力部分の横幅が変わっていますね。