基本のAndroid View開発ドキュメント

https://cookpad.connpass.com/event/195190/ の発表スライドです。
あわせて、 https://techlife.cookpad.com/entry/2020/12/10/080819 も御覧ください

Transcript

1. 基本のAndroid View開発ドキュメント モバイル基盤部 吉田万輝(@k4zy)
2. レシピサービスアプリの開発体制 • 初回リリース: 2014年初旬 • 開発人数: 10人くらい • リリースサイクル: 週に1回 • コードベース: 20万行前後(Java: 8万行, kotlin: 12万行) • Gradleモジュール数: 40くらい
3. View開発ドキュメントとは？ • アーキテクチャやコーディング規則では言及が少ない部分 • XMLのレイアウトファイルやActivity/FragementからのViewの操作をどう 書くかをまとめたもの • 命名規則や利用する技術を揃えることで保守性を上げる
4. ドキュメントを用意した経緯 • 全体のアーキテクチャについては既にドキュメントが存在していたが画面を どう組み立てるかについては共通認識が薄く、実装した時期や実装者に よって画面の組み方にばらつきがあった • 数ヶ月に渡る大幅なリニューアルの計画があり、 今回のリファクタリングでは新しく参加するメンバーも複数人いた
5. 大幅なリニューアルの様子
6. 1.View Bindingへの統一
7. View への参照方法が複数あった • DataBinding, ViewBinding, syntheticsの3つが混在していた。 • DataBindingの高度な機能はVIPERでは利用する機会が少ない。 • syntheticsはとても便利だったが、いくつか問題も認識していた。 • ViewBindingは後発なこともあり、高速に動作し仕組みもわかりやすいた めチーム内の評価が高かった。 • 私達のチームではViewBindingを採用することに決定 (補足) syntheticsは11月に非推奨となり、ViewBindingへの移行が推奨されています https://android-developers-jp.googleblog.com/2020/11/the-future-of-kotlin-android-extensions.html
8. 2.レイアウトファイルの命名規則
9. レイアウトファイルの命名規則 コンポーネント 命名規則 Activity activity_xxx Fragment fragment_xxx CustomView view_xxx ItemView item_view_xxx • component_type_screen_name.xmlの命名に統一して、対応 するクラスとレイアウトファイルを明確にした
10. 3.ConstraintLayoutの活用
11. ConstraintLayoutの活用 • 導入はしていたものの、当時は利用箇所が少なく十分に活用できていな かった。 • 新規 View を作成する際は ConstraintLayout で View の配置の指定す るように指針を定めた。 • ConstraintLayout を使ってもらうために基礎知識と便利な機能も社内ド キュメントにまとめたので一部を紹介します。
12. MATCH_CONSTRAINT について • Viewのwidth や height に 0dp を指定すると、MATCH_CONSTRAINT として扱われる。この状態では制約を満たす最大の大きさでレイアウトが組 まれる。 • ConstraintLayout下では、MATCH_PARENTは非推奨で意図しないレイ アウトになる可能性があるので代わりにMATCH_CONSTRAINTを利用す る。
13. 相対的な制約を理解する • constraint{Side}to{Side}of だけで簡単なレイアウトは組める • Sideの部分には (start| end | top | bottom) が入る • 下記の例はbuttonBの左辺をbuttonAの右辺に揃える制約になる
14. 相対的な制約を理解する
15. 縦横比の指定 layout_constraintDimensionRatioを利用すると、Viewの縦横比を自由に制 御できる
16. その他の便利な機能 • 相対的な制約を活用した中央寄せ • Biasを使ったViewの位置調整 • Layerを利用したViewのグループ化 • Barrier や Guideline や Flowなどの補助機能 • ChainStyleを使った複数のViewの均等配置など...
17. 4.Material Components
18. Material Componentsの導入 • AppCompatのThemeは開発が止まっており、Material Componentsへ の移行が推奨されている。 • Material Components には開発に役立つUIコンポーネントが数多くあり、 部分的に利用することも可能。 • Themeを乗り換えた際に遭遇した問題は、大規模プロジェクトにおけるモバ イル基盤の取り組み で紹介しています。
19. ShapeableImageView 画像の角丸表現や、円形のユーザーアイコンなどがレイアウトファイルだけで表 現できるすごいImageView
20. ShapeableImageView 画像の角丸表現や、円形のユーザーアイコンなどがレイアウトファイルだけで表 現できるすごいImageView
21. MaterialCardView • MaterialCardViewをレイアウトのルートにすると、内部の要素まるごと角 丸にしたり外枠をつけることが可能。 • ConstraintLayoutとMaterialCardViewを組み合わせると大体のレイア ウトのが組めるのが魅力。
22. MaterialCardView
23. 5.RecyclerViewの改善
24. ConcatAdapterの活用 • 1.2.0-alpha02から追加された複数のAdapterを直列に繋げる機能 • HeaderAdapter, ContentAdapter, FooterAdapter のようにAdapter を分割することでヘッダー/フッターの実装が楽になった。 • PagedListAdapter(Pagingライブラリ) と併用が可能
25. 6.その他の取り組みについて
26. PullRequest CIを使い倒す ktlintでの未フォーマット検出や未使用リソースの検出は全てbotに委譲 •
27. おわり • 時間の都合で紹介できなかった内容はTechlifeに書いているので、 合わせて読んでいただけると幸いです。 • 「うちの会社ではこうしてるよ」という知見がありましたら、Zoomのチャット機 能やツイートでぜひ教えて下さい。 • もっと詳しく聞きたい点や質問がありましたら、ZoomのQ&A機能で気軽に 投稿してください！