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

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

Transcript

1. 基本のAndroid
   View開発ドキュメント
   モバイル基盤部 吉田万輝(@k4zy)
   

   View Slide

2. レシピサービスアプリの開発体制
   ● 初回リリース: 2014年初旬
   ● 開発人数: 10人くらい
   ● リリースサイクル: 週に1回
   ● コードベース: 20万行前後(Java: 8万行, kotlin: 12万行)
   ● Gradleモジュール数: 40くらい
   

   View Slide

3. View開発ドキュメントとは？
   ● アーキテクチャやコーディング規則では言及が少ない部分
   ● XMLのレイアウトファイルやActivity/FragementからのViewの操作をどう
   書くかをまとめたもの
   ● 命名規則や利用する技術を揃えることで保守性を上げる
   

   View Slide

4. ドキュメントを用意した経緯
   ● 全体のアーキテクチャについては既にドキュメントが存在していたが画面を
   どう組み立てるかについては共通認識が薄く、実装した時期や実装者に
   よって画面の組み方にばらつきがあった
   ● 数ヶ月に渡る大幅なリニューアルの計画があり、
   今回のリファクタリングでは新しく参加するメンバーも複数人いた
   

   View Slide

5. 大幅なリニューアルの様子
   

   View Slide

6. 1.View Bindingへの統一
   

   View Slide

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
   

   View Slide

8. 2.レイアウトファイルの命名規則
   

   View Slide

9. レイアウトファイルの命名規則
   コンポーネント 命名規則
   Activity activity_xxx
   Fragment fragment_xxx
   CustomView view_xxx
   ItemView item_view_xxx
   ● component_type_screen_name.xmlの命名に統一して、対応
   するクラスとレイアウトファイルを明確にした
   

   View Slide

10. 3.ConstraintLayoutの活用
    

    View Slide

11. ConstraintLayoutの活用
    ● 導入はしていたものの、当時は利用箇所が少なく十分に活用できていな
    かった。
    ● 新規 View を作成する際は ConstraintLayout で View の配置の指定す
    るように指針を定めた。
    ● ConstraintLayout を使ってもらうために基礎知識と便利な機能も社内ド
    キュメントにまとめたので一部を紹介します。
    

    View Slide

12. MATCH_CONSTRAINT について
    ● Viewのwidth や height に 0dp を指定すると、MATCH_CONSTRAINT
    として扱われる。この状態では制約を満たす最大の大きさでレイアウトが組
    まれる。
    ● ConstraintLayout下では、MATCH_PARENTは非推奨で意図しないレイ
    アウトになる可能性があるので代わりにMATCH_CONSTRAINTを利用す
    る。
    

    View Slide

13. 相対的な制約を理解する
    ● constraint{Side}to{Side}of だけで簡単なレイアウトは組める
    ● Sideの部分には (start| end | top | bottom) が入る
    ● 下記の例はbuttonBの左辺をbuttonAの右辺に揃える制約になる
    

    View Slide

14. 相対的な制約を理解する
    

    View Slide

15. 縦横比の指定
    layout_constraintDimensionRatioを利用すると、Viewの縦横比を自由に制
    御できる
    

    View Slide

16. その他の便利な機能
    ● 相対的な制約を活用した中央寄せ
    ● Biasを使ったViewの位置調整
    ● Layerを利用したViewのグループ化
    ● Barrier や Guideline や Flowなどの補助機能
    ● ChainStyleを使った複数のViewの均等配置など...
    

    View Slide

17. 4.Material Components
    

    View Slide

18. Material Componentsの導入
    ● AppCompatのThemeは開発が止まっており、Material Componentsへ
    の移行が推奨されている。
    ● Material Components には開発に役立つUIコンポーネントが数多くあり、
    部分的に利用することも可能。
    ● Themeを乗り換えた際に遭遇した問題は、大規模プロジェクトにおけるモバ
    イル基盤の取り組み で紹介しています。
    

    View Slide

19. ShapeableImageView
    画像の角丸表現や、円形のユーザーアイコンなどがレイアウトファイルだけで表
    現できるすごいImageView
    

    View Slide

20. ShapeableImageView
    画像の角丸表現や、円形のユーザーアイコンなどがレイアウトファイルだけで表
    現できるすごいImageView
    

    View Slide

21. MaterialCardView
    ● MaterialCardViewをレイアウトのルートにすると、内部の要素まるごと角
    丸にしたり外枠をつけることが可能。
    ● ConstraintLayoutとMaterialCardViewを組み合わせると大体のレイア
    ウトのが組めるのが魅力。
    

    View Slide

22. MaterialCardView
    

    View Slide

23. 5.RecyclerViewの改善
    

    View Slide

24. ConcatAdapterの活用
    ● 1.2.0-alpha02から追加された複数のAdapterを直列に繋げる機能
    ● HeaderAdapter, ContentAdapter, FooterAdapter のようにAdapter
    を分割することでヘッダー/フッターの実装が楽になった。
    ● PagedListAdapter(Pagingライブラリ) と併用が可能
    

    View Slide

25. 6.その他の取り組みについて
    

    View Slide

26. PullRequest CIを使い倒す
    ktlintでの未フォーマット検出や未使用リソースの検出は全てbotに委譲
    ●
    

    View Slide

27. おわり
    ● 時間の都合で紹介できなかった内容はTechlifeに書いているので、
    合わせて読んでいただけると幸いです。
    ● 「うちの会社ではこうしてるよ」という知見がありましたら、Zoomのチャット機
    能やツイートでぜひ教えて下さい。
    ● もっと詳しく聞きたい点や質問がありましたら、ZoomのQ&A機能で気軽に
    投稿してください！
    

    View Slide