テクノモンキーのアプリ開発日記

テクノモンキーの開発ブログです。iOS、Android、Unity、Cocos2d-xなどアプリ開発関連のTipsやアプリ開発に役立つ情報を発信します。

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

https://cdn-ak.f.st-hatena.com/images/fotolife/h/hmbdyh/20170110/20170110101721.jpg


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

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

AndroidGUIツールで組めるけど、結構癖がある気がする)


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


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

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

例えば上記のような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