公開日:2020/02/29更新日:2020/08/03
【Kotlin基礎】LinearLayoutでViewを一列に並べる方法を解説

- KotlinでViewを一列に並べる方法が知りたい。
- LinearLayoutをコードで動的に実装したい。
- LinearLayout内のViewを等間隔で表示したい。
Androidには、テキストやボタンなどのViewを配置するためのレイアウトがいくつか用意されております。
本記事では、その中から、Viewを一列に並べて表示する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つ実装しました。
- 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の詳細については、以下の記事に詳しくまとめておりますので、そちらをご覧ください。
最後に、setContentView()で、LinearLayoutをレイアウトとして登録しております。
- コードで動的に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が指定されております。
- 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を指定しました。
- 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(縦中央寄せ)等があります。
- 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にしております。
- Viewを等間隔で表示するには、wightを指定する
まとめ
- xmlでLinearLayoutを実装するには、<LinearLayout/>タグを使用する
- コードで動的にLinearLayoutを実装するには、LinearLayout()でインスタンスを生成した後、setContentView()でレイアウトとして登録する
- Viewを並べる方向は、orientationで指定する。verticalが縦並び、horizontalが横並びとなる
- View同士の間隔は、marginで指定する
- Viewの表示位置は、gravityで指定する
- Viewを等間隔で表示するには、wightを指定する
関連記事