AndroidでUIを組むならLinearLayoutのweightSumを使うと早いかも

iOSの場合、XcodeのGUIツールで簡単に組むことができますが、

AndroidはXmlで組む必要があるので、iOSの比べると少々面倒です。

（AndroidもGUIツールで組めるけど、結構癖がある気がする）

個人的にはAndroidでUIを組む時はLinearLayoutのweightSumのが一番組みやすいと思います。

LinearLayoutのweightSumを使ってUIを組む方法

例えば上記のようなUIを組みたい場合は以下のような感じになります。

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:weightSum="1920"
        android:orientation="vertical"
        android:background="@android:color/white">
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="200">
        </LinearLayout>
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="300">
            <TextView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:text="タイトル"
                android:textAlignment="center"
                android:gravity="center"/>
        </LinearLayout>
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="900"
            android:orientation="horizontal"
            android:weightSum="1000">
            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="100"
                ></LinearLayout>
            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="800"
                android:orientation="horizontal"
                android:weightSum="800"
                android:background="@drawable/waku">
                <LinearLayout
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="50">
                </LinearLayout>
                <LinearLayout
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="700"
                    android:orientation="vertical"
                    android:weightSum="900">
                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="0dp"
                        android:layout_weight="30"></LinearLayout>
                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="0dp"
                        android:layout_weight="840">
                        <EditText
                            android:id="@+id/input_text"
                            android:layout_width="match_parent"
                            android:layout_height="match_parent"
                            android:background="#00000000"
                            android:lines="10"
                            android:gravity="top|left"
                            android:inputType="textMultiLine"
                            android:text=""/>
                    </LinearLayout>
                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="0dp"
                        android:layout_weight="30"></LinearLayout>
                </LinearLayout>
                <LinearLayout
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="50">
                </LinearLayout>
            </LinearLayout>
            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="100"
                ></LinearLayout>
        </LinearLayout>
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="200">
        </LinearLayout>
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="200">
            <FrameLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent">
                <Button
                    android:id="@+id/select_button"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:text="プレイ"/>
            </FrameLayout>
        </LinearLayout>
    </LinearLayout>

</android.support.constraint.ConstraintLayout>

例えば横1080×縦1920の画面を作る場合、
画面のそれぞれの要素をLinearLayoutで分けて、要素毎に android:weightSumで幅や高さを指定します。
「android:weightSum」に1920を指定して、「android:orientation="vertical"」を設定すれば、
それぞれ要素の高さはweightで指定できます。

weightを使ってUIを組むと、px指定ではなく、総数（weightSum）に対する割合（weight）でUIが決まるので、機種によってUIが異なるということを防げます。

weightを使ってレイアウトを組むメリットとしては、

• 画面サイズが異なる画面でも、1つのxmlで同じような見た目にすることができるのが楽
• レイアウト崩れが発生しにくい

っていうメリットがあります。

逆にデメリットとしては、

• xmlのコード自体が長くなる
• 後からコードを追っていくのは結構大変
• 全体の割合を考えながら組む必要があるので、結構混乱しやすい

って感じです。

このデメリットに関しては、要素毎にlayoutファイルを分けて読み込む形にしたりすると改善できるので、
個人的にはこの方法がやりやすいです。（何と言っても、機種による見た目の違いを少なくできるメリットが大きい）

もし、AndroidのUIが厄介だなと思う人は是非試してみてもらえればと思います。

参考：
developer.android.com