layout_weightの使い方(比率で画面を構成する)

layout_weightの使い方について説明していきたと思います。

layout_weightとは

レイアウトの横幅と縦幅を設定する場合、主に「wrap_content」と「match_parent」を使用して画面を作成することが多いのですが、
「wrap_content」と「match_parent」だけでは、どうしても思い通りのレイアウトにならない場合が結構あります。
そういう時の救世主が、まさにlayout_weightです。
layout_weightとは、各Viewの大きさを比率によって制御します。

たとえば、
View01 android:layout_weight=”3″
View02 android:layout_weight=”2″
とした場合は、View01とView02は、2:3の大きさで表示されます。

このlayout_weightを使いこなせるようになると、ほとんどのレイアウトは実現できるでしょう。
使いこなせると、面白いようにレイアウトが作成できます。

layout_weightを使ってみる

それでは実際に動かしてみましょう。

パターン1

2つのButtonを1:1で表示します。

<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" >

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="@string/button001" />
        
    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="@string/button001" />

</LinearLayout>

101

パターン2

続いて、比率を変更し、2:1で表示します。
大きさが変化するのが分かると思います。

<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" >

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="2"
        android:text="@string/button001" />
        
    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="@string/button001" />

</LinearLayout>

102

パターン3

それでは、最期にすこしだけ応用編。
2つのLinearLayoutを内包させ、LinearLayoutにもlayout_weightを設定します。
それぞれのLinearLayoutは分かりやすうように、横並びと縦並びの2種類を使用します。

<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="match_parent"
	    android:layout_height="match_parent"
	    android:layout_weight="3"
	    android:orientation="horizontal" >
    	
    	<Button
			android:layout_width="match_parent"
        	android:layout_height="match_parent"
        	android:layout_weight="1"
        	android:text="@string/button001" />
        	
        <Button
			android:layout_width="match_parent"
        	android:layout_height="match_parent"
        	android:layout_weight="1"
        	android:text="@string/button002" />
        	       
    	<Button
        	android:layout_width="match_parent"
        	android:layout_height="match_parent"
        	android:layout_weight="1"
        	android:text="@string/button003" />
        	
	</LinearLayout>
	
	<LinearLayout
    	android:layout_width="match_parent"
    	android:layout_height="match_parent"
    	android:layout_weight="1"
    	android:orientation="vertical">
    	
    	<Button
			android:layout_width="match_parent"
        	android:layout_height="wrap_content"
        	android:layout_weight="2"
        	android:text="@string/button001" />
        
    	<Button
        	android:layout_width="match_parent"
        	android:layout_height="wrap_content"
        	android:layout_weight="1"
        	android:text="@string/button002" />
        	
        <Button
        	android:layout_width="match_parent"
        	android:layout_height="wrap_content"
        	android:layout_weight="1"
        	android:text="@string/button003" />
	</LinearLayout>
	
</LinearLayout>

103

layout_weightまとめ

このようにlayout_weightを使うことで、比率を元にレイアウトを作成することが可能になります。
比率を元にレイアウトを作成することで、どんな画面サイズの端末で表示しても、
レイアウトが壊れることなく、同じ比率で表示されるというメリットが生まれます。
また、使い方次第では、空白のスペース領域を入れたりと、様々な使い方ができるのも魅力の一つです。
layout_weightの使い方は必ず覚えるべき。といったところでしょうか。

コメント

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