Bowyer Tech Blog

元Androidエンジニアによる技術ブログ

Androidアプリ

【デザイナー向け】基礎から始めるAndroidレイアウトXML入門

投稿日:

近年、デザイナーも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を指定します。

横一列に並べる時

ボタンを横一列に並べる

図の様に、ボタンを横一列に並べる場合は、LinearLayoutのorientation属性にhorizontalを指定します。

ボタンを画面いっぱい等幅に並べたい時

ボタンを等幅に並べる

 

図の様に、ボタンを等幅に並べたい時は、ボタンにlayout_weight=”1″を指定します。その時、layout_width=”0dp”を指定します。そうするとキレイに等幅に並びます。

RelativeLayout

RelativeLayoutはUIパーツを相対的に配置する時に使用します。各パーツとの相対位置が必要な場合はこのレイアウトを使います。

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のフォントサイズとテキストカラーを統一したいと思います。

上記コードをstyle.xmlに追記します。

BaseTextはテキストカラーを#000、テキストサイズを16spに指定しました。

SmallTextはテキストサイズだけ小さくしたかったので、BaseTextを継承して、テキストサイズを12spに指定しました。

これを、各TextViewに指定することが出来ます。

これでスタイルを統一することが出来ました。

レイアウトXMLの記述をキレイにする

先程作成したViewは少し読みづらいので、エンジニアからダメ出しされます。親子構造をしっかりすればもう少し読みやすくなります。※エンジニアによって方針が異なるので注意してください。

デザイナーさんが作成するデザインファイルのレイヤー分けもこんな感じになっているので、この書き方の方がイメージしやすいので個人的にはこの書き方が好きです。

今回は基本的なところしか触れられませんでした。要望があればもう少し書きますので、ご連絡ください。

-Androidアプリ
-,

執筆者:

関連記事

AdvertisingIdClient#getAdvertisingIdInfoがnullを返すのでアプリがクラッシュする

google play serviceを9.8.0にしてから一部の端末で起動直後にクラッシュすると報告がありました。クラッシュログによるとAdvertisingIdClient#getAdvertis …

データで見る3D TouchやApp Shortcutsの利用状況

iOS9から追加された3D Touchはリリースから1年以上経ったので、すでに実装されている方も多いでしょう。Android7.1より追加されたApp Shortcutsはまだ7.1のOSが一般ユーザ …

How to make App Shortcuts

僕が実践したGoogle Analyticsのトラッキングログ実装

エンジニアもGoogle Analyticsを使ってデータに向きあうべき理由で、エンジニアもデータに向き合ったほうがよいと紹介しました。 この記事では、私の公開している採点簿というAndroidアプリ …

Androidアプリのレビュー対策とその効果

AndroidアプリはGoogle Play Storeのレビューが積み上がり式なので、一度低評価なレビューがついてしまうと評価をあげることは難しいです。かと言って、インセンティブをバラまいて故意に高 …