はじめに

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

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

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

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

1. 作るもの

今回作るのはこちら.

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

ドット絵の素材だけこちらからDLしています.

2. 結果だけ先に

最終的にこうなりました.

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

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

3. 画面の大枠を作る

はじめは LinearLayout だけの状態から始めます.

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を採用しています.

3.2. 画面を区切る

3.2.1. 背景色

android:background に設定した色

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

#e1f6cf
#404251

3.2.2. 画面の分割

上の部分と下の部分を 3:1 に分割できる様に

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

3.2.2.1. layout_weightについて

layout_weight

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

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

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

という結果になります.

4. メッセージウィンドウ

画面の下の部分から取り掛かります.

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

4.1. テキストをつける

メッセージを表示させる部分を作ります.

もちろん TextView を使います.


<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 に入れます.

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

4.1.2. その他のテキストattrについて

android:text

表示させるテキスト

android:textColor

テキストの色

android:textSize

テキストのサイズ（単位は sp 推奨）

android:textStyle

フォント (bold italic nomal の３種類)

4.1.2.1. dp と sp

4.2. ウィンドウに枠をつける

赤い部分を作ります.

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

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

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

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

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

4.3. 枠を丸くする

DrawableResource

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

4.3.1. 角が丸い背景素材を作る

外側の赤い部分 pokemon_battle_message_frame.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 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

shape

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

corners

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

solid

図形に使用する単色。

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

今回は,

solid の android:color で色を,

corners の android:radius で丸の程度を

指定しました.

4.3.2. background を書き換える

旧

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

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

新

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

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

4.4. ウィンドウ完成

メッセージ部分だけなら近い感じになりました.

おわりに

次を作りました.

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

LinearLayout マシマシです.