公開日：2020/02/29
更新日：2020/08/03

【Kotlin基礎】LinearLayoutでViewを一列に並べる方法を解説

KotlinでViewを一列に並べる方法が知りたい。
LinearLayoutをコードで動的に実装したい。
LinearLayout内のViewを等間隔で表示したい。

Androidには、テキストやボタンなどのViewを配置するためのレイアウトがいくつか用意されております。

本記事では、その中から、Viewを一列に並べて表示するLinearLayoutというレイアウトについて、サンプルコードを交え、わかりやすく解説致します。

１．LinearLayoutでViewを一列に並べる方法
- １－１．xmlでLinearLayoutを実装する
- １－２．コードで動的にLinearLayoutを実装する
２．LinearLayoutの基本的な使い方
３．まとめ

LinearLayoutでViewを一列に並べる方法

Kotlinで、Viewを一列に並べて表示するには、LinearLayoutというLayoutを使用します。

【公式ドキュメント】： LinearLayout | Android Developers

LinearLayoutを実装するには、xmlで実装する方法と、コードで動的に実装する方法の、2通りの方法があります。

xmlでLinearLayoutを実装する

まずは、xmlで実装する方法を紹介致します。xmlで実装するには、以下のように実装します。

MainActivity.kt
activity_main.xml

override fun onCreate(savedInstanceState: Bundle?) {
   super.onCreate(savedInstanceState)
   setContentView(R.layout.activity_main)
}

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
   xmlns:android="http://schemas.android.com/apk/res/android"
   android:id="@+id/container"
   android:layout_width="match_parent"
   android:layout_height="match_parent">

   <TextView
       android:id="@+id/text_view1"
       android:text="リンゴ"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content" />

   <TextView
       android:id="@+id/text_view2"
       android:text="ゴリラ"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content" />

   <TextView
       android:id="@+id/text_view3"
       android:text="ラッパ"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content" />

</LinearLayout>

LinearLayoutを実装するには、<LinearLayout/>タグを使用します。

LinearLayoutの開始タグと終了タグの間に、一列に並べたいViewを実装します。今回はTextViewを3つ実装しました。

Point

xmlでLinearLayoutを実装するには、<LinearLayout/>タグを使用する

コードで動的にLinearLayoutを実装する

続いて、コードで動的に実装する方法を紹介致します。コードで動的に実装するには、以下のように実装します。

MainActivity.kt

override fun onCreate(savedInstanceState: Bundle?) {
   super.onCreate(savedInstanceState)

   // LinearLayoutの生成
   val linearLayout = LinearLayout(this).also {

       // TextViewの生成
       val textView1 = TextView(this)
       textView1.text = "リンゴ"
       val textView2 = TextView(this)
       textView2.text = "ゴリラ"
       val textView3 = TextView(this)
       textView3.text = "ラッパ"

       // TextViewをLinearLayoutに追加
       it.addView(textView1)
       it.addView(textView2)
       it.addView(textView3)
   }

   // LinearLayoutをレイアウトとして登録
   setContentView(linearLayout)
}

LinearLayout()で、LinearLayoutのインスタンスを生成しております。

そして、生成したlinearLayoutのインスタンスに対し、スコープ関数alsoを使用し、TextViewを子Viewとして追加しております。

スコープ関数alsoの詳細については、以下の記事に詳しくまとめておりますので、そちらをご覧ください。

【Kotlin基礎】スコープ関数alsoの実装方法と用途を解説

Kotlinにはスコープ関数という覚えておくと便利な関数があります。スコープ関数にはいくつか種類があるのですが、本記事では、スコープ関数alsoに焦点を当て解説致します。他のスコープ関数(let, run, apply等)につきましては、簡単な解説と、各記事へのリンクがありますので、そちらをご覧頂けたらと思います。

最後に、setContentView()で、LinearLayoutをレイアウトとして登録しております。

Point

コードで動的にLinearLayoutを実装するには、LinearLayout()でインスタンスを生成した後、setContentView()でレイアウトとして登録する

LinearLayoutの基本的な使い方

Viewを並べる方向の指定

先ほどのサンプルでは、TextViewが横方向に一列に並んでおりました。これを縦方向に一列に並ぶよう変更するには、orientationにverticalを指定します。

○xmlで実装

MainActivity.kt
activity_main.xml

override fun onCreate(savedInstanceState: Bundle?) {
   super.onCreate(savedInstanceState)
   setContentView(R.layout.activity_main)
}

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
   xmlns:android="http://schemas.android.com/apk/res/android"
   android:id="@+id/container"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:orientation="vertical">

   (省略)

</LinearLayout>

○コードで実装

MainActivity.kt

override fun onCreate(savedInstanceState: Bundle?) {
   super.onCreate(savedInstanceState)

   val linearLayout = LinearLayout(this).also {
       it.orientation = LinearLayout.VERTICAL

       (省略)
   }

   setContentView(linearLayout)
}

デフォルトでは、横並びのhorizontalが指定されております。

Point

Viewを並べる方向は、orientationで指定する。verticalが縦並び、horizontalが横並びとなる

Viewの間隔の調整

続いて、View同士の間隔を調整する方法を紹介致します。View同士の間隔を調整するには、marginを指定します。

MainActivity.kt
activity_main.xml

override fun onCreate(savedInstanceState: Bundle?) {
   super.onCreate(savedInstanceState)
   setContentView(R.layout.activity_main)
}

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
   xmlns:android="http://schemas.android.com/apk/res/android"
   android:id="@+id/container"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:orientation="vertical"
   android:layout_margin="16dp">

   <TextView
       android:id="@+id/text_view1"
       android:text="リンゴ"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_marginBottom="20dp" />

   <TextView
       android:id="@+id/text_view2"
       android:text="ゴリラ"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_marginStart="100dp" />

   <TextView
       android:id="@+id/text_view3"
       android:text="ラッパ"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_marginTop="50dp" />

</LinearLayout>

サンプルコードでは、LinearLayoutに対し、layout_marginで、上下左右に16dpのmarginを指定しました。

そして、
TextView1に対しlayout_marginBottomで下に、
TextView2に対しlayout_marginStartで左に、
TextView3に対しlayout_marginTopで上に、それぞれmarginを指定しました。

Point

View同士の間隔は、marginで指定する

Viewの表示位置の調整

続いて、Viewの表示位置を調整する方法を紹介致します。Viewの表示位置の調整するには、gravityを指定します。

MainActivity.kt
activity_main.xml

override fun onCreate(savedInstanceState: Bundle?) {
   super.onCreate(savedInstanceState)
   setContentView(R.layout.activity_main)
}

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
   xmlns:android="http://schemas.android.com/apk/res/android"
   android:id="@+id/container"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:orientation="vertical"
   android:gravity="center">

   <TextView
       android:id="@+id/text_view1"
       android:text="リンゴ"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content" />

   <TextView
       android:id="@+id/text_view2"
       android:text="ゴリラ"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content" />

   <TextView
       android:id="@+id/text_view3"
       android:text="ラッパ"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content" />

</LinearLayout>

サンプルコードでは、gravityにcenterを指定することで、TextView達を、LinearLayoutの中央に表示するよう調整しました。

gravityに指定できる値は、centerの他に、start(左寄せ)、end(右寄せ)、center_horizontal(横中央寄せ)、center_vertical(縦中央寄せ)等があります。

Point

Viewの表示位置は、gravityで指定する

Viewを等間隔で表示する

最後に、Viewを等間隔で表示する方法を紹介致します。Viewを等間隔で表示するには、子Viewに対し、weightを指定します。

MainActivity.kt
activity_main.xml

override fun onCreate(savedInstanceState: Bundle?) {
   super.onCreate(savedInstanceState)
   setContentView(R.layout.activity_main)
}

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
   xmlns:android="http://schemas.android.com/apk/res/android"
   android:id="@+id/container"
   android:layout_width="match_parent"
   android:layout_height="match_parent">

   <TextView
       android:id="@+id/text_view1"
       android:text="リンゴ"
       android:layout_width="0dp"
       android:layout_height="wrap_content"
       android:layout_weight="1" />

   <TextView
       android:id="@+id/text_view2"
       android:text="ゴリラ"
       android:layout_width="0dp"
       android:layout_height="wrap_content"
       android:layout_weight="1" />

   <TextView
       android:id="@+id/text_view3"
       android:text="ラッパ"
       android:layout_width="0dp"
       android:layout_height="wrap_content"
       android:layout_weight="1" />

</LinearLayout>

サンプルコードでは、違いがわかりやすいように、backgroundで背景色を追加しております。

layout_weightは、Viewのサイズを比率で指定する場合に使用されます。サンプルコードでは、各TextViewのlayout_weightに、1が指定されております。

これは、LinearLayoutの横幅に対し、各TextViewの横幅を、1対1対1の割合で指定するという実装になります。割合を同じにすることで、均等に表示されるようになります。また、割合によって横幅を指定するため、layout_widthには0dpを指定しております。

なお、layout_weightが指定できるのは、Viewが並ぶ方向に対してのみです。縦幅に対しlayout_weightを指定したい場合は、orientationにverticalを指定する必要があります。

MainActivity.kt
activity_main.xml

override fun onCreate(savedInstanceState: Bundle?) {
   super.onCreate(savedInstanceState)
   setContentView(R.layout.activity_main)
}

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
   xmlns:android="http://schemas.android.com/apk/res/android"
   android:id="@+id/container"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:orientation="vertical">

   <TextView
       android:id="@+id/text_view1"
       android:text="リンゴ"
       android:background="#FAA"
       android:layout_width="wrap_content"
       android:layout_height="0dp"
       android:layout_weight="1" />

   <TextView
       android:id="@+id/text_view2"
       android:text="ゴリラ"
       android:background="#AFA"
       android:layout_width="wrap_content"
       android:layout_height="0dp"
       android:layout_weight="2" />

   <TextView
       android:id="@+id/text_view3"
       android:text="ラッパ"
       android:background="#AAF"
       android:layout_width="wrap_content"
       android:layout_height="0dp"
       android:layout_weight="3" />

</LinearLayout>

※layout_weightの比率を1対2対3にしております。

Point

Viewを等間隔で表示するには、wightを指定する

まとめ

xmlでLinearLayoutを実装するには、<LinearLayout/>タグを使用する
コードで動的にLinearLayoutを実装するには、LinearLayout()でインスタンスを生成した後、setContentView()でレイアウトとして登録する
Viewを並べる方向は、orientationで指定する。verticalが縦並び、horizontalが横並びとなる
View同士の間隔は、marginで指定する
Viewの表示位置は、gravityで指定する
Viewを等間隔で表示するには、wightを指定する