【初心者用】Androidのレイアウトで遊んでみる１

# はじめに
企画 **「xmlを使ったレイアウトだけで色々作ってみよう」**

を勝手にやってみたのでそのまとめです.

Androidのレイアウトに慣れていない人でも楽しく`margin`やら`padding`やら`weight`やらを学べたらいいな、と思って作っています.

改善点が多々あると思うので, お気付きの点はコメント欄にコメントをお願いします.


# 1. 作るもの
今回作るのはこちら.

![pokemon_battle2.jpg](https://qiita-image-store.s3.amazonaws.com/0/90254/29726cc6-2373-8c2a-1f48-23054f78ca09.jpeg)

これを目標にしてみます.

ドット絵の素材だけ[こちら](http://hikochans.com/pixelart/pokemon/)からDLしています.

# 2. 結果だけ先に
最終的にこうなりました.

<img width="1283" alt="スクリーンショット 2017-03-25 21.42.58.png" src="https://qiita-image-store.s3.amazonaws.com/0/90254/ef5ff5b0-b918-6d04-296a-6d4546ed41e9.png">

- かなり苦しい部分ばかりなこと
- ViewGroupの入れ子構造がすごいので描画に優しくない画面となること

にご了承いただける方は続きをどうぞ.

# 3. 画面の大枠を作る
はじめは `LinearLayout` だけの状態から始めます.

<img width="963" alt="スクリーンショット 2017-03-25 22.05.32.png" src="https://qiita-image-store.s3.amazonaws.com/0/90254/e8a12ae7-9245-463d-3fe7-c9a76dfbfc5c.png">

`LinearLayout` の中に `FrameLayout` を２つ**縦向き**に並べるので,  `LinearLayout` に `android:orientation="vertical"` を忘れずに設定しておきましょう.

## 3.1. 使うもの
    - [FrameLayout](https://developer.android.com/reference/android/widget/FrameLayout.html)

> 異なるサイズのスクリーンに対応するため、FrameLayoutは通常１つの子Viewのみを持つことが望ましいが、`android:layout_gravity` を使って複数の子Viewを配置することができる。

「複数のViewを重ねられる」

ので、FrameLayoutを採用しています.

<img width="477" alt="スクリーンショット 2017-03-25 22.06.59.png" src="https://qiita-image-store.s3.amazonaws.com/0/90254/3fc9243b-227e-c192-fc56-ed33373fe98e.png">

## 3.2. 画面を区切る

<img width="948" alt="スクリーンショット 2017-03-26 10.16.29.png" src="https://qiita-image-store.s3.amazonaws.com/0/90254/32b18316-c65e-f849-44d5-07a475da09db.png">

### 3.2.1. 背景色
> `android:background` に設定した色

それぞれの背景には次の色を設定しました.

- <font color="#e1f6cf">#e1f6cf</font>
- <font color="#404251">#404251</font>

### 3.2.2. 画面の分割
上の部分と下の部分を **3:1** に分割できる様に

`android:layout_height="0dp"` を設定した上で, `android:layout_weight` に `3` と `1` を設定します.

#### 3.2.2.1. layout_weightについて
[layout_weight](https://developer.android.com/reference/android/widget/LinearLayout.LayoutParams.html#attr_android:layout_weight)

>LinearLayout の余った部分を `layout_weight` の比率で分配させる

今回は、２つの FrameLayout の高さ, `layout_height`, が `0` なので

「画面全体を1:3に分割する」

という結果になります. 

# 4. メッセージウィンドウ
画面の下の部分から取り掛かります. 

~~理由は上よりは簡単だからです~~

## 4.1. テキストをつける
メッセージを表示させる部分を作ります. 

もちろん [TextView](https://developer.android.com/reference/android/widget/TextView.html) を使います. 

```xml

<TextView
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:background="#68a09f"

  android:layout_marginBottom="10dp"
  android:layout_marginLeft="24dp"
  android:layout_marginRight="24dp"
  android:layout_marginTop="10dp"

  android:paddingLeft="16dp"
  android:paddingRight="16dp"
  android:paddingTop="8dp"

  android:text="ミズゴロウは　どうする？"
  android:textColor="#f4fbff"
  android:textSize="21sp"
  android:textStyle="italic" />
```

これを FrameLayout に入れます. 

<img width="1088" alt="スクリーンショット 2017-03-26 10.37.42.png" src="https://qiita-image-store.s3.amazonaws.com/0/90254/77696736-1003-2075-c359-9dbda77fa884.png">

### 4.1.1. Viewの余白
TextView には `layout_margin` と `padding` を設定しています. 

これらはそれぞれ `Left` `Right` `Top` `Bottom` などを加えることで, 部分的に値を設定することができます. 

どちらも `View` に余白を設定するものですが,  **どこに余白を入れるか** が違います. 

#### 4.1.1.1. marginとpaddingの違い
View の **外側** に余白を入れるのが `layout_margin` で、

View の **内側** に余白を入れるのが `padding` になります. 

詳しくは他サイト様に説明を譲ります. 

-  [今さら聞けないmarginとpadding](http://androidadvent.blogspot.jp/2011/12/marginpadding.html) 

### 4.1.2. その他のテキストattrについて
`android:text`
> 表示させるテキスト

`android:textColor`
> テキストの色

`android:textSize`
> テキストのサイズ（単位は sp 推奨）

`android:textStyle`
> フォント (bold italic nomal の３種類)

<img width="320" src="https://gyazo.com/d0d9ef7957e55ce16985d91735a74cfa.png"/>

#### 4.1.2.1. dp と sp
- [【Android】いまさら聞けないdp入門](http://qiita.com/nein37/items/0a92556a80c6c14503b2)
- [フォントサイズにspとdpどちらを使うか](http://growsic.com/blog/android/spordp/)

## 4.2. ウィンドウに枠をつける
<font color="#d44839">赤い</font>部分を作ります. 

使用するのはただの View です. 

FrameLayout が View を重ねて表示できることを利用します. 

```xml
<View
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:layout_margin="8dp"
   android:background="#d44839" />
```

上の, 枠のための View を書く位置にだけ注意してください. (場所を間違えるとうまく枠っぽくならないです. ) 

<img width="1246" alt="スクリーンショット 2017-03-26 10.58.16.png" src="https://qiita-image-store.s3.amazonaws.com/0/90254/1973cc35-cf90-7ed0-e11a-cb218db62d7f.png">

ちょっとだけそれっぽくなってきましたが, 枠が角張ってるので違和感があります. 

## 4.3. 枠を丸くする
[DrawableResource](https://developer.android.com/guide/topics/resources/drawable-resource.html) 

「なるべくxmlでやる！」というお題なので, `res/drawable/` で背景素材を作ります. 

### 4.3.1. 角が丸い背景素材を作る
<img width=350 src="https://gyazo.com/a7182081ad0f55e8f30ce2915ed1e8e7.png" />

外側の赤い部分 `pokemon_battle_message_frame.xml`

```xml
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#d44839" />
    <corners android:radius="12dp" />
</shape>
```

内側の部分 `pokemon_battle_message.xml`

```xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#68a09f" />
    <corners android:radius="12dp" />
</shape>
```

#### 4.3.1.1. shape, solid, corners について
[drawable-resource/shape](https://developer.android.com/guide/topics/resources/drawable-resource.html#Shape)

shape
> スケール ドローアブル。ルート要素でなければなりません。

corners
> 図形の角を丸くします。四角形にのみ適用できます。

solid
> 図形に使用する単色。

それぞれ `android:...` の形式で attribute を指定できます. 

今回は, 

solid の `android:color` で色を, 

corners の `android:radius` で丸の程度を

指定しました. 

### 4.3.2. background を書き換える
旧 

```xml
<View
    ...
    android:background="#d44839" />

<TextView
    ...
    android:background="#68a09f"
    .../>
```

新

```xml
<View
    ...
    android:background="@drawable/pokemon_battle_message_frame" />

<TextView
    ...
    android:background="@drawable/pokemon_battle_message"
    .../>
```

## 4.4. ウィンドウ完成
メッセージ部分だけなら近い感じになりました. 

<img width="1190" alt="スクリーンショット 2017-03-26 11.13.25.png" src="https://qiita-image-store.s3.amazonaws.com/0/90254/dd92e667-b37a-2634-33fa-01a8bc1bc3a0.png">

# おわりに
[次](http://qiita.com/rild/items/a54fadcec9130f767017) を作りました. 

右下のメニューを作る記事です. 

`LinearLayout` マシマシです.