Android app development: Layout&Design

似たような記事を以前にも書いたが、今回はもう少し内容を掘り下げていく。

始めに断っておくが、レイアウトのデザインは**かなり奥深い**ので、**配置を弄って色々試す**事を強くお勧めする。
あと、見た目がごちゃごちゃしてると使いづらくなっちゃうので、慣れて来たらUX/UIを意識したり、分かりやすい画面を目指そう。

まず、Androidのレイアウトには
・レイアウトを並べて表示する**コンテナ系**のレイアウト
・Activityから色々操作できる固有の役割を持った**機能型**のレイアウト
がある。

新しくレイアウトを作る際には基本的に**コンテナ系のレイアウトが最低1つ**は必要。
※ただ、後々**include**に使うとか、特定の用途の一部で使うものとかは例外はある。

で、どのレイアウトだろうが、マストで必要な物がある。

```xml:activity_main.xml
android:layout_width="match_parent"
android:layout_height="match_parent"
```
**layout_width**: レイアウトの幅
**layout_height**: レイアウトの高さ
幅と高さは基本的にはどこでもマスト。ただ、**ConstraintLayout**という上下左右に対しての幅を指定する考え方のレイアウトもあるにはある。

**width**と**height**には
**wrap_content**:そのレイアウト若しくはViewの表示に必要な領域だけを割く
**match_parent**:そのレイアウトを親Layoutの大きさ一杯まで表示する。なので、例えば親Layoutが一つの状態でwidthとheightにこれを指定すると画面一杯まで表示される。
**指定値**: **100dp**とか指定した値に設定する事もできる。ただまぁ、画面サイズがバラバラのAndroidでサイズを指定値にすると画面が崩れるリスクは増すので、気をつけて使おう。指定単位は**dp**

#コンテナ系レイアウトの代表とも言えるLinearLayout
このレイアウトは縦一列もしくは一列に表示するタイプのレイアウト。

```xml:activity_main.xml
<LinearLayout
   android:id="@+id/container"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:orientation="vertical" >

   <TextView
      android:id="@+id/textView"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content" />

</LinearLayout>
```
LinearLayoutを用いたレイアウト構成のサンプル。
レイアウトの縦横は**orientation**で指定する。縦は**vertical**、横は**horizontal**を指定する。
この中での**android:id**は**activity**や**fragment**から特定のレイアウトを操作したい時に使う。

また、コンテナ系レイアウトをコンテナ系レイアウトの中に作っちゃいけないという決まりはないので

```xml:activity_main.xml
<LinearLayout
   android:id="@+id/container"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:orientation="vertical" >
　　
　　<LinearLayout
   　　android:id="@+id/title_container"
   　　android:layout_width="match_parent"
   　　android:layout_height="match_parent"
   　　android:orientation="horizontal" />

   　　<TextView
      　　android:id="@+id/textView"
      　　android:layout_width="wrap_content"
      　　android:layout_height="wrap_content" />
   </LinearLayout>
</LinearLayout>
```
の様に書く事もできる。これは例えばレイアウトのベースはLinearLayoutで作りつつも、表示内容をセクションの様に分けたいと言った場合に有用。(というよりこうしないとあんま綺麗なレイアウト作れない

あとは

```
android:layout_weight="1"
```
の様に、weightを指定したviewを親view内でどういう比率で表示するかみたいなもの。
これを指定すると、親view内での表示領域を他のviewの領域を除き、使える領域を全部使って表示してくれる。
だから

```xml:activity_main.xml
<LinearLayout
   android:id="@+id/container"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:orientation="vertical" >
　　
　　<LinearLayout
   　　android:id="@+id/title_container"
   　　android:layout_width="match_parent"
   　　android:layout_height="match_parent"
   　　android:orientation="horizontal" />

   　　<TextView
      　　android:id="@+id/nameView"
      　　android:layout_width="wrap_content"
      　　android:layout_height="wrap_content" />
　　　 <EditText
          android:id="@+id/enterNameHere"
          android:layout_width="0dp"
          android:layout_height="match_parent"
          android:layout_weight="1" />
　　　　<Button
          android:id="@+id/go"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content" />
   </LinearLayout>
</LinearLayout>
```
みたいにすると、**nameView**と**go**を表示する領域は残しつつも、残りの領域は全部**enterNameHere**が使えるレイアウトが作れる。widthが0dpなのは、領域は比率で決まるから。wrap_contentで必要な領域だけ確保する訳でもなく、match_parentで領域を埋め尽くす訳でもない為。
また、weightは一つのレイアウトだけじゃなく複数指定も可能。その場合他のレイアウトのweightを2とか3にして調整する。

#主にFragment用のFrameLayout
FrameLayoutは上に被せて使う様なコンテナ系のレイアウト。主にFragment向けのレイアウトを作るときに使う。

```xml
<FrameLayout
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

</FrameLayout>
```
基本的に覆い被せて使うタイプと想像してもらうとわかりやすくなると思う。
でもFrameLayoutってレイアウトの整形機能は無いから、そのまま直でレイアウトパーツ置いちゃうと配置が崩れちゃう。
それを楽に解決するのがLinearLayoutをFrameLayout直下に置くやり方で、これだったらFrameLayoutをベースにしつつ、配置を整えたレイアウトが作れる
※Android Studioには注意されるから、理想のやり方では無いのかもしれない

```xml
<FrameLayout
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="中身"
            android:layout_gravity="center"/>
    </LinearLayout>
</FrameLayout>
```
本当はこれ以外にもコンテナ系レイアウト一杯あるし、まだ**android:layout_gravity**とか**android:gravity**とかのレイアウト整形術とか色々あるのだが、全部書くと疲れるので、一旦これで。必要に応じて追記予定。