Android アプリのレイアウトを勉強する(1)

2014/08/22: てっちゃん

こんにちは、デザイナーのてっちゃんです。
最近は、タイトルに連番を付けてブログを続けていくライフハックを実践中。
苦しくならないうちにクロージングしようと思います。

っと、言いながらも今回もつけてしまいました。
今回はAndroidアプリを制作するときのレイアウト作るとき必要な情報を紹介していきます。
アプリの中でもレイアウトはデザイナーも係る大事な部分です。
構造はHTML・CSSに似ているのでコーディングが出来るデザイナーであれば比較的学習コストは低いと思います。

なぜデザイナーがレイアウトを？

おそらく他社でもだいたい同じだと思いますが弊社ではプログラマーがAndroidアプリのレイアウトを制作しています。
先程も述べた用にレイアウトにはXML形式で書いていくのでHMTL・CSSに似ているため、普段から行っているデザイナーが行うほうが効率的であり、クオリティも担保できます。プログラマーはレイアウト以外に集中できるので開発のスピードが上がると思います。

Android studioのダウンロード

Androidアプリを制作するにはまず専用のアプリケーションをダウンロードします。
弊社のプログラマーに教えてもらったAndroid studioを使って制作します。
詳しい内容は書きませんが、インストーラーを進んでいけば無事にインストールできます。

XMLでレイアウトを構築

XMLファイルなので、宣言文を書きその下にレイアウトの記述を書いていきます。
レイアウトを構築するのに、テキスト、画像、ボタンなどの様々なViewがありますが、これらは、ViewGroupと呼ばれるビューに入れていく必要があります。

<?xml version="1.0" encoding="utf-8"?>
<ViewGroup>
    <View />
    <View />
</ViewGroup>

<?xml version="1.0" encoding="utf-8"?>

</ViewGroup>

ViewGroupに様々な種類があり、それぞれ用途が違います。

Linear Layout: 縦向きまたは横向きに一直線にウィジェットを並べるレイアウト
Relative Layout: 相対的な位置指定をするレイアウト。また，上端や下端にレイアウトするといった指定を行うことも可能
Absolute layout: 配置を「絶対座標」で指定するレイアウト。
Table layout: View (テキスト・画像・ボタン等) を表形式でレイアウトするためのものです
Frame layout: 後から配置したウィジェットが前面に描画されるレイアウト

よく使うViewの用途は以下になっています。

ListView: リストとして並べるレイアウト
GridView: データをグリッド状(格子状)に表示するためのビュー
TextView: テキスト表示するためのビュー
ImageView: 画像を表示するためのビュー

ルート要素

XML宣言の次に来るViewGroupはルート要素と呼ばれるものです。これは一番外側の要素で他の要素は全てルート要素の中に記述されます。複数のビューを使用する場合、必ずViewGroupの中に配置する必要があるので、ルート要素は上記にあてたいずれかのViewGroupとなります。

<?xml version="1.0" encoding="utf-8"?>
<ルート要素>
    <View />
    <View />
    <ViewGroup>
        <View />
    </ViewGroup>
</ルート要素>

<?xml version="1.0" encoding="utf-8"?>

<ルート要素>

</ViewGroup>

</ルート要素>

ルート要素にはお約束として「xmlns:android」属性に対して「http://schemas.android.com/apk/res/android」を必ず設定する必要があります。Androidのレイアウト用として定義されている「height」なのかHTMLなのかが区別できないのでそれを区別するための識別子です。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="@string/hello" />

</LinearLayout>

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:orientation="vertical" >

<TextView

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:text="@string/hello" />

</LinearLayout>

ViewGroupで頻繁に使うLinear LayoutとRelative Layoutを説明していきます。

Linear Layout

横に並べるにはandroid:orientation="horizontal"と指定します。
また、画面いっぱいに分割することも可能で、android:layout_weight="1"で画面を自動で分割してくれるので、このへんはHTML・CSSより楽ですね。

<?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:orientation="horizontal"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent">

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="50dp"
        android:layout_weight="1"
        android:text="1"
        android:textSize="22sp"
        android:textColor="#fff"
        android:gravity="center"
        android:background="#0000ff"
        />
    <TextView
        android:layout_width="fill_parent"
        android:layout_height="50dp"
        android:text="2"
        android:textSize="22sp"
        android:textColor="#fff"
        android:gravity="center"
        android:background="#00ff00"
        android:layout_weight="1"
        />
    <TextView
        android:layout_width="fill_parent"
        android:layout_height="50dp"
        android:text="3"
        android:textSize="22sp"
        android:textColor="#fff"
        android:gravity="center"
        android:background="#aa0000"
        android:layout_weight="1"
        />
    </linerLayout>

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:orientation="horizontal"

android:layout_width="fill_parent"

android:layout_height="fill_parent">

<TextView

android:layout_width="fill_parent"

android:layout_height="50dp"

android:layout_weight="1"

android:text="1"

android:textSize="22sp"

android:textColor="#fff"

android:gravity="center"

android:background="#0000ff"

<TextView

android:layout_width="fill_parent"

android:layout_height="50dp"

android:text="2"

android:textSize="22sp"

android:textColor="#fff"

android:gravity="center"

android:background="#00ff00"

android:layout_weight="1"

<TextView

android:layout_width="fill_parent"

android:layout_height="50dp"

android:text="3"

android:textSize="22sp"

android:textColor="#fff"

android:gravity="center"

android:background="#aa0000"

android:layout_weight="1"

</linerLayout>

横レイアウト

縦に並べるときはandroid:orientation="vertical"と指定します。
当然縦でも分割してくれます。

<?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:orientation="vertical"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent">

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="1"
        android:textSize="22sp"
        android:textColor="#fff"
        android:gravity="center"
        android:background="#0000ff"
        />
    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="2"
        android:textSize="22sp"
        android:textColor="#fff"
        android:gravity="center"
        android:background="#00ff00"
        android:layout_weight="1"
        />
    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="3"
        android:textSize="22sp"
        android:textColor="#fff"
        android:gravity="center"
        android:background="#aa0000"
        android:layout_weight="1"
        />
    </linerLayout>

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:orientation="vertical"

android:layout_width="fill_parent"

android:layout_height="fill_parent">

<TextView

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:layout_weight="1"

android:text="1"

android:textSize="22sp"

android:textColor="#fff"

android:gravity="center"

android:background="#0000ff"

<TextView

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:text="2"

android:textSize="22sp"

android:textColor="#fff"

android:gravity="center"

android:background="#00ff00"

android:layout_weight="1"

<TextView

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:text="3"

android:textSize="22sp"

android:textColor="#fff"

android:gravity="center"

android:background="#aa0000"

android:layout_weight="1"

</linerLayout>

縦レイアウト

画面いっぱいに伸ばしり、均等割が使いやすい反面、階層が深くなる傾向にあるのでだいたい3階層をめどにルールを決めるといいと思います。

共通で使える各種の細かい説明はこちら

要素名	説明
android:layout_width	横幅
android:layout_height	縦幅
android:layout_weight	親ビューの余った余白を指定したwegihtの割合で分割されます。数字で指定します。
fill_parent/match_parent	cssで言うところのdisplay:blockの状態で横いっぱいに広がります。
wrap_content	cssで言うところのdisplay:inlineの状態でコンテンツの横幅に合わせた状態になります。
android:text	テキスト
android:textSize	テキストのサイズ
android:background	背景色
sp(Scale-independent Pixels)	画面上のサイズはユーザのフォントサイズ設定に準じます。
dp(Density-independent Pixels)	ディスプレイ解像度の物理的な密度に応じた抽象単位になります。
android:gravity	位置の指定をする事が出来ます。オブジェクトの配置場所を変えるための指定です。

Relative Layout

相対的なレイアウトを作ることが出来ます。
各要素にid android:id="@+id/text1"をふってandroid:layout_toLeftOfで相対的な位置を指定しています。

android:layout_toEndOf : 下からの相対的な位置
android:layout_toLeftOf : 左からの相対的な位置
android:layout_toRightOf : 右からの相対的な位置
android:layout_toStartOf : 上からの相対的な位置

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">

<TextView
    android:text="1"
    android:id="@+id/text1"
    android:layout_width="wrap_content"
    android:layout_height="50dp"
    android:layout_alignParentTop="true"
    android:layout_alignParentLeft="true"
    android:textSize="22sp"
    android:paddingLeft="20px"
    android:paddingRight="20px"
    android:textColor="#fff"
    android:gravity="center"
    android:background="#0000ff"
/>
<TextView
    android:text="2"
    android:id="@+id/text2"
    android:layout_width="fill_parent"
    android:layout_height="50dp"
    android:layout_alignParentTop="true"
    android:layout_toLeftOf="@+id/text3"
    android:layout_toRightOf="@+id/text1"
    android:textSize="22sp"
    android:textColor="#fff"
    android:gravity="center"
    android:background="#00ff00"
/>
<TextView
    android:text="3"
    android:id="@+id/text3"
    android:layout_width="wrap_content"
    android:layout_height="50dp"
    android:layout_alignParentTop="true"
    android:layout_alignParentRight="true"
    android:paddingLeft="20px"
    android:paddingRight="20px"
    android:textSize="22sp"
    android:textColor="#fff"
    android:gravity="center"
    android:background="#aa0000"
/>
</RelativeLayout>

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="fill_parent"

android:layout_height="fill_parent">

<TextView

android:text="1"

android:id="@+id/text1"

android:layout_width="wrap_content"

android:layout_height="50dp"

android:layout_alignParentTop="true"

android:layout_alignParentLeft="true"

android:textSize="22sp"

android:paddingLeft="20px"

android:paddingRight="20px"

android:textColor="#fff"

android:gravity="center"

android:background="#0000ff"

<TextView

android:text="2"

android:id="@+id/text2"

android:layout_width="fill_parent"

android:layout_height="50dp"

android:layout_alignParentTop="true"

android:layout_toLeftOf="@+id/text3"

android:layout_toRightOf="@+id/text1"

android:textSize="22sp"

android:textColor="#fff"

android:gravity="center"

android:background="#00ff00"

<TextView

android:text="3"

android:id="@+id/text3"

android:layout_width="wrap_content"

android:layout_height="50dp"

android:layout_alignParentTop="true"

android:layout_alignParentRight="true"

android:paddingLeft="20px"

android:paddingRight="20px"

android:textSize="22sp"

android:textColor="#fff"

android:gravity="center"

android:background="#aa0000"

</RelativeLayout>

相対レイアウト

このくらいであればLiner Layoutでも作れますが、Relative Layoutの利点は深い階層を作らずにレイアウトを実現できるところです。ただし、使いすぎるとメンテナンスが難しくなります。

こんな感じで、よく使うLinear LayoutとRelative Layoutで色々できそうなことがわかっていただけかと思います。
今回はここまでですか、紹介した通りVeiwは他にもあるで、次回以降掘り下げていたらと思っています。
新しいことをやるのはいつでも楽しいですね！

次回は...

ここまでやってフロントエンドやコードがある程度わかる人であれば親和性が高い事がわかると思います。
是非、興味を持ったら自分でやってみてください。次回は引き続きVeiwの説明をしていき、最終的には実際にアプリになっているレイアウトを作っていこうと思います。

Category： Android ,レイアウト

CREATOR BLOG

Android アプリのレイアウトを勉強する(1)

なぜデザイナーがレイアウトを？

Android studioのダウンロード

XMLでレイアウトを構築

ルート要素

Linear Layout

Relative Layout

次回は...

この記事を書いた人

Recent Entry

Category

Archive

Link

なぜデザイナーがレイアウトを？

Android studioのダウンロード

XMLでレイアウトを構築

ルート要素

Linear Layout

Relative Layout

次回は...

この記事を書いた人

関連する記事

Recent Entry

Category

Archive

Link