近年、デザイナーも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とありますが、今回は入門なのでいくつかに絞って紹介します。LinearLayoutLinearLayoutは、UIパーツを線形に並べたいときに使用します。縦一列や横一列に均等に並べたい時はLinearLayoutが最適です。縦一列に並べる時ボタンを縦一列に並べる図の様に、ボタンを縦一列に並べる場合は、LinearLayoutのorientation属性にverticalを指定します。</LinearLayout>12345678910111213141516<LinearLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"><Buttonandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="Button1"/><Buttonandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="Button2"/></LinearLayout>横一列に並べる時ボタンを横一列に並べる図の様に、ボタンを横一列に並べる場合は、LinearLayoutのorientation属性にhorizontalを指定します。ボタンを画面いっぱい等幅に並べたい時ボタンを等幅に並べる図の様に、ボタンを等幅に並べたい時は、ボタンにlayout_weight=”1′′を指定します。その時、layout_width=”0dp”を指定します。するとキレイに等幅に並びます。</LinearLayout>123456789101112131415161718<LinearLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"android:orientation="horizontal"><Buttonandroid:layout_width="0dp"android:layout_height="wrap_content"android:layout_weight="1"android:text="Button1"/><Buttonandroid:layout_width="0dp"android:layout_height="wrap_content"android:layout_weight="1"android:text="Button2"/></LinearLayout>RelativeLayoutRelativeLayoutはUIパーツを相対的に配置する時に使用します。各パーツとの相対位置が必要な場合はこのレイアウトを使います。太郎"/><TextViewandroid: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="年齢"/><TextViewandroid: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との相対位置を指定するには、属性が必要になります。それぞれの属性が何を出来るかは下の表にまとめたので参考にしてください。自身をavobeとかbelowとかtoLeftOfの指定Viewにさせない?引用元:Qiitaまた、各属性を指定するためにはidをつける必要があります。idはどのViewかを特定する名前なので、一意のものをつけるようにしましょう。スタイルを統一するアプリの中でフォントサイズやテキストカラーなどはなるべく統一したいですね。いう時は、WebでいうCSSの様にスタイルを適用することが出来ます。styles.xmlに共通のスタイルを置いていると思います。先程作成した、名前と年齢を表示しているViewのフォントサイズとテキストカラーを統一したいと思います。name="android:textSize">12sp</item></style>上記コードをstyle.xmlに追記します。BaseTextはテキストカラーを#000、テキストサイズを16spに指定しました。SmallTextはテキストサイズだけ小さくしたかったので、BaseTextを継承して、テキストサイズを12spに指定しました。これを、各TextViewに指定することが出来ます。太郎"style="@style/BaseText"/><TextViewandroid: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"/><TextViewandroid: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は少し読みづらいので、エンジニアからダメ出しされます。親子構造をしっかりすればもう少し読みやすくなります。※エンジニアによって方針が異なるので注意してください。太郎"style="@style/BaseText"/></LinearLayout><LinearLayoutandroid: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"><TextViewandroid:id="@+id/age_label"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="年齢"style="@style/SmallText"/><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_marginLeft="16dp"android:text="25歳"style="@style/BaseText"/></LinearLayout></LinearLayout>デザイナーさんが作成するデザインファイルのレイヤー分けもこんな感じになっているので、この書き方の方がイメージしやすいので個人的にはこの書き方が好きです。今回は基本的なところしか触れられませんでした。要望があればもう少し書きますので、ご連絡ください。Analyticsを使ってデータに向きあうべき理由で、エンジニアもデータに向き合ったほうがよいと紹介しました。Touchはリリースから1年以上経ったので、すでに実装されている方も多いでしょう。Storeのレビューが積み上がり式なので、一度低評価なレビューがついてしまうと評価をあげることは難しいです。serviceを9.8.0にしてから一部の端末で起動直後にクラッシュすると報告がありました。