LinearLayoutクラスとは？
状態:-
閲覧数:3,493
投稿日:2013-04-15
更新日:2018-08-26
表記
片仮名
・リニアレイアウトクラス
1列に並べるレイアウトクラス
内部に組み込んだウィジェットを一列に並べるレイアウト
・Viewを、指定した方向(縦／横)へ一列に並べるレイアウト
・方向は「android:orientation」で指定
・垂直(縦)に指定する例
<LinearLayout
android:layout_width=""
android:layout_height=""
android:orientation="vertical">
画面を最もシンプルにレイアウトするオブジェクト
・縦または横に一列しか並べられないため、例えば、格子状に配置したい場合には、LinearLayoutのなかにさらにLinearLayoutオブジェクトを配置する
※一つの子要素ではなく複数定義した場合でも、一列に並んで表示される
・R.layout.mainが示すmain.xmlファイルなどに記述
・main.xmlでは、LinearLayoutの属性として、orientation、layout_width、layout_heightの3つが指定されている。それぞれ、レイアウトの向き、幅、高さの指定
表1 属性に指定できる値
| 値 | 意味 |
|---|---|
| vertical | 縦向き |
| horizontal | 横向き |
| fill_parent | 親要素のサイズまでなるべく大きく表示（APIレベル8以降は、match_parentとする） |
| wrap_content | 表示可能な最小の大きさ |
クラス構成
親クラス
「ViewGroup」のサブクラス
直接子クラス
NumberPicker, RadioGroup, SearchView, TabWidget, TableLayout, TableRow, ZoomControls
Nested Classes
… 型の内部で宣言されたクラス「ネストしたクラス」
LinearLayout.LayoutParams
android:orientation … XML属性
概要
子ビューの配置方向を指定する属性
・デフォルトはvertical
| XML属性名 | XML属性値 | 内容 | Value |
|---|---|---|---|
| android:orientation | horizontal | 要素を横(水平)方向に整列 | 0 |
| vertical | 要素を縦(垂直)方向に整列 | 1 |
レイアウト固有属性
「LinearLayoutクラス」で定義されている
・この属性はLinearLayoutクラスだけにある
・つまり、他の「レイアウト種類」には存在しない
・基本的に他属性も同様かと思いきや必ずしもそうではない
※「★★Layoutクラス」で定義されているものは、「★★レイアウト」でしか利用不可だが、全く同じ属性が他「★★レイアウト」クラスで定義されている場合もある
・Android全レイアウトで共通利用できる「XML属性」及び「定数」は、「ViewGroupクラス」もしくは「ViewGroup.LayoutParamsクラス」で定義されている。詳細はこちら
android:gravity … XML属性
概要
オブジェクトの配置方法を指定する属性
・「LinearLayoutクラス」で定義
※「RelativeLayoutクラス」でも定義されている
| XML属性名 | 定数 | 内容 |
|---|---|---|
| android:gravity | top | 上寄せにする |
| - | bottom | 下寄せにする |
| - | left | 左寄せにする |
| - | right | 右寄せにする |
| - | center_vertical | 垂直方向の中央に配置する |
| - | center_horizontal | 水平方向の中央に配置する |
| - | fill_vertical | 垂直方向をコンテナのサイズに拡大して配置する |
| - | fill_horizontal | 水平方向をコンテナのサイズに拡大して配置する |
| - | center | 水平方向と垂直方向の中央に配置する |
| - | fill | 水平方向と垂直方向をコンテナのサイズに拡大して配置する |
android:layout_weight … XML属性
概要
・「LinearLayout.LayoutParamsクラス」で定義
| XML属性名 | 内容 |
|---|---|
| android:layout_weight | 画面上のオブジェクト占有比率を指定 ※余っている親要素の余白部分を、子要素で分け合う比率 |
コード例
例1
複数ビューをアクティビティへ設置(アクティビティへ複数のビューを配置)
・画面レイアウトは動的定義(Java) かつ、配置方法を指定(WRAP_CONTENT利用)
・ボタンを二つ配置したビューグループをアクティビティへ追加する例
・プログラムの中でビュー配置を直接記述(main.xmlのみ利用)
・button1オブジェクトとbutton2オブジェクトに対してイベント処理を記述することが可能
▼D:/Android/workspace/SetContentView3
package android.style;
import android.app.Activity;
import android.os.Bundle;
import android.widget.Button;
import android.widget.LinearLayout;
public class SetContentView3Activity extends Activity {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
LinearLayout linearLayout = new LinearLayout(this);// アクティビティへ追加される最下層ビューグループを作成
Button button1 = new Button(this);// ビューグループへ追加するビューを作成
Button button2 = new Button(this);// ビューグループへ追加するビューを作成
button1.setText("ボタン1");
button2.setText("ボタン2");
linearLayout.addView(button1, new LinearLayout.LayoutParams(// ビューをビューグループへ追加。その際、ビューグループの中でビューをどのように配置するのかを指定
LinearLayout.LayoutParams.WRAP_CONTENT,
LinearLayout.LayoutParams.WRAP_CONTENT));
linearLayout.addView(button2, new LinearLayout.LayoutParams(// ビューをビューグループへ追加。その際、ビューグループの中でビューをどのように配置するのかを指定
LinearLayout.LayoutParams.WRAP_CONTENT,
LinearLayout.LayoutParams.WRAP_CONTENT));
setContentView(linearLayout);// 作成したビューグループをsetContentViewメソッドを使ってアクティビティへ追加
}
}
レイアウト例 … 縦に一列配置
構成
・1つのLinearLayoutの中に3つのLinearLayoutを配置
LinearLayout大枠
│
├LinearLayout上
│ └Button1
│
├View
│
├LinearLayout下
│ └Button1
│
├View
│
└LinearLayout
・1はButtonに記述
・Viewは余白
・最後のLinearLayoutでは、何も表示していない
コード
▼/res/layout/activity_main.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:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:orientation="vertical"
tools:context=".MainActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="1"/>
</LinearLayout>
<View
android:layout_width="match_parent"
android:layout_height="20dp"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="1"/>
</LinearLayout>
<View
android:layout_width="match_parent"
android:layout_height="20dp"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
</LinearLayout>
</LinearLayout>
レイアウト例 … 1つのLinearLayoutの中に3つのLinearLayoutを配置
概要
・水平方向で「android:layout_weight」使用する際は、「android:layout_width="0dp"」指定
LinearLayout全体を覆う大枠
LinearLayout上
・Button1 ／ Button2 … それぞれ画面の1/2
LinearLayout中
・Button1 ／ Button2 ／ Button3 … それぞれ画面の1/3
LinearLayout下
・Button1 … 画面の1/2
・Button2 ／ Button3 … それぞれ画面の1/4
構成
・1つのLinearLayoutの中に3つのLinearLayoutを配置
LinearLayout大枠
│
├LinearLayout上
│ ├Button1
│ └Button2
│
├LinearLayout中
│ ├Button1
│ ├Button2
│ └Button3
│
└LinearLayout下
├Button1
├Button2
└Button3
コード
▼/res/layout/activity_main.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:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:orientation="vertical"
tools:context=".MainActivity">
<!-- ここの LinearLayout に 2 つの Button を置いて均等割付する -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="1"/>
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="2"/>
</LinearLayout>
<View
android:layout_width="match_parent"
android:layout_height="20dp"/>
<!-- ここの LinearLayout に 3 つの Button を置いて均等割付する -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="1"/>
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="2"/>
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="3"/>
</LinearLayout>
<View
android:layout_width="match_parent"
android:layout_height="20dp"/>
<!-- ここの LinearLayout に 3 つの Button を置いて、半分を左端のもの、もう半分を残りの 2 つで半分ずつに割付 -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="2"
android:text="1"/>
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="2"/>
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="3"/>
</LinearLayout>
</LinearLayout>
特徴
・水平方向で「android:layout_weight」使用する際は、「android:layout_width="0dp"」指定
・「android:layout_weight」で比率指定
レイアウト例 … 1つのLinearLayoutの中に2つのLinearLayoutを配置。さらに3つのLinearLayoutを配置
概要
・水平方向で「android:layout_weight」使用する際は、「android:layout_width="0dp"」指定
LinearLayout全体を覆う大枠
LinearLayout上
・Button1 … 画面の1/6
・Button2 … 画面の2/6 … 1/3
・Button3 … 画面の3/6 … 1/2
LinearLayout下
LinearLayout下上
・Button1 ／ Button2 ／ Button3 … それぞれ画面の1/3
LinearLayout下中
・Button4 ／ Button5 ／ Button6 … それぞれ画面の1/3
LinearLayout下下
・Button7 ／ Button8 ／ Button9 … それぞれ画面の1/3
構成
・1つのLinearLayoutの中に2つのLinearLayoutを配置し、さらに下のLinearLayoutの中に3つのLinearLayoutを配置
LinearLayout大枠
│
├LinearLayout上
│ ├Button1
│ ├Button2
│ └Button3
│
└LinearLayout下
│
├LinearLayout下上
│ ├Button1
│ ├Button2
│ └Button3
│
├LinearLayout下中
│ ├Button4
│ ├Button5
│ └Button6
│
└LinearLayout下下
├Button7
├Button8
└Button9
コード
▼/res/layout/activity_main.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="vertical"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".MainActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="1"/>
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="2"
android:text="2"/>
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="3"
android:text="3"/>
</LinearLayout>
<!-- 3 x 3 の Button を配置する -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="1"/>
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="2"/>
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="3"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="4"/>
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="5"/>
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="6"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="7"/>
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="8"/>
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="9"/>
</LinearLayout>
</LinearLayout>
</LinearLayout>
特徴
・水平方向で「android:layout_weight」使用する際は、「android:layout_width="0dp"」指定
・「android:layout_weight」で比率指定
レイアウト例 … 1つのLinearLayoutの中に2つのLinearLayoutを配置
概要
水平方向で「android:layout_weight」使用する際は、「android:layout_width="0dp"」指定
・「android:layout_weight="1"」を設定している要素に「android:layout_width="wrap_content"」を指定しても(併用しても)エラーとならない
・しかし、「layout_weightでの幅計算」と「wrap_contentの幅計算」が両方行われてしまうため無駄
・レイアウト表示パフォーマンスを向上させるためには、「android:layout_weight」使用する際、「android:layout_width="0dp"」を指定する方が良い
LinearLayout全体を覆う大枠
LinearLayout
・Button1 ／ Button2 … 「android:layout_weight」未使用。「android:layout_width="wrap_content"」。表示可能な最小の大きさ
LinearLayout
・Button3 ／ Button4 ／ Button5 … それぞれ画面の1/3
・「android:layout_weight="1"」×「android:layout_width="wrap_content"」
・「android:layout_weight="1"」×「android:layout_width="0dp"」と書く方が良い
Button6
・「android:layout_width="fill_parent"」×「android:layout_height="wrap_content"」
・「android:layout_width="match_parent"」×「android:layout_height="wrap_content"」と書く方が良い
Button7
・「android:layout_width="fill_parent"」×「android:layout_height="fill_parent"」
・「android:layout_width="match_parent"」×「android:layout_height="match_parent"」と書く方が良い
構成
・1つのLinearLayoutの中に2つのLinearLayoutを配置
LinearLayout大枠
│
├TextView
│
├LinearLayout
│ ├Button1
│ └Button2
│
├LinearLayout
│ ├Button3
│ ├Button4
│ └Button5
│
├Button6
│
└Button7
コード
▼/res/layout/activity_main.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="@android:color/white">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:textSize="20sp"
android:paddingBottom="5dip"
android:textColor="@android:color/black"
android:text=" LinearLayoutサンプル" />
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button1" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button2" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button3"
android:layout_weight="1" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button4"
android:layout_weight="1" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button5"
android:layout_weight="1" />
</LinearLayout>
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Button6" />
<Button
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:text="Button7" />
</LinearLayout>
レイアウト例 … 1つのLinearLayoutの中に4つのLinearLayout
概要
水平方向で「android:layout_weight」使用する際は、「android:layout_width="0dp"」指定
LinearLayout全体を覆う大枠
LinearLayout
LinearLayout左
・top … 「android:gravity="top"」
LinearLayout右
・bottom … 「android:gravity="bottom"」
LinearLayout
LinearLayout左
・left … 「android:gravity="left"」
LinearLayout右
・right … 「android:gravity="right」
LinearLayout
LinearLayout左
・center_vertical … 「android:gravity="center_vertical"」
LinearLayout右
・center_horizontal … 「android:gravity="center_horizontal"」
LinearLayout
LinearLayout左
・center … 「android:gravity="center"」
LinearLayout右
・bottom|right … 「android:gravity="bottom|right"」
構成
・1つのLinearLayoutの中に4つのLinearLayoutを配置
・その4つのLinearLayoutそれぞれへ対して、2つずつのLinearLayoutを配置
LinearLayout大枠
│
│
├LinearLayout
│ ├LinearLayout
│ │ └Button
│ └LinearLayout
│ └Button
│
├LinearLayout
│ ├LinearLayout
│ │ └Button
│ └LinearLayout
│ └Button
│
├LinearLayout
│ ├LinearLayout
│ │ └Button
│ └LinearLayout
│ └Button
│
└LinearLayout
├LinearLayout
│ └Button
└LinearLayout
└Button
コード
▼/res/layout/activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/LinearLayout01"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:orientation="vertical"
android:background="#288ecc">
<LinearLayout
android:id="@+id/LinearLayout02"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<LinearLayout
android:id="@+id/LinearLayout06"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#808080"
android:gravity="top"
android:minHeight="100dip">
<Button
android:text="top"
android:id="@+id/Button01"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
</Button>
</LinearLayout>
<LinearLayout
android:id="@+id/LinearLayout07"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#FFFFFF"
android:minHeight="100dip"
android:gravity="bottom">
<Button
android:text="bottom"
android:id="@+id/Button02"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
</Button>
</LinearLayout>
</LinearLayout>
<LinearLayout
android:id="@+id/LinearLayout03"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<LinearLayout
android:id="@+id/LinearLayout08"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#FFFFFF"
android:minHeight="100dip"
android:gravity="left">
<Button
android:text="left"
android:id="@+id/Button03"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
</Button>
</LinearLayout>
<LinearLayout
android:id="@+id/LinearLayout09"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#808080"
android:minHeight="100dip"
android:gravity="right">
<Button
android:text="right"
android:id="@+id/Button04"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
</Button>
</LinearLayout>
</LinearLayout>
<LinearLayout
android:id="@+id/LinearLayout04"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<LinearLayout
android:id="@+id/LinearLayout10"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#808080"
android:minHeight="100dip"
android:gravity="center_vertical">
<Button
android:text="center_vertical"
android:id="@+id/Button05"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
</Button>
</LinearLayout>
<LinearLayout
android:id="@+id/LinearLayout11"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#FFFFFF"
android:minHeight="100dip"
android:gravity="center_horizontal">
<Button
android:text="center_horizontal"
android:id="@+id/Button06"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
</Button>
</LinearLayout>
</LinearLayout>
<LinearLayout
android:id="@+id/LinearLayout05"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<LinearLayout
android:id="@+id/LinearLayout12"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#FFFFFF"
android:minHeight="100dip"
android:gravity="center">
<Button
android:text="center"
android:id="@+id/Button07"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
</Button>
</LinearLayout>
<LinearLayout
android:id="@+id/LinearLayout13"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#808080"
android:minHeight="100dip"
android:gravity="bottom|right">
<Button
android:text="bottom|right"
android:id="@+id/Button08"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
</Button>
</LinearLayout>
</LinearLayout>
</LinearLayout>