LinearLayoutクラスを使用する

LinearLayoutクラスは、内包するViewを、縦方向、又は横方向に配置していくレイアウトです。
最もポピュラーかつ、シンプルで使い勝手が良く、使用頻度の高いレイアウトの一つです。

それでは、LinearLayoutクラスの一般的な使用方法を見ていきましょう。

LinearLayoutクラスのXML定義方法

LinearLayoutクラスを使用したxmlファイルのサンプルは以下の通りです。

<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"
    tools:context="jp.yocchin.linearlayoutsample.MainActivity" >

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/button001" />
        
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/button002" />
        
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/button003" />
        
</LinearLayout>

このxmlを元に画面表示してみると、以下のようにボタンが横一列に表示されます。

005

xmlファイルの5行目「android:orientation=”horizontal”」という記述がありますが
この、「android:orientation」で、横方向に表示するのか、縦方向に表示するのかを定義します。

horizontal:横方向
vertical :縦方法

それでは、ここを「android:orientation=”vertical”」と変更し、縦方向で表示してみます。

006

縦方向にボタンが表示されました。

LinearLayoutクラスの中に、LinearLayoutクラスを定義する

それでは、1つの画面内では、縦方向、横方向のどちらかしか表示できないのか?
そんなことはありません。
当然、ほかのレイアウトViewクラスを使用しても実現できますが、LinearLayoutクラスだけでも可能です。
LinearLayoutクラスの中に、横方向のLinearLayoutクラスと、縦方向のLinearLayoutクラスを入れることで、可能となります。
それでは、実際に縦方向、横方向を1つの画面で表示させてみましょう。

LinearLayoutクラスを縦方向で定義し、その内側に、横方向と縦方向の2つのLinearLayoutクラスを定義します。

<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="vertical"
    tools:context="jp.yocchin.linearlayoutsample.MainActivity" >

	<LinearLayout
	    android:layout_width="wrap_content"
	    android:layout_height="wrap_content"
	    android:orientation="horizontal" >
    	
    	<Button
			android:layout_width="wrap_content"
        	android:layout_height="wrap_content"
        	android:text="@string/w_button001" />
        	
        <Button
			android:layout_width="wrap_content"
        	android:layout_height="wrap_content"
        	android:text="@string/w_button002" />
        	       
    	<Button
        	android:layout_width="wrap_content"
        	android:layout_height="wrap_content"
        	android:text="@string/w_button003" />
        	
	</LinearLayout>
	
	<LinearLayout
    	android:layout_width="wrap_content"
    	android:layout_height="wrap_content"
    	android:orientation="vertical">
    	
    	<Button
			android:layout_width="wrap_content"
        	android:layout_height="wrap_content"
        	android:text="@string/h_button001" />
        
    	<Button
        	android:layout_width="wrap_content"
        	android:layout_height="wrap_content"
        	android:text="@string/h_button002" />
        	
        <Button
        	android:layout_width="wrap_content"
        	android:layout_height="wrap_content"
        	android:text="@string/h_button003" />
	</LinearLayout>
	
</LinearLayout>

このレイアウトで画面を表示すると、以下のように表示されます。

001

横方向に3つのボタンが表示され、その下に縦方向に3つのボタンが表示されました。

コメント

タイトルとURLをコピーしました