近年、デザイナーもAndroidアプリやiOSアプリのレイアウトを自分で修正する時代になってきました。ある企業では、Androidエンジニアが大枠のレイアウトを組んで、マージンや色の微調整などはデザイナーが行ったりしています。僕の勤めている会社では、デザイナーがAndroidのソースコードを自らビルドし、デザインチェックを行っています。
そうすることで、デザイナーが意図しているデザインとの齟齬を極力少なくすることができます。
この記事では、AndroidアプリのレイアウトXMLをデザイナーさんが自分で修正出来るようになるための、入門をまとめます。
目次
Androidのレイアウトってどうなっているの？
AndroidのレイアウトはXMLという形式で記述されています。テキストやボタンなどのUIパーツや、LinearLayoutとう線形に配置できるレイアウトなどをタグを使って記述します。htmlと似ているので、htmlを触ったことがある人は馴染みが深いと思います。
Androidのレイアウトを編集する方法
GUIでAndroidのレイアウトを操作する
Androidのレイアウトは上図のように基本的にGUIで操作することが可能ですが、下図のようにできるだけTextモードで編集して欲しいです。
タグエディタでAndroidのレイアウトを操作
AndroidのレイアウトをTextモードで編集してほしい理由
エンジニアはGithubを使って開発を行っています。Githubでの修正はPR（プルリクエスト）を通してレビューしてもらいます。PRではGUIの変更も全てTextモードで表示されます。差分がタグでしか表示されないので、GUIでしか操作したことなければ解読することが出来ません。
Textモードでの解読に慣れておくために、開発時からTextモードを使いましょう。
Androidのレイアウトの種類は？
Androidで使えるレイアウトタグはFrameLayout,LinearLayout,TableLayout,GridLayout,RelativeLayout,ConstraintLayoutとありますが、今回は入門なのでいくつかに絞って紹介します。
LinearLayout
LinearLayoutは、UIパーツを線形に並べたいときに使用します。縦一列や横一列に均等に並べたい時はLinearLayoutが最適です。
縦一列に並べる時
ボタンを縦一列に並べる
図の様に、ボタンを縦一列に並べる場合は、LinearLayoutのorientation属性にverticalを指定します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button1" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button2" /> </LinearLayout> |
横一列に並べる時
ボタンを横一列に並べる
図の様に、ボタンを横一列に並べる場合は、LinearLayoutのorientation属性にhorizontalを指定します。
ボタンを画面いっぱい等幅に並べたい時
ボタンを等幅に並べる
図の様に、ボタンを等幅に並べたい時は、ボタンにlayout_weight=”1″を指定します。その時、layout_width=”0dp”を指定します。そうするとキレイに等幅に並びます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="horizontal" > <Button android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:text="Button1" /> <Button android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:text="Button2" /> </LinearLayout> |
RelativeLayout
RelativeLayoutはUIパーツを相対的に配置する時に使用します。各パーツとの相対位置が必要な場合はこのレイアウトを使います。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/activity_main" android:layout_width="match_parent" android:layout_height="match_parent" > <TextView android:id="@+id/name_label" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="16dp" android:layout_marginTop="16dp" android:text="名前" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="16dp" android:layout_marginTop="16dp" android:layout_toRightOf="@id/name_label" android:text="山田 太郎" /> <TextView android:id="@+id/age_label" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@id/name_label" android:layout_marginLeft="16dp" android:layout_marginTop="16dp" android:text="年齢" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@id/name_label" android:layout_marginLeft="16dp" android:layout_marginTop="16dp" android:layout_toRightOf="@id/age_label" android:text="25歳" /> </RelativeLayout> |
RelativeLayoutで相対位置を指定する方法
RelaytiveLayoutで各UIとの相対位置を指定するには、属性が必要になります。それぞれの属性が何を出来るかは下の表にまとめたので参考にしてください。
| 属性 | 内容 |
|---|---|
| android:ignoreGravity | 指定したViewは、親レイアウトのgravity設定が無視される |
| android:layout_alignBaseline | 指定したViewのベースラインに自身を合わせる |
| android:layout_alignParentTop（Bottom,Left,Right） | 親のレイアウトの上部（〜右部）に配置する |
| android:layout_centerInParent | 親のレイアウトの中央に配置する |
| android:layout_centerVertical | 親のレイアウトの垂直方向の中央に配置する |
| android:layout_centerHorizontal | 親のレイアウトの水平方向の中央に配置する |
| android:layout_alignTop(Bottom,Left,Right) | 指定したViewの上部（〜右部）に配置する |
| android:layout_above | 指定したViewの上部へ乗っかるような位置に配置する |
| android:layout_below | 指定したViewの下部へぶら下がるような位置に配置する |
| android:layout_toLeftOf（RightOf） | 指定したViewの左（右）に並べるように配置する |
| android:layout_alignWithParentIfMissing | 自身をavobeとかbelowとかtoLeftOfの指定Viewにさせない？ |
引用元：Qiita
また、各属性を指定するためにはidをつける必要があります。idはどのViewかを特定する名前なので、一意のものをつけるようにしましょう。
スタイルを統一する
アプリの中でフォントサイズやテキストカラーなどはなるべく統一したいですね。そういう時は、WebでいうCSSの様にスタイルを適用することが出来ます。
大抵のプロジェクトはmain -> res -> values -> styles.xmlに共通のスタイルを置いていると思います。
先程作成した、名前と年齢を表示しているViewのフォントサイズとテキストカラーを統一したいと思います。
|
1 2 3 4 5 6 7 8 |
<style name="BaseText"> <item name="android:textColor">#000</item> <item name="android:textSize">16sp</item> </style> <style name="SmallText" parent="BaseText"> <item name="android:textSize">12sp</item> </style> |
上記コードをstyle.xmlに追記します。
BaseTextはテキストカラーを#000、テキストサイズを16spに指定しました。
SmallTextはテキストサイズだけ小さくしたかったので、BaseTextを継承して、テキストサイズを12spに指定しました。
これを、各TextViewに指定することが出来ます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/activity_main" android:layout_width="match_parent" android:layout_height="match_parent" > <TextView android:id="@+id/name_label" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="16dp" android:layout_marginTop="16dp" android:text="名前" style="@style/SmallText" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="16dp" android:layout_marginTop="16dp" android:layout_toRightOf="@id/name_label" android:text="山田 太郎" style="@style/BaseText" /> <TextView android:id="@+id/age_label" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@id/name_label" android:layout_marginLeft="16dp" android:layout_marginTop="16dp" android:text="年齢" style="@style/SmallText" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@id/name_label" android:layout_marginLeft="16dp" android:layout_marginTop="16dp" android:layout_toRightOf="@id/age_label" android:text="25歳" style="@style/BaseText" /> </RelativeLayout> |
これでスタイルを統一することが出来ました。
レイアウトXMLの記述をキレイにする
先程作成したViewは少し読みづらいので、エンジニアからダメ出しされます。親子構造をしっかりすればもう少し読みやすくなります。※エンジニアによって方針が異なるので注意してください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 |
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/activity_main" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginLeft="16dp" android:layout_marginTop="16dp" android:orientation="horizontal" > <TextView android:id="@+id/name_label" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="名前" style="@style/SmallText" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="16dp" android:text="山田 太郎" style="@style/BaseText" /> </LinearLayout> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_below="@id/name_label" android:layout_marginLeft="16dp" android:layout_marginTop="16dp" android:orientation="horizontal" > <TextView android:id="@+id/age_label" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="年齢" style="@style/SmallText" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="16dp" android:text="25歳" style="@style/BaseText" /> </LinearLayout> </LinearLayout> |
デザイナーさんが作成するデザインファイルのレイヤー分けもこんな感じになっているので、この書き方の方がイメージしやすいので個人的にはこの書き方が好きです。
今回は基本的なところしか触れられませんでした。要望があればもう少し書きますので、ご連絡ください。
