YULDEV

技術系の備忘録

デザイナーでもわかるAndroidのレイアウトXML

この投稿はAndroid Adevent Calendar 2014 の7日目の記事です。


Androidアプリがどのような構成でできているか、ご存知ですか。
基本的にはエンジニアリングが必要なのですが、UIのレイアウト部分はアルゴリズムの部分からすこし切り離されています。
そしてそのレイアウト部分はXMLという、HTMLやCSSがわかる方なら少しの学習でも扱うことができる言語で書かれています。
XMLの学習を始めた頃、デザイナー向けにXMLの基礎について書かれた資料が見つけられなくて困ったので、自分用のメモも兼ねて基本的な使い方についてまとめます。

※デザイナー視点で書いているので、エンジニアにとっては物足りないものになっているかと思います。

Androidアプリの構造

Androidアプリはたくさんのディレクトリ(フォルダ)とファイルから構成されています。ですがデザインを編集していく場合は基本的に

アプリのトップ > app > src > main > res

の中のものしか編集しません。

resディレクトリの中にはたとえばこんなディレクトリがあります。

  • layout
  • drawable
  • values

ほかにもアニメーションをつけるためのファイルを置くところとか、色の情報をまとめるためのファイルを置くところとかがあるのですが、特によく使う上記の3つについてざっくり紹介します。

layoutディレクトリについて

layoutディレクトリの中には、アプリの画面ごとのファイルを置きます。webでいうhtmlファイルのような感じ。マークアップを書くような感じで、画像や文言を配置するコードを書きます。

f:id:yulily100:20141207221422p:plain

例えば上のような画面なら、このように書きます。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:gravity="center_horizontal"
    android:background="#ffffff">
    <ImageView
        android:layout_width="119dp"
        android:layout_height="102dp"
        android:src="@drawable/heart"
        android:layout_marginTop="60dp"/>
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="ようこそ!"
        android:textColor="#686868"
        android:textSize="20sp"
        android:textStyle="bold"
        android:layout_marginTop="20dp"/>
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="#999"
        android:text="さあ、さっそく始めよう!"
        android:layout_marginTop="4dp"/>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="はじめる"
        android:background="@drawable/heart_btn"
        android:textColor="#fff"
        android:paddingLeft="40dp"
        android:paddingRight="40dp"
        android:layout_marginTop="20dp"/>
</LinearLayout>


このコードを元に、すこし詳しく説明します。

Layoutの種類

HTMLはふつうに書くと上から下に要素が並ぶのですが、Androidのlayoutファイルの場合は最初にどのように要素を並べるかを指定します。

LinearLayout

一番単純な表示方法で、縦一列または横一列に並べることができます。

RelativeLayout

「画像は文字の左側」「画像を画面の下部にくっつける」というように、相対的に表示します。

GridLayout

要素をマス目のように配置します。
例えば画像を3×3のタイル状に配置したいときなどに使います。

要素を置き、スタイルをあてる。

どのLayoutにするか決まると、次は要素を置いていきます。
例では画像を表示させることができるImageViewと、文字を表示させることができるTextViewというものを使いました。
要素が置けたら、そこにスタイルを書きます。
例のようこそ!という文字のTextViewにはこのようなスタイルがあてられています。

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="ようこそ!"
        android:textColor="#686868"
        android:textSize="20sp"
        android:textStyle="bold"
        android:layout_marginTop="20dp"/>

CSSを知っている方なら、なんとなくわかるんじゃないかなーと思います。
ちなみに要素の名前をきちんと覚えていなくても、Android Studioというエディタを使っていればいい感じに補完してくれます。
f:id:yulily100:20141207221823p:plain


drawableディレクトリについて

drawableディレクトリには画像ファイルや、要素の形状(角丸とか...)について指定したファイルを置きます。

画像は解像度ごとにディレクトリをわける

Androidには様々な解像度があります。画像ファイルは解像度ごとに書き出して、それぞれの解像度のディレクトリ

  • drawable-mdpi
  • drawable-hdpi (@1.5x)
  • drawable-xhdpi (@2x)
  • drawable-xxhdpi (@3x)

にそれぞれ置きます。

画像以外のdrawableファイル

例えば例に使っている『角丸で、タップしたときに色が変わるボタン』を作りたい場合は、以下のようなファイルを作りdrawableディレクトリに置きます。

  • drawable/heart_btn.xml
<?xml version="1.0" encoding="utf-8"?>
<selector
    xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true">
        <shape>
            <solid
                android:color="#FF7878" />
            <corners
                android:radius="3dp" />
        </shape>
    </item>
    <item>
        <shape>
            <solid
                android:color="#FF8D8D" />
            <corners
                android:radius="3dp" />
        </shape>
    </item>
</selector>


作ったdrawableファイルはlayoutファイルに書いた要素のsrcbackgroundなどに指定することができます。

valuesディレクトリについて

アプリでよく使う色やmarginの数値を、変数としてまとめておくことができます。
SASSやSCSSなどのCSSメタ言語を使う方ならMixinやVariableのようなものを想像するとわかりやすいと思います。

styles.xml

Layoutでよく使うスタイルをまとめておくことができます。CSSのような感じ。
またLollipop用のデザインとKitkat用のデザインを分けたいときにも用います。

colors.xml、dimen.xml、strings.xml など

色、数値、文言を変数ととして置くことができます。



まとめ

以上、どこに需要があるかわからないデザイナーへのXML布教記事でした。
デザイナーがコード書けると、精密な指示書を書かなくて済んだり、実機触りながらデザインできたりと、メリットも多いと思います。


( AndroidのAdvent Calendarなのにコードほとんどなくてすみません... )