Androidアプリ開発のLinearLayoutの使い方【初心者向け】

Androidアプリ開発におけるレイアウトのうち【LinearLayout】の使い方について初心者向けに解説した記事。パーツを縦一列もしくは横一列に並べる場合に使用するレイアウトです。2種類あるので、どちらも紹介します。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

Androidアプリ開発では、アプリの画面を簡単に作成できるレイアウトが用意されています。

今回はそのなかの1つである、LinearLayout(リニアレイアウト)を追加する方法と基本的な使い方をご紹介します。

 

本記事はTechAcademyのAndroidアプリ開発オンラインブートキャンプの内容をもとに解説しています。

 

大石ゆかり

田島メンター!!Androidアプリでパーツを1列に並べたいんですけど、どうしたらいいんですか〜?

田島悠介

いくつか方法はあるけど、1列に並べたいだけならLinearLayoutはどうかな?

大石ゆかり

どうやって使うんですか〜?

 

LinearLayoutとは

LinearLayoutとは、パーツを縦一列もしくは横一列に並べる場合に使用するレイアウトです。

Eclpseで開発をする場合、LinearLayoutは縦一列に並べるLinearLayout(Vertical)と横一列に並べるLinearLayout(Horizontal)の2種類が用意されています。

 

 

LinearLayoutを配置する

今回は、LinearLayoutを使用して画像のような画面を作成してみます。

レイアウトは入れ子にして使用することができます。この例では、赤枠で表したLinearLayout(Vertical)に、青枠で表した3つのLinearLayout(Horizontal)が入れ子になって配置されています。

 

LinearLayout(Vertical)を配置します。

LinearLayout(Vertical)はレイアウトエディタのパレットの「レイアウト」から配置できます。パレット内のLinearLayout(Vertical)を、プレビュー画面までドラッグしましょう。

 

次に、同様にLinearLayout(Horizontal)を3回プレビュー画面までドラッグして配置します。

アウトラインで、レイアウトが正しく配置されているか確認をしましょう。

 

LinearLayoutにパーツを配置する

LinearLayoutにパーツを配置するには、レイアウトエディタのパレットから配置したいパーツを選択し、プレビュー画面へドラッグします。

もしも配置したいレイアウト以外の場所に配置をしてしまった場合は、プレビュー画面に配置されたパーツをドラッグするか、アウトラインに表示されているパーツをドラッグして移動しましょう。

 

3行目のボタンのように、LinearLayoutに配置されたパーツを中央寄せで表示したい場合は、レイアウトを選択し、プロパティの「Gravity」の値を「center_horizontal」に変更します。

 

起動をして、画面を確認します。

配置はこれで完了です。

 

 

[PR] Androidアプリの開発で挫折しない学習方法を動画で公開中

LinearLayoutのコードを確認する

最後にコードを確認してみましょう。

XMLタブでコードを確認すると、下記のようになっています。LinearLayoutが入れ子になっていることがわかると思います。

<LinearLayout xmlns:android=”http://schemas.android.com/apk/res/android”
android:layout_width=”match_parent”
android:layout_height=”match_parent”
android:orientation=”vertical” >
<LinearLayout
android:layout_width=”match_parent”
android:layout_height=”wrap_content” >
<TextView
android:id=”@+id/textView1″
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:text=”名前” />
<EditText
android:id=”@+id/editText1″
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:layout_weight=”1″
android:ems=”10″ >
<requestFocus />
</EditText>
</LinearLayout>
<LinearLayout
android:layout_width=”match_parent”
android:layout_height=”wrap_content” >
<TextView
android:id=”@+id/textView2″
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:layout_weight=”1″
android:text=”コメント” />
<EditText
android:id=”@+id/editText2″
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:layout_weight=”1″
android:ems=”10″ />
</LinearLayout>
<LinearLayout
android:layout_width=”match_parent”
android:layout_height=”wrap_content”
android:gravity=”center_horizontal” >
<Button
android:id=”@+id/button1″
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:text=”送信” />
<Button
android:id=”@+id/button2″
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:text=”リセット” />
</LinearLayout>
</LinearLayout>

今回は以上です。

 

他のレイアウトも試したい場合はRelativeLayoutの使い方も合わせてご覧ください。

 

大石ゆかり

簡単に1列に並べられるんですね〜♪

田島悠介

そうだね。縦でも横でも並べられるから、使う場面がとても多いレイアウトの一つだね。

大石ゆかり

そうですね〜♪

 

[お知らせ]TechAcademyでは初心者でも最短4週間でオリジナルアプリが作れるAndroidアプリ開発講座(オンラインブートキャンプ)を開催しています。自分でアプリを公開してみたい場合はご参加ください。