Android UIの実装において意識してほしいこと

概要

今回はUIを実装するにあたって常に意識してほしいことをまとめました。
ここでいうUIとは主にレイアウト（xml）のことを指しています。

UIといってもユーザーエクスペリエンスの話がどうという話をするわけではないです。あくまでデザイナーではなく開発者がレイアウトを作成する上でやったほうがいいこと挙げてみました。

UI Stackを意識する

「UI Stack」とは１つの画面が状態に応じて、最適化された表示を行うというものです。というと難しいかもしれませんが、要は「ローディング状態」や「空っぽの状態」などをうまく切り替えましょうということです。

f:id:QoopMk:20191115222341j:plain

これはアメリカのデザイナー Scott Hurffさんによって提唱されました。こちらが元ネタです。
https://www.scotthurff.com/posts/why-your-user-interface-is-awkward-youre-ignoring-the-ui-stack/

この「UI Stack」は５つの状態から構成されています。

Blank State（空っぽの状態）
Loading State（ローディング状態）
Partial State（部分達成状態）
Error State（エラー状態）
Ideal State（理想状態）

それぞれの解説についてはこちらの方の記事が参考になりました。

note.mu

しかし、多くのデザインはIdeal State（理想状態）のものしか用意されてないことが多いことが現実です。
あらかじめ状態を切り替えれるようにロジックを組んでいれば、後からでもデザイナーと相談して作成していくことができるので、１つの画面ごとに状態の変化があるということを意識して実装していきましょう！

Tools-Attributesを正しく設定しよう

Tools-Attributesとはレイアウトを組む際にPreviewに表示される、いわば仮のデータです。
これを設定していない人はかなり多いです。

Tools-Attributesを正しく設定することで、本物のデータを反映した時と近しい画面をPreviewで確認することができます。
これをやっていないと、予期せぬところでTextViewの改行が許容されていたり、画像の表示エリアが想定していたエリアと異なっていたなどの問題が発生してしまいます。
なので、固定値がある場合はいいですが、コードで反映する変数値のUIは必ず可視化しておくことが大切です。頭で考えるよりも見えていた方が何倍も楽です。

特に以下のものは重要です。

View

tools:visibility
- 必須ではないが、UIが重なっているかつステータスに応じて表示・非表示となる場合は必須。１つだけをVISIBLEに設定して、それ以外はGONEもしくはINVISIBLEに設定。

RecyclerView

app:layoutManager
- 必須。LinerLayoutManager/GridLayoutManager/StaggeredGridLayoutManagerのいづれかを設定。
- コードで設定する必要がある場合は tools:layoutManager でも可。
tools:spanCount
- 必須ではない。ただし、GridLayoutManager使用する場合は必須。
tools:itemCount
- 必須ではない。
tools:listitem
- 必須。