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

Transcript

1. Google I/O 2023での
   Material Designまわりの話
   @punchdrunker
   

   View Slide

2. mixi, Inc.
   What’s new in Material Design

   https://io.google/2023/program/630ffaa3-9b3d-4e30-a89f-91ef3e8052cf/intl/ja/ 

   

   View Slide

3. mixi, Inc.
   Materilal DesignとかMaterial Youとか

   - Material Design

   - 2014に発表されたデザインフレームワーク(Lollipopのプレビューが出た頃!!)

   - 画面に配置する部品の設計方針などをまとめたガイドライン

   - ガイドラインに従った実装をサポートするライブラリ群

   - 今は最新バージョンのMaterial 3とか M3とか呼ぶ事が多そう

   - Material You

   - Google I/O 2021で発表された

   - Material Desingの枠の中でユーザーに提供されるイイカンジの機能の総称

   - アプリアイコンの形を設定で変えられる

   - 色の具合を設定で変えられる

   - 壁紙をイイカンジに変えられる

   

   View Slide

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には入っていない

   

   

   View Slide

5. mixi, Inc.
   

   View Slide

6. mixi, Inc.
   

   View Slide

7. mixi, Inc.
   What’s new in Material Designで気になったトピック

   - Carousel

   - RecyclerView用の LayoutManager が追加された

   - Dynamic Color - Content-based color 

   - これまで壁紙に合わせたColorScheme(色のセット)はあったが、画像リソースや単色を指定して、ColorSchemeを作っ
   てくれる

   

   View Slide

8. mixi, Inc.
   Carousel

   現状はMDCの方でしか実装されていないがComposeでも開発は進んでいる。
   

   カタログアプリで実装されている。
   

   https://github.com/material-components/material-components-android
   

   

   - RecyclerViewのLayoutManagerとしてCarouselLayoutManagerが追加
   

   - CarouselLayoutManagerにStrategyを渡して見せ型調整
   

   - MultiBrowseCarouselStrategy 

   - なるべく多くのセルを表示 

   - HeroCarouselStrategy 

   - 1つ1つを強調して表示 

   

   View Slide

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)
   

   

   View Slide

10. mixi, Inc.
    5 Key colors

    

    View Slide

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); 

    }

    

    View Slide

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)

    

    View Slide

13. mixi, Inc.
    Content-based colorの使いどころ

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

    

    View Slide

14. mixi, Inc.
    Androidアプリエンジニア採用してます

    https://team.mitene.us/jobs 

    

    View Slide

15. mixi, Inc.
    おわり

    

    View Slide