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

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

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

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

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

1.View Bindingへの統一

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

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

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

3.ConstraintLayoutの活用

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

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

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

相対的な制約を理解する

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

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

4.Material Components

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

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

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

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

MaterialCardView

5.RecyclerViewの改善

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

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

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

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