@mixiappwchrこの記事はあくまで直接いじってもらったほうがお互いの工数減るよねという部分だけ、扱えるようになるといいよね!いう観点のため、実装をデザイナーさんにまかせたいわけではありません!ただ構造を知ってるだけでもコミュニケーションが円滑になるかと思うので一読していただけると幸いです皆さん最終的にUIを実装した後のチェックはどうしてますか?デザイナーさんに色々チェックしてもらうと細かいpixelのずれやフォントサイズのずれなど、細かい点ですが、アプリの完成度に大きく影響をあたえるものなので、きちんと修正したいところです。↓...とやると膨大な時間がかかってしまいます。そこで弊社のAndroidスーパーエンジニアの方がデザイナーさんに直接xmlを触ってもらっている話に,非常に感銘を受けたので自分のプロジェクトでもやってみることにしました。このドキュメントは、それを行うためにデザイナーさんがUIをちょっといじるために最低限の説明を書いてみました。対象としてはデザイナーさん向けになります(内容についてはAndroidエンジニアの方々に色々ご意見をいただきました。Studioで始めると思いますが。修正時にPreviewがきちんと反映してくれるのでUIの調整はこちらを使わない理由はありません。fileによって表されます。それぞれの部品はxmlのタグで表現されていて部品の種別はタグ名,マージンがどーのこーのとかはxmlの属性により表現されます。大きく分けるとViewの部品はテキストとかボタンとか,Viewに実際に表示される部品それらを配置するためにレイアウトする部品に分けられます。HTMLで言うと前者はinputタグ後者はdivとかになります。組み方も近い感じになっていてdivとかを使ってレイアウトをくみながら、UI部品を配置していきます。RelativeLayoutと言った物があります。後ろにLayoutとかついてればレイアウト用のViewだと思ってください。話すとリスト表示するためのListViewやGrid表示するためのViewがありますが、これもある種のレイアウト用のViewです。リソースもう一つViewを構成する概念があって、例えばViewに配置する画像とかの指定はすべてResourceという概念を通して扱います。リソースの概念は、画像だけではなく、文字列、marginやwidthとかのサイズの表現、色、さらにはアニメーションなどもリソースとして扱うことができ、基本的にはリソースとして扱うことにより管理がしやすくなります。前述のレイアウトも実際にはこのリソースの一つとなります。xmlにベタで指定するのではなく、サイズ、色などもいったんリソース化してそれを指定するようにしてもらえると後々メンテがしやすいです。Webでいうとこの辺の扱いはCSSの用な物と思ってもらえるとわかりやすいかと思います。以下の配下にUIに関するリソースがおいてあります。必要そうなとこだけ説明しておきます。drawable-xxxは各dpiごとに画像リソースを配置します。drawableを見ます。メニューもリソース化されてます。valuesには,色、サイズ、文字列、styleをまとめたstyleリソースなどなどおいてあります。スタイル設定サイズの指定dpi,dp,spの説明は、事前にエンジニア、デザイナー間で認識は合っていると思いますので省きますがレイアウトはdp,テキストはspで指定します。命名規則Androidでは、Activityという物がひとつの画面、さらにはそれをさらに部品かしてるFragmentというもので構成されています。それら自体の詳細は割愛しますがactivity_xxxxxfragment_xxxxxと名前を付けているものがページ単位であったり、ページのヘッダ、フッタなど、比較的大きめの単位のレイアウトになっていたりするでしょう。それ以外はさらに細かい単位のUI部品になっていて、まず上記のページ単位で、ファイルを探してもらって、そこからさらに細かい部品などをチェックしてみてください。見当たらない場合はjavaのソース側で指定されているのでエンジニア側に聞きましょう。基本的に水平か垂直にViewを配置していくLinearLayoutViewを相対的に配置できるRelativeLayoutの組み合わせでレイアウトをくんでいきます。あるのですが、とりあえずこの2つ。ListViewやGrid表示はプログラムで主に扱うので割愛。リスト表示やグリッドの一つ、一つのViewは,上記のレイアウトでくんであり、こちらは触ってもらう事があるかと思います。どれが対応するかはエンジニア側で教えてあげましょう。調整の仕方xmlのプロパティをいじると、細かいマージンとか色については調整が可能です。いじる値は直接指定されているか,xmlで共通化、さらにstyleとしてまとめられています。AndroidStudioだとプレビューで確認できるのでざっくりそちらで調整した後,実機かGenymotionで確認してください。layoutにテキストが入ってなかったり、画像が指定されてなかったりしますがその場合は仮でテキストを埋めてみたり、ダミー画像リソースを調整してみるなどしてみてください。注意ですが、確認したあとはダミーの入力は元に戻しておいてください。マージン調整layout:marginとかをいじればokです個別の値はxml直に直書きしてもらって、共通化してる物はdimens.xmlの値またはstyleの設定をいじってください。色は背景ならbackground属性だったり,TextカラーはtextColorなどをいじってください。これも個別の値はxml直に直書きしてもらって、共通化してる物はcolors.xmlの値またはstyleの設定をいじってください。drawable-mdpidrawable-xhdpidrawable-xxhdpiのディレクトリに突っ込んでください。ldpiもありますが、とりあえずこれは無視してオッケーです。各dpiごとに書き出して、例えばImageOptimとかで画像の最適化もかけてください。9patchAndroidでは9patchという形式のデータを用いることで、わざわざ色々なサイズの画像を用意しなくても、角丸のボタンを作ったりすることが可能です。これについては特に気にならないレベルであれば1xで9patch形式の画像を書き出してdrawableに入れてください。実際確認してみて気になるようでしたら、通常の画像と同じように各dpiごとに画像を作成してください。細かい作成時の注意点xmlも画像も使っては行けない文字がありますので気をつけましょう。やる例として「-」を使ってしまう奴です。(_にしましょう)今回は新規レイアウトを組んでもらったりまではしませんが、できるだけ入れ子にせずに組むとなお良いです。(動きが軽くなる)レイアウトが深すぎると一部端末で動かなくなるので注意です。リネームはAndroidStudioのリネーム機能を使いましょう。画像は使い過ぎに注意(解像度毎に必要でapkの容量が大きくなる)AppendixAndroidは部品やアニメーションまでxmlで色々な物が作れます。Studioだとプレビューで見ることができます。http://stackoverflow.com/questions/15333529/how-to-provide-shadow-to-buttonデザイナーさんに確認してもらう前に、CustomViewを私用していてExecptionが出ている場合は下記を参照して事前にちゃんとプレビューできるように調整しておきましょう!http://tech.admax.ninja/2014/10/06/how-to-avoid-the-exception-of-preview-when-customview/おわりに所感Androidはこの辺のリソース化が上手くやりやすく、こういった分業が大きくやりやすいと非常に感じています。Studioが登場したことによる進化も大きく実感しています。iOSの方がぱっと見デザイナーさんも触りやすそうですが、AndroidのHTMLに近い概念や,リソースで扱うことによるメンテナンス性は遥かにこちらの方が上手く進めやすいです。webフロントエンジニアの人もAndroidのレイアウトは理解しやすそうかなとも思っています。職種の枠を超えてお互いに歩み寄り上手く連携することで、上手く効率化をはかっていきましょう!他にも効率化を図っている事例があれば是非是非教えてください!こちらの記事からもう少し突っ込んだ話を下記に書いています。DeNAと渡り歩いて、現在フリーランスでやっています。iOS,サーバーサイド,Android,JS,sass,インフラなんでもやります。upLoginユーザーは見つかりませんでした。