what's new in Material Design で気になったトピック

Transcript

1. Google I/O 2023での Material Designまわりの話 @punchdrunker
2. mixi, Inc. What’s new in Material Design
 https://io.google/2023/program/630ffaa3-9b3d-4e30-a89f-91ef3e8052cf/intl/ja/ 

3. mixi, Inc. Materilal DesignとかMaterial Youとか
 - Material Design
 - 2014に発表されたデザインフレームワーク(Lollipopのプレビューが出た頃!!)
 - 画面に配置する部品の設計方針などをまとめたガイドライン
 - ガイドラインに従った実装をサポートするライブラリ群
 - 今は最新バージョンのMaterial 3とか M3とか呼ぶ事が多そう
 - Material You
 - Google I/O 2021で発表された
 - Material Desingの枠の中でユーザーに提供されるイイカンジの機能の総称
 - アプリアイコンの形を設定で変えられる
 - 色の具合を設定で変えられる
 - 壁紙をイイカンジに変えられる

4. mixi, Inc. Material Design関連の主なライブラリ
 従来のView用のライブラリとCompose用のライブラリは分かれているので、調査が若干大変。。。 
 - Compose Material (Jetpack) 
 - compose用のMDライブラリ
 - Compose Material 3(Jetpack) 
 - Material Design 2もあった気がするけど3からパッケージ名が別名
 - Material Components Android(非Jetpack) 
 - 昔からあるView用のMDライブラリ
 - Javaで書かれてる
 - 別名MDC-AndroidとかMDC
 - Composeと並行してメンテされてる
 - Jetpackには入っていない
 

5. mixi, Inc.
6. mixi, Inc.
7. mixi, Inc. What’s new in Material Designで気になったトピック
 - Carousel
 - RecyclerView用の LayoutManager が追加された
 - Dynamic Color - Content-based color 
 - これまで壁紙に合わせたColorScheme(色のセット)はあったが、画像リソースや単色を指定して、ColorSchemeを作っ てくれる

8. mixi, Inc. Carousel
 現状はMDCの方でしか実装されていないがComposeでも開発は進んでいる。 
 カタログアプリで実装されている。 
 https://github.com/material-components/material-components-android 
 
 - RecyclerViewのLayoutManagerとしてCarouselLayoutManagerが追加 
 - CarouselLayoutManagerにStrategyを渡して見せ型調整 
 - MultiBrowseCarouselStrategy 
 - なるべく多くのセルを表示 
 - HeroCarouselStrategy 
 - 1つ1つを強調して表示 

9. mixi, Inc. Dynamic Color - Content-based color
 2022くらいから端末の壁紙に合わせたColor schemeを選んでくれる仕組みはあった。(Android12以上) 
 
 画像リソースやColor resを渡すと最適なColor schemeを選んでテーマに組み込んでくれる仕組みが追加されるらしい。 
 https://m3.material.io/styles/color/dynamic-color/overview 
 こちらも現状ではMDCでしか対応されていなさそう。 
 内部ではMaterial Color Utilityが使われている 
 https://github.com/material-foundation/material-color-utilities 
 - 渡されたbitmapをQuantizeしてScoreクラスで評価するとbaseSeedColorが得られる 
 - baseSeedColorをもとにSchemeContentが作成されて、それをContextに反映してinflate 
 - Pixel 6aで3秒くらい掛かったので、いろんな部品に使いまくるものではなさそう(200kBのpng) 

10. mixi, Inc. 5 Key colors

11. mixi, Inc. Content-based colorの使い方(Activity)
 @Override
 protected void onCreate(Bundle savedInstanceState) { 
 
 // Invoke before the view is inflated in your activity. 
 DynamicColors.applyToActivityIfAvailable( 
 this,
 new DynamicColorsOptions.Builder() 
 .setContentBasedSource(bitmap) // @ColorRes Intも渡せる 
 .build() 
 );
 
 setContentView(R.layout.xyz); 
 }

12. mixi, Inc. @Override
 public View onCreateView(LayoutInflater layoutInflater, ViewGroup viewGroup, Bundle bundle) {
 
 Context context = DynamicColors.wrapContextIfAvailable(
 requireContext(),
 new DynamicColorsOptions.Builder()
 .setContentBasedSource(sourceColor)
 .build());
 
 return layoutInflater.cloneInContext(context).inflate(R.layout.xyz, viewGroup, false);
 }
 Content-based colorの使い方(Fragment/View)

13. mixi, Inc. Content-based colorの使いどころ
 UIのどこにコンテンツが存在し、コンテンツに基づくカラーが人の体験を向上させることができるかを考えてみま しょう。独立した画面や画面の一部など、明確に定義されたスペースにあるコンポーネントやコンポーネントのク ラスターを探します。これらのコンポーネントが個人のコンテンツと関連している場合、コンテンツベースの色を 継承する効果的な機会がある可能性があります。 

14. mixi, Inc. Androidアプリエンジニア採用してます
 https://team.mitene.us/jobs 

15. mixi, Inc. おわり