Androidアプリ入門 No.33 LinearLayoutの基本
LinearLayout
LinearLayoutの基本
ここまでの例でずっと使ってきているが、最初にLinearLayoutの基本を解説する。主な属性は以下となる。
属性 | 説明 |
---|---|
orientation | horizontalかverticalを指定する。それぞれ水平方向、垂直方向へのレイアウト。 |
background | 背景色。 |
baselineAligned | ベースラインに合わせて配置するか。 |
baselineAlignedChlidIndex | レイアウト内のどのコンポーネントにベースラインを合わせるかindexを指定する。 |
まずは、main.xmlを以下のようにし基本のレイアウトを確認する。
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent" > <LinearLayout android:orientation="horizontal" android:layout_width="fill_parent" android:layout_height="240dip" > <LinearLayout android:orientation="vertical" android:layout_width="160dip" android:layout_height="fill_parent" android:background="#f00" > </LinearLayout> <LinearLayout android:orientation="vertical" android:layout_width="160dip" android:layout_height="fill_parent" android:background="#0f0" > </LinearLayout> </LinearLayout> <LinearLayout android:orientation="horizontal" android:layout_width="fill_parent" android:layout_height="240dip" android:background="#00f" > </LinearLayout> </LinearLayout>
MainActivity.javaは以下のようにする。レイアウトファイルを読み込むだけとなる。
package sample.at; import android.app.Activity; import android.os.Bundle; public class MainActivity extends Activity { @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); } }
次に、LinearLayoutだけだとわかりにくい部分もあるためTextViewを配置して動作を確認する。main.xmlのみ以下のように変更する。
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent" > <LinearLayout android:orientation="horizontal" android:layout_width="fill_parent" android:layout_height="wrap_content" android:background="#f00" > <TextView android:text="あいうえお" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textColor="#000" /> <TextView android:text="かきくけこ" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textColor="#000" /> <TextView android:text="さしすせそ" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textColor="#000" /> <TextView android:text="たちつてと" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textColor="#000" /> <TextView android:text="なにぬねの" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textColor="#000" /> </LinearLayout> <LinearLayout android:orientation="horizontal" android:layout_width="fill_parent" android:layout_height="wrap_content" android:background="#0f0" > <TextView android:text="あいうえおかきくけこさしすせそたちつてとなにぬねの" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textColor="#000" /> </LinearLayout> </LinearLayout>
実行結果は以下。horizontalでレイアウトされたTextViewははみ出した場合最後のTextViewだけが折り返される。
次に、きれいにレイアウトするためのbaselineAligned属性について解説する。
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent" > <LinearLayout android:orientation="horizontal" android:layout_width="fill_parent" android:layout_height="wrap_content" android:background="#f00" android:baselineAligned="false" > <TextView android:text="あいうえお" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textColor="#000" /> <EditText android:layout_width="50dp" android:layout_height="wrap_content" /> </LinearLayout> <LinearLayout android:orientation="horizontal" android:layout_width="fill_parent" android:layout_height="wrap_content" android:background="#0f0" android:baselineAligned="true" > <TextView android:text="あいうえお" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textColor="#000" /> <EditText android:layout_width="50dp" android:layout_height="wrap_content" /> </LinearLayout> <LinearLayout android:orientation="horizontal" android:layout_width="fill_parent" android:layout_height="fill_parent" android:background="#00f" android:baselineAligned="true" > <TextView android:text="あいうえお" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textColor="#000" /> <EditText android:layout_width="50dp" android:layout_height="wrap_content" /> <LinearLayout android:orientation="vertical" android:layout_width="wrap_content" android:layout_height="fill_parent" > <EditText android:layout_width="50dp" android:layout_height="wrap_content" /> <EditText android:layout_width="50dp" android:layout_height="wrap_content" /> </LinearLayout> </LinearLayout> </LinearLayout>
実行結果は以下。1行目はbaselineAlignedをfalseに指定しているため縦位置に中央ぞろえされずに左上からコンポーネントが配置される。そのため、EditTextに対してTextViewが上部に配置されている。
対して、2行目はbaselineAlignedをtrueに指定しているため縦位置に中央ぞろえされている。
最後の3行目は、一番最後にLinearLayoutで縦方向にEditTextを並べている。こういった場合、何も指定しないと最初のコンポーネントに合わせて位置合わせが行われるため以下の実行結果のようになっている。
次に、baselineAlignedChildIndexを1にして動作を確認する。main.xmlを以下のようにする。
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent" > <LinearLayout android:orientation="horizontal" android:layout_width="fill_parent" android:layout_height="wrap_content" android:background="#f00" android:baselineAligned="false" > <TextView android:text="あいうえお" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textColor="#000" /> <EditText android:layout_width="50dp" android:layout_height="wrap_content" /> </LinearLayout> <LinearLayout android:orientation="horizontal" android:layout_width="fill_parent" android:layout_height="wrap_content" android:background="#0f0" android:baselineAligned="true" > <TextView android:text="あいうえお" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textColor="#000" /> <EditText android:layout_width="50dp" android:layout_height="wrap_content" /> </LinearLayout> <LinearLayout android:orientation="horizontal" android:layout_width="fill_parent" android:layout_height="fill_parent" android:background="#00f" android:baselineAligned="true" > <TextView android:text="あいうえお" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textColor="#000" /> <EditText android:layout_width="50dp" android:layout_height="wrap_content" /> <LinearLayout android:orientation="vertical" android:layout_width="wrap_content" android:layout_height="fill_parent" android:baselineAlignedChildIndex="1" > <EditText android:layout_width="50dp" android:layout_height="wrap_content" /> <EditText android:layout_width="50dp" android:layout_height="wrap_content" /> </LinearLayout> </LinearLayout> </LinearLayout>
実行結果は以下。縦方向に配置したコンポーネントのindexが1つまり2番目のコンポーネントに合わせて配置されているのがわかる。