Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

11f1c6f9a26793f33d93eed3a97f4a6c?s=47 kazy1991
December 10, 2020

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

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

11f1c6f9a26793f33d93eed3a97f4a6c?s=128

kazy1991

December 10, 2020
Tweet

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機能で気軽に 投稿してください!