アンドロイド - LinearLayoutを実装する方法

By JS | Last updated: September 03, 2017

LinearLayout

LinearLayoutは縦または横の単一方向にすべてのサブViewオブジェクトを整列するViewGroupです。今回のチュートリアルでは、LinearLayoutの基本的な内容について説明します。

プロジェクトを作成する

[File] >> [New] >> [New Project]でEmpty Activityを選択し、新しいプロジェクトを作成してください。

プロジェクトを作成すると、自動的に MainActivity.javaactivity_main.xmlファイルが生成されます。 MainActivity.javaコードを見ると、activity_main.xmlにUI Layoutを定義するコードが入力されています。

オリエンテーション

Orientationプロパティは、LinearLayoutのサブViewを配置する方向を設定します。例をOrientationについて調べてみましょう。次のコードを /res/layout/activty_mainに入力して、結果を確認してみてください。

<?xml version="1.0" encoding="utf-8"?>
<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="com.example.codestudio.myapplication.MainActivity">

    <TextView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:text="TextView01"
        android:background="#80cbc4"/>

    <TextView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:text="TextView02"
        android:gravity="center"
        android:background="#e0e0e0"/>

    <TextView
        android:layout_width="120dp"
        android:layout_height="130dp"
        android:text="TextView03"
        android:textColor="#c62828"
        android:background="#ababab"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextView04"
        android:background="#dcedc8"/>

</LinearLayout>

LinearLayoutのwithとheightは match_parentに設定されているので、画面全体をサイズに設定された。

orientation="vertical"に設定したため、サブViewは縦方向に順に配置されました。

TextView01の場合heightが100dpでコード上の最上部にあるので、最初に配置されました。 widthも100dpだけに使用し、横方向にも使用していない領域は、空の領域に残りました。

TextView02、03、04も順に配置されました。内部Viewをすべて配置しても、残りの縦領域は空き領域に残ります。

linearlayout

今Horizontalに設定してみましょう。以下のコードを入力して、結果を確認してみてください。

<?xml version="1.0" encoding="utf-8"?>
<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="horizontal"
    tools:context="com.example.codestudio.myapplication.MainActivity">

    <TextView
        android:id="@+id/textView"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="#80cbc4"
        android:text="TextView01" />

    <TextView
        android:layout_width="100dp"
        android:layout_height="40dp"
        android:text="TextView02"
        android:background="#e0e0e0"/>

    <TextView
        android:layout_width="120dp"
        android:layout_height="130dp"
        android:text="TextView03"
        android:textColor="#c62828"
        android:background="#ababab"/>

    <TextView
        android:layout_width="50dp"
        android:layout_height="match_parent"
        android:text="TextView04"
        android:background="#dcedc8"/>

</LinearLayout>

orientation="horizontal"に設定をすると、サブオブジェクトを横順序で配置します。

コード上の最初の人TextView01から並べ替えます。縦領域を使い切っていない場合は、空の領域に残ります。

特異な点的には、TextView04の場合widthが50dpに設定されているが端の部分が軽く切られていることを見ることができます。横のすべての領域を使い切ったので、50dpの長さを与えることができなかったからです。このように、最後のオブジェクトは、優先順位が最も低いため、dpで長さを設定すると、切り捨てられることもあり、空のスペースが残ることがあります。

linearlayout

layout_weight

layout_weightは、内部オブジェクトのサイズを比率でのまま保持方式です。

例を layout_weightについて調べてみましょう。次のコードを入力し、結果を確認してください。

<?xml version="1.0" encoding="utf-8"?>
<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="com.example.codestudio.myapplication.MainActivity">

    <TextView
        android:layout_width="100dp"
        android:layout_height="0dp"
        android:text="TextView01"
        android:layout_weight="1"
        android:background="#80cbc4"/>

    <TextView
        android:layout_width="100dp"
        android:layout_height="0dp"
        android:text="TextView02"
        android:layout_weight="1"
        android:background="#e0e0e0"/>

    <TextView
        android:layout_width="100dp"
        android:layout_height="0dp"
        android:text="TextView03"
        android:layout_weight="1"
        android:background="#ababab"/>

    <TextView
        android:layout_width="100dp"
        android:layout_height="0dp"
        android:text="TextView04"
        android:layout_weight="1"
        android:background="#e1bee7"/>

</LinearLayout>

orientation="vertical"に設定されて縦に並べています。各オブジェクトが同じ高さに設定されたが、その理由は、すべてのオブジェクトに layout_weight="1"に設定したからです。

特異な点で、 layout_weightプロパティを使用したサブオブジェクトのlayout_height値を0に設定しました。その理由は、Vetical(縦)方向で layout_weightを使用するには、layout_height値を0dpに設定する必要があり、ルールがあるからです。

layout_weightはどのオブジェクトのweightをViewGroup内のすべてのweightの合計値で割った割合だけ高さや幅を割り当てます。

TextView01の場合 layout_weightが1に設定され、TextView01〜04のすべてのlayout_weightの合計を求めれば、4になります。したがってTextView01の高さはLinearLayoutの高さの1/4に設定されます。

TextView02、03、04の場合も、LinearLayoutの高さの1/4に設定されます。だから結果的にすべて同じ高さに設定された。

linearlayout

horizontalの場合も説明します。次のコードを入力し、結果を確認してください。

<?xml version="1.0" encoding="utf-8"?>
<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="horizontal"
    tools:context="com.example.codestudio.myapplication.MainActivity">

    <TextView
        android:layout_width="0dp"
        android:layout_height="100dp"
        android:text="TextView01"
        android:layout_weight="0.3"
        android:background="#80cbc4"/>

    <TextView
        android:layout_width="0dp"
        android:layout_height="100dp"
        android:text="TextView02"
        android:layout_weight="0.2"
        android:background="#e0e0e0"/>

    <TextView
        android:layout_width="0dp"
        android:layout_height="100dp"
        android:text="TextView03"
        android:layout_weight="0.2"
        android:background="#ababab"/>

    <TextView
        android:layout_width="0dp"
        android:layout_height="100dp"
        android:text="TextView04"
        android:layout_weight="0.3"
        android:background="#e1bee7"/>

</LinearLayout>

orientation="horizontal"でオブジェクトが横方向に並べています。 Horizontalで layout_weightを使用するサブオブジェクトのlayout_widthはすべて0dpに設定する必要があります。

今回 layout_weightは少数に設定された、少数にも対応するため、同じように高さが設定されます。 サブオブジェクトのすべてのweightを合わせれば1になって、各オブジェクトの割合を求めるのが容易です。

TextView01の場合0.3に設定され、全体の合計が1であるため、LinearLayoutの30%を占めています。

TextView02の場合20%、TextView03の場合20%、TextView04の場合、30%を占めています。

linearlayout

すべてのViewの割合を定めたくない時もあります。こういうときの割合でサイズを求めたいオブジェクトのみを layout_weightプロパティを使用します。 以下のコードを入力して、結果を確認してください。

<?xml version="1.0" encoding="utf-8"?>
<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="horizontal"
    tools:context="com.example.codestudio.myapplication.MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="100dp"
        android:text="TextView01"
        android:background="#80cbc4"/>

    <TextView
        android:layout_width="0dp"
        android:layout_height="100dp"
        android:text="TextView02"
        android:layout_weight="0.5"
        android:background="#e0e0e0"/>

    <TextView
        android:layout_width="0dp"
        android:layout_height="100dp"
        android:text="TextView03"
        android:layout_weight="0.5"
        android:background="#ababab"/>


    <TextView
        android:layout_width="wrap_content"
        android:layout_height="100dp"
        android:text="TextView04"
        android:background="#e1bee7"/>

</LinearLayout>

TextView01とTextView04はContentサイズだけwidthを与えたかった。だから wrap_contentに設定しました。

そして、残りのスペースをTextView02とTextView03が半々ずつ分けてあげたかった。だからwidthを0dpに設定し、weightを0.5ずつくれました。

結果を見ると、TextView01と04は、Contentサイズだけの領域を占め、残りのスペースをTextView02とTextView03が半々ずつに分けて行いました。

注意すべき点は、固定的にサイズを指定したオブジェクトが使用して、残りの領域での比率通り持っていくのです。 LinearLayoutフルサイズでの比率通り持って行くことはありません。

linearlayout

weightSum

weightSumは全体の割合を定める属性です。 layout_weightプロパティは常に残りのサイズでの割合でサイズを分けてくれるので、余白が存在しません。 weightSumを利用すれば、必要な割合だけ余白を残すことができます。

例を紹介します。以下のコードを入力して、結果を確認してください。

<?xml version="1.0" encoding="utf-8"?>
<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="horizontal"
android:weightSum="1"
tools:context="com.example.codestudio.myapplication.MainActivity">

<TextView
    android:layout_width="0dp"
    android:layout_height="100dp"
    android:text="TextView01"
    android:layout_weight="0.2"
    android:background="#80cbc4"/>

<TextView
    android:layout_width="0dp"
    android:layout_height="100dp"
    android:text="TextView02"
    android:layout_weight="0.2"
    android:background="#e0e0e0"/>

<TextView
    android:layout_width="0dp"
    android:layout_height="100dp"
    android:text="TextView03"
    android:layout_weight="0.2"
    android:background="#ababab"/>

<TextView
    android:layout_width="0dp"
    android:layout_height="100dp"
    android:text="TextView04"
    android:layout_weight="0.2"
    android:background="#e1bee7"/>

</LinearLayout>

LinearLayoutのweightSumは1に設定され、内部オブジェクトの layout_weight属性の合計は0.8です。

weightSumがない場合0.2 / 0.8(= 1/4)の割合だけの長さが割り当てられますが、weightSumが1に設定されているので0.2 / 1.0の比率だけの長さが割り当てられます。

だからTextView01からTextView04まで順番に20%ずつの長さが割り当てられ、残りの20%は、余白に残ります。 linearlayout

まとめ

要約すると、LinearLayoutは、水平または垂直の順序で内部オブジェクトを順番に並べ替えるくれるLayoutです。そして、内部オブジェクトの長さを必要に応じて調節するために、さまざまな属性をサポートしています。

チュートリアルで使用したコードは、GitHub:LinearLayoutで確認することができます。

参考

Related Posts

codechachaCopyright ©2019 codechacha