Androidアプリの構造

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

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

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

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

• layout
• drawable
• values

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

layoutディレクトリについて

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

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

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

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

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

drawableディレクトリについて

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

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

valuesディレクトリについて

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

まとめ

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

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