Google I/O アプリに学ぶマテリアル・デザインの実装

Transcript

1. Google I/O アプリに学ぶ Material Design の実装 Hiroshi Kurokawa / @hydrakecat 2014-09-25 Material Design 勉強会
2. Android で Material Design Material Design ≠ Android L L 以前の 4.4 や 2.x でも(?) Material Design は実現できる ただし、それを自前で実装するのは大変。L の機能を使え ば簡単に Material Design が実現できる
3. Google I/O 2014 アプリ https://github.com/google/iosched 2014年の Google I/O イベント用アプリ セッションを選択して自分のスケジュールを組んだり、他 の来場者とコミュニケーションできた（らしい） 2014-07-30 にソースコードが公開 後に、Android L Preview に対応 http://googledevjp.blogspot.jp/2014/07/google-io-2014_31.html http://googledevjp.blogspot.jp/2014/08/io-2014.html https://github.com/google/iosched/raw/master/binaries/iosched- lpreview.apk
4. 今回の発表について Google I/O 2014 アプリのソースコードのうち、Material Design に関係する L Preview の新規機能を中心に解説します Wear 連携や、その他のベストプラクティスなどの興味深い 話題は泣く泣く割愛します 1. マテリアル・テーマ (Material Theme) 2. UI ウィジェット（UI Widgets） 3. ビューと影（Views and Shadows） 4. アニメーション（Animations） 5. 互換性 (Compatibility)
5. 1. マテリアル・テーマ (Material Theme) 2. UI ウィジェット（UI Widgets） 3. ビューと影（Views and Shadows） 4. アニメーション（Animations）
6. マテリアル・テーマ http://developer.android.com/preview/material/index.html マテリアル・テーマを使うと、タッチ・フィードバックなど デフォルトのデザインを利用できる。 カラーパレットの各色を指定する ことで、簡単にテーマをカスタマ イズできる Status Bar および Navigation Bar の 色も変更できる < s t y l e n a m e = " F r a m e w o r k R o o t . T h e m e " p a r e n t = " a n d r o i d : T h e m e . M a t e r i a l . L i g h t . D a r k A c t i o n B a r " / > < s t y l e n a m e = " T h e m e . I O S c h e d " p a r e n t = " T h e m e . I O S c h e d . B a s e " > < i t e m n a m e = " a n d r o i d : c o l o r P r i m a r y " > @ c o l o r / t h e m e _ p r i m a r y < / i t e m > < i t e m n a m e = " a n d r o i d : c o l o r P r i m a r y D a r k " > @ c o l o r / t h e m e _ p r i m a r y _ d a r k < / i t e m > < i t e m n a m e = " a n d r o i d : c o l o r A c c e n t " > @ c o l o r / t h e m e _ a c c e n t _ 2 < / i t e m >
7. ベース・テーマは3種用意されている。 I/O アプリは DarkActionBar をカスタマイズしている。 @ a n d r o i d : s t y l e / T h e m e . M a t e r i a l ( d a r k v e r s i o n ) @ a n d r o i d : s t y l e / T h e m e . M a t e r i a l . L i g h t ( l i g h t v e r s i o n ) @ a n d r o i d : s t y l e / T h e m e . M a t e r i a l . L i g h t . D a r k A c t i o n B a r
8. 1. マテリアル・テーマ (Material Theme) 2. UI ウィジェット（UI Widgets） 3. ビューと影（Views and Shadows） 4. アニメーション（Animations）
9. UI ウィジェット http://developer.android.com/preview/material/ui-widgets.html I/O アプリでは RecyclerView も CardWidget も 使っていないようです。残念。:-(
10. 1. マテリアル・テーマ (Material Theme) 2. UI ウィジェット（UI Widgets） 3. ビューと影（Views and Shadows） 4. アニメーション（Animations）
11. ビューと影 http://developer.android.com/preview/material/views-shadows.html L では各ビューの z 軸方向の位置を指定できる z 軸方向に高い位置にある View には大きな影がつく 影が描かれるのは、z = 0 の平面のみ z 値は Z = e l e v a t i o n + t r a n s l a t i o n Z で計算され る 各 View の z 軸方向の固定位置(elevation)は a n d r o i d : e l e v a t i o n 属性で指定できる 動的に指定するときは V i e w # s e t E l e v a t i o n ( ) を使 う。
12. I/O アプリでの使い方 スクロール量に応じてヘッダやスケジュール追加のボタンに 影の付け方が変わる
13. （参考）コード L P r e v i e w U t i l s B a s e l p u = a c t i v i t y . g e t L P r e v i e w U t i l s ( ) ; . . . / / F i l l t h e g a p b e t w e e n s t a t u s b a r a n d h e a d e r b a r w i t h c o l o r f l o a t g a p F i l l P r o g r e s s = M a t h . m i n ( M a t h . m a x ( U I U t i l s . g e t P r o g r e s s ( s c r o l l Y , m P h o t o H e i g h t P i x e l s - m H e a d e r T o p C l e a r a n c e * 2 , m P h o t o H e i g h t P i x e l s - m H e a d e r T o p C l e a r a n c e ) , 0 ) , 1 ) ; l p u . s e t V i e w E l e v a t i o n ( m H e a d e r B a c k g r o u n d B o x , g a p F i l l P r o g r e s s * m M a x H e a d e r E l e v a t i o n ) ; l p u . s e t V i e w E l e v a t i o n ( m H e a d e r C o n t e n t B o x , g a p F i l l P r o g r e s s * m M a x H e a d e r E l e v a t i o n + 0 . 1 f ) ; l p u . s e t V i e w E l e v a t i o n ( m A d d S c h e d u l e B u t t o n , g a p F i l l P r o g r e s s * m M a x H e a d e r E l e v a t i o n + m F A B E l e v a t i o n ) ;
14. 1. マテリアル・テーマ (Material Theme) 2. UI ウィジェット（UI Widgets） 3. ビューと影（Views and Shadows） 4. アニメーション（Animations）
15. アニメーション http://developer.android.com/preview/material/animations.html 1. タッチ・フィードバック (Touch Feedback) 2. 出現エフェクト (Reveal Effect) 3. アクティビティの遷移 (Activity Transition) 4. ビューの状態遷移 (Animating View State Changes) 5. 画像の着色 (Drawable Tinting)
16. タッチ・フィードバック マテリアル・テーマを使っていれば、ボタンには自動的に タッチ・フィードバックが当てられる（Ripple と呼ばれる 波紋状のエフェクト） ripple 要素を使えば、同様のタッチ・フィードバックを持 った drawable が作れる I/O アプリでは、セッションの写真やスケジュール追加ボ タンの背景のタッチ・フィードバックをこれで実現してい る。 < r i p p l e x m l n s : a n d r o i d = " h t t p : / / s c h e m a s . a n d r o i d . c o m / a p k / r e s / a n d r o i d " a n d r o i d : c o l o r = " @ c o l o r / < i t e m > < s h a p e > < s o l i d a n d r o i d : c o l o r = " @ c o l o r / t h e m e _ a c c e n t _ 1 " / > < / s h a p e > < / i t e m > < / r i p p l e >
17. 出現エフェクト 円形状のアニメーションで View を出現させることができ る。現在は、円形のみの模様。 I/O アプリでは、スケジュールの追加ボタンをタップした ときのアニメーションに使用。 / / ユーザーがタップした場所を中心に、同心円状のアニメーションと共にビューを切り替える / / m H o t S p o t X と m H o t S p o t Y はユーザーがタップした場所 V a l u e A n i m a t o r a n i m a t o r = V i e w A n i m a t i o n U t i l s . c r e a t e C i r c u l a r R e v e a l ( m R e v e a l V i e w , ( i n t ) m H o a n i m a t o r . a d d L i s t e n e r ( n e w A n i m a t o r L i s t e n e r A d a p t e r ( ) { @ O v e r r i d e p u b l i c v o i d o n A n i m a t i o n E n d ( A n i m a t o r a n i m a t i o n ) { s e t C h e c k e d ( m C h e c k e d , f a l s e ) ; } } ) ;
18. アクティビティの遷移 以下のそれぞれについてアニメーションを設定できる Activity に入る時の Activity Activity から出る時の Activity Activity 間で共有されている View
19. 共有 View の アニメーション設定手順 1. a n d r o i d : w i n d o w C o n t e n t T r a n s i t i o n s をt r u e にする 2. 共有 View のアニメーションを設定する 3. 遷移アニメーション（e.g. m o v e _ i m a g e ）を XML で定義する 4. layout ファイルで、共有するViewのa n d r o i d : v i e w N a m e に 同じ名前（e.g. r o b o t ）を指定する 5. A c t i v i t y O p t i o n s . m a k e S c e n e T r a n s i t i o n A n i m a t i o n を 使ってs t a r t A c t i v i t y を呼ぶ < ! - - s p e c i f y s h a r e d e l e m e n t t r a n s i t i o n s - - > < i t e m n a m e = " a n d r o i d : w i n d o w S h a r e d E l e m e n t E n t e r T r a n s i t i o n " > @ t r a n s i t i o n / m o v e _ i m a g e < / i t e m > < i t e m n a m e = " a n d r o i d : w i n d o w S h a r e d E l e m e n t E x i t T r a n s i t i o n " > @ t r a n s i t i o n / m o v e _ i m a g e < / i t e m > A c t i v i t y O p t i o n s o p t i o n s = A c t i v i t y O p t i o n s . m a k e S c e n e T r a n s i t i o n A n i m a t i o n ( t h i s , a n d r o i d R o b o t V i e w , " r o b o t " ) ; s t a r t A c t i v i t y ( i n t e n t , o p t i o n s . t o B u n d l e ( ) ) ;
20. ビューの状態遷移 状態が変わったときの見た目だけでなく、そのときのアニ メーションも指定できる View のプロパティをどれくらいの時間でどう変化させる か指定できる I/O アプリでは、スケジュール追加ボタンが押されたとき にボタンがちょっと浮くアニメーションに使っている < i t e m a n d r o i d : s t a t e _ e n a b l e d = " t r u e " a n d r o i d : s t a t e _ p r e s s e d = " t r u e " > < s e t > < o b j e c t A n i m a t o r a n d r o i d : d u r a t i o n = " @ a n d r o i d : i n t e g e r / c o n f i g _ s h o r t A n i m T i m e " a n d r o i d : a n d r o i d : v a l u e T o = " @ d i m e n / f a b _ p r e s s _ t r a n s l a t i o n _ z " / > < / s e t > < / i t e m > < i t e m > < s e t > < o b j e c t A n i m a t o r a n d r o i d : d u r a t i o n = " @ a n d r o i d : i n t e g e r / c o n f i g _ s h o r t A n i m T i m e " a n d r o i d : a n d r o i d : v a l u e T o = " 0 " / > < / s e t > < / i t e m >
21. 実は、これは動いていない! a n d r o i d : v a l u e F r o m を指定すれば、動く < i t e m a n d r o i d : s t a t e _ e n a b l e d = " t r u e " a n d r o i d : s t a t e _ p r e s s e d = " t r u e " > < s e t > < o b j e c t A n i m a t o r a n d r o i d : d u r a t i o n = " @ a n d r o i d : i n t e g e r / c o n f i g _ s h o r t A n i m T i m e " a n d r o i d : a n d r o i d : v a l u e F r o m = " 0 " a n d r o i d : v a l u e T o = " @ d i m e n / f a b _ p r e s s _ t r a n s l a t i < / s e t > < / i t e m > < i t e m > < s e t > < o b j e c t A n i m a t o r a n d r o i d : d u r a t i o n = " @ a n d r o i d : i n t e g e r / c o n f i g _ s h o r t A n i m T i m e " a n d r o i d : a n d r o i d : v a l u e F r o m = " @ d i m e n / f a b _ p r e s s _ t r a n s l a t i o n _ z " a n d r o i d : v a l u e T < / s e t > < / i t e m > （ より） Note: There is a known issue in the L Developer Preview release that requires valueFrom values to be provided in StateListAnimator animations to get the correct behavior. http://developer.android.com/preview/material/animations.html#viewstate
22. 画像の着色 a n d r o i d : t i n t プロパティで画像の着色ができる I/Oアプリでは、スケジュール追加ボタンに使用している img/ic_plus_anim_030.png 着色した結果 < t r a n s i t i o n a n d r o i d : f r o m i d = " @ + i d / s t a t e _ o n " a n d r o i d : t o i d = " @ + i d / s t a t e _ o f f " > < a n i m a t i o n - l i s t > < i t e m a n d r o i d : d u r a t i o n = " 1 6 " > < b i t m a p a n d r o i d : s r c = " @ d r a w a b l e / i c _ p l u s _ a n i m _ 0 0 0 " a n d r o i d : t i n t = " # f f f " > < / b i t m a p > < / i t e m > . . . < / a n i m a t i o n - l i s t > < / t r a n s i t i o n >
23. 互換性 http://developer.android.com/preview/material/compatibility.html I/O アプリは、L 以前の端末でも同様の UI を提供している。 どうやっているのか？ 1. ソースコードの切り替え gradle の falvor を使って切り替えている 2. リソースファイルの切り替え / r e s / x x x - v 2 1 というフォルダを用意すると自動で切り替 わる
24. flavor の切り替え l p r e v i e w プロパティが指定されている と、/ a n d r o i d / s r c / l p r e v i e w 以下のソースコードが組込ま れる l p r e v i e w = h a s P r o p e r t y ( ' l p r e v i e w ' ) . . . a n d r o i d { c o m p i l e S d k V e r s i o n l p r e v i e w ? " a n d r o i d - L " : 1 9 b u i l d T o o l s V e r s i o n " 2 0 . 0 . 0 " p r o d u c t F l a v o r s { l p r e v i e w ? l p r e v i e w { } : c l a s s i c { } } これによって、L P r e v i e w U t i l s の実装を L P r e v i e w U t i l s B a s e （通常版）と L P r e v i e w U t i l s I m p l （L Preview版）で切り替えている。
25. リソースの切り替え