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が厄介だなと思う人は是非試してみてもらえればと思います。