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

# はじめに
[前回](http://qiita.com/rild/items/243ad1b479ea535ecf94) の続きです.

前回は, メッセージウィンドウまで作りました.

<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">

# 5. メニュー
次はメニューを作っていきます.

メッセージの右下に, 重ねて表示させてみます.

**↓完成図**
<img width="457" alt="battle_scene.png" src="https://qiita-image-store.s3.amazonaws.com/0/90254/057fc1ef-17d5-fe79-40ac-7d9d931ac63b.png">

## 5.1. メニューの枠を作る
LinearLayoutを使ってレイアウトしていきます.

[GridLayout](https://developer.android.com/reference/android/widget/GridLayout.html) とか使えば多少ネストが浅くなる気がしますが, レイアウトの練習ということでここは一つ.

<img width="300" alt="スクリーンショット 2017-04-01 15.33.25.png" src="https://qiita-image-store.s3.amazonaws.com/0/90254/a7e459e4-41d0-7bed-c97b-97105450ac44.png">

[(矢印入り)](https://qiita-image-store.s3.amazonaws.com/0/90254/3f7e61f2-f4ea-ac49-f7ad-5b7e5054e230.png)

一番内側のLinearLayoutには `ImageView` と `TextView` を入れます.

**追記:**
外側に LinearLayout を追加して, 黒い枠を作っています.

### 5.1.1. 外側の黒い枠になる部分(LinearLayout)を入れる

- before

![スクリーンショット 2017-04-01 15.28.11.png](https://qiita-image-store.s3.amazonaws.com/0/90254/560df5a7-e7f1-e27b-0fa0-c1e59c8a5a57.png)

- after

![スクリーンショット 2017-04-01 15.46.17.png](https://qiita-image-store.s3.amazonaws.com/0/90254/60177720-dd71-f95e-dec9-f22cad026761.png)

次の値を設定します.

| attribute   | value    |
| :------------- | :------------- |
| layout_width       | 200dp       |
| layout_height       | match_parent       |
| layout_gravity       | right       |
| background       | #363f3a       |
| padding       | 4dp       |
| visibility       | visible       |

padding は <font color="#363f3a">#363f3a</font> の部分を枠のように使うために, 「内側に隙間を作る」ための値です.

`width` を `200dp` にしたのは, なんとなくそれっぽくなったからです

~~適当~~

#### 5.1.1.1 android:visibility
`android:visibility` に `visible` を設定してますが, これは, あとあと「メニューを消したり, 逆に表示したり」できるようにするためです.

[setVisibility](https://developer.android.com/reference/android/view/View.html) というメソッドで操作されている様子の確認をあとで行います.


### 5.1.2. 内側の枠(LinearLayout)を入れる

#### 5.1.2.1. 背景素材(drawable/pokemon_battle_menu_frame.xml) を作る

[ファイルの作成方法(確認用)](http://qiita.com/rild/private/96859e2c282d820a2975)

![スクリーンショット 2017-04-01 16.02.25.png](https://qiita-image-store.s3.amazonaws.com/0/90254/b949eb15-f1c5-ab6b-491c-41cbbf7daf5a.png)

`pokemon_battle_menu_frame.xml`

```xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">

    <solid android:color="#f9f8fe" />
    <corners android:radius="8dp" />
    <stroke
        android:width="6dp"
        android:color="#716b8f" />
</shape>
```

下のような感じになっていれば, メニューの枠として使えます.

![スクリーンショット 2017-04-01 17.23.42.png](https://qiita-image-store.s3.amazonaws.com/0/90254/d54de0a5-3c64-dd46-b81d-ecef5bcf8331.png)

#### 5.1.2.2. 枠を入れる

![スクリーンショット 2017-04-01 16.09.01.png](https://qiita-image-store.s3.amazonaws.com/0/90254/c2210913-0c5f-a0d9-a2da-65d528b393b3.png)

これでメニューの枠が完成しました.

書き加えた部分は次の通りです.

`pokemon_gba_battle.xml`

```xml
<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/pokemon_battle_menu_frame"
    android:orientation="horizontal"

    android:paddingBottom="12dp"
    android:paddingLeft="10dp"
    android:paddingRight="10dp"
    android:paddingTop="12dp">

    <!--here next-->

</LinearLayout>
```

次は選択肢とカーソルを並べていきます.

## 5.2. 選択肢とカーソルを作る

選択肢は次の４つ

- たたかう
- バッグ
- ポケモン
- にげる

これに [material icon: ic_play_arrow](https://material.io/icons/#ic_play_arrow) で作ったカーソルを隣に並べます.

### 5.2.1. 縦に並べる LinearLayout を入れる

![スクリーンショット 2017-04-01 16.19.45.png](https://qiita-image-store.s3.amazonaws.com/0/90254/d94ca227-3580-c797-4350-58573a988ba2.png)

幅 (`width`) は `0dp` で, `layout_weight` は `1` を入れます.

`android:orientation="vertical"` を忘れずに入れておきます.


### 5.2.2. 選択肢とカーソルのための LinearLayout を入れる

`ImageView` と `TextView` を横向きに,

**四箇所** に並べます.

![スクリーンショット 2017-04-01 16.30.53.png](https://qiita-image-store.s3.amazonaws.com/0/90254/73e80593-50ef-8bcd-c395-c9e8de4f767e.png)


<img width="724" alt="スクリーンショット 2017-04-01 16.33.50.png" src="https://qiita-image-store.s3.amazonaws.com/0/90254/995958ae-c1ab-da44-5799-f13ef5d20fab.png">

![スクリーンショット 2017-04-01 16.35.44.png](https://qiita-image-store.s3.amazonaws.com/0/90254/270f0751-3ff7-bbf1-0d8d-87f900a7cb0b.png)

これで, `ImageView`(カーソル) と `TextView` (選択肢) を受け入れる準備ができました.

### 5.2.3. 選択肢とカーソルを入れる

#### 5.2.3.1. カーソル素材の準備をする
drawable で使える vector が使えるようになったのでそちらを使用します.

新しく `ic_play_arrow.xml` というファイルを作成して,

```xml
<vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:width="24dp"
        android:height="24dp"
        android:viewportWidth="24.0"
        android:viewportHeight="24.0">
    <path
        android:fillColor="#FF000000"
        android:pathData="M8,5v14l11,-7z"/>
</vector>
```

をコピーして貼り付けてください.

![スクリーンショット 2017-04-01 16.50.12.png](https://qiita-image-store.s3.amazonaws.com/0/90254/4323f34f-f649-c74f-ff7d-861e2b438a4d.png)

たーのしー

**参考:**

- [VectorDrawable対応まとめ](http://qiita.com/konifar/items/bf581b8f23dea7b30f85)
- [AppCompat — Age of the vectors](https://medium.com/@chrisbanes/appcompat-v23-2-age-of-the-vectors-91cbafa87c88)

#### 5.2.3.2. 選択肢とカーソルを配置する

`ImageView` と `TextView` をワンセットで, ４組セットしていきます.


![スクリーンショット 2017-04-01 16.57.39.png](https://qiita-image-store.s3.amazonaws.com/0/90254/cf0a7aad-efb4-18c9-3aa6-68526d139e1b.png)

- ImageView (カーソル)

| Header One     | Header Two     |
| :------------- | :------------- |
| layout_width       | 0dp       |
| layout_height       | wrap_content       |
| layout_weight       | 1       |
| src       | @drawable/ic_play_arrow       |

- TextView (選択肢)

| Header One     | Header Two     |
| :------------- | :------------- |
| layout_width       | 0dp       |
| layout_height       | wrap_content       |
| layout_weight       | 5       |
| gravity       | center_vertical       |
| text       | (例)たたかう       |

それっぽくするために, `gravity` には `center_vertical` を設定しました.

##### 5.2.3.2.1. gravity
[android:gravity](https://developer.android.com/reference/android/widget/LinearLayout.html#attr_android:gravity)

レイアウトの中に対して, どの方向に寄せるかを設定できます.

今回 `TextView` に `center_vertical` を設定しているので,

中身である文字 (`text` の値) が, 「縦方向にみたときに真ん中になる」ような gravity が設定されています.

#### 5.2.3.3. visibility を設定する
今, メニューは下のような状態になっていると思います.

![スクリーンショット 2017-04-01 17.09.56.png](https://qiita-image-store.s3.amazonaws.com/0/90254/1b2da415-f48e-fdaf-a47b-5569dde0c827.png)

カーソルは「選択状態にあるカーソルのみ表示」されるようにしなければいけないので,

**見えている状態 (visible)** / **見えない状態 (invisible)** という値を `ImageView` に追加します.

- ImageView (カーソル)

| Header One     | Header Two     |
| :------------- | :------------- |
| layout_width       | 0dp       |
| layout_height       | wrap_content       |
| layout_weight       | 1       |
| src       | @drawable/ic_play_arrow       |
| **visibility**       | **visible (or invisible)**       |

**たたかう** には見えている状態 (visible) を設定して,

![スクリーンショット 2017-04-01 17.13.14.png](https://qiita-image-store.s3.amazonaws.com/0/90254/93216881-2149-e2f1-ea52-9238e3fd3dd9.png)

それ以外の３つ ( **ポケモン** **バッグ** **にげる** ) には, 見えない状態 (invisible) を設定します.

![スクリーンショット 2017-04-01 17.13.46.png](https://qiita-image-store.s3.amazonaws.com/0/90254/8e944ac3-ca41-1525-36e9-11a5b9fad752.png)

## 5.3. メニュー完成
それっぽい感じになりました.

![スクリーンショット 2017-04-01 17.13.59.png](https://qiita-image-store.s3.amazonaws.com/0/90254/c9862a3a-38e2-a21b-baff-e4d2087f908e.png)

### 5.3.1. メニューを消してみる
一番最初, 5.1.1. で, `LinearLayout(horizontal)` に `android:visibility="visible"` を設定したのを覚えているでしょうか.

これを `invisible / visible` とすることで, メニューを表示したり, 消したりできます.

![スクリーンショット 2017-04-01 17.28.56.png](https://qiita-image-store.s3.amazonaws.com/0/90254/e6da6cd9-3864-a911-8db2-e5a44d23dcc6.png)

![スクリーンショット 2017-04-01 17.29.03.png](https://qiita-image-store.s3.amazonaws.com/0/90254/376a014d-fb89-7c14-c52e-62a897225bd1.png)

# おわりに
続きます

*coming soon*