Google I/O アプリに学ぶマテリアル・デザインの実装 (2014-10-25)

Transcript

1. Google I/O アプリに学ぶ Material Design の実装 黒川 洋 / @hydrakecat 2014-10-25 第1回オーシャンビュー Android/iOS 勉強会 株式会社 Gunosy
2. Material Design とは 樋口さんの資料 @2014-09-25 Gunosy Material Design 勉強会
3. Android で Material Design Material Design ≠ Android L L 以前の 4.4 や 2.x でも(?) Material Design は実現できる ただし、それを自前で実装するのは大変。L の機能を使え ば簡単に Material Design が実現できる
4. 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
5. 今回の発表について Material Design に関係する Lollipop の新規機能を、Google I/O 2014 アプリのソースコードを見ながら解説します 詳細は、 を参照してください。 Creating Apps with Material Design | Android Developers 1. マテリアル・テーマ (Material Theme) 2. リストとカード（Lists and Cards） 3. 影とクリップ（Shadows and Clipping Views） 4. 画像（Drawables） 5. アニメーション（Animations） 6. 互換性 (Compatibility)
6. 1. マテリアル・テーマ (Material Theme) 2. リストとカード（Lists and Cards） 3. 影とクリップ（Shadows and Clipping Views） 4. 画像（Drawables） 5. アニメーション（Animations） 6. 互換性 (Compatibility)
7. マテリアル・テーマ http://developer.android.com/training/material/theme.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 >
8. ベース・テーマは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
9. status bar の色の指定方法 a n d r o i d : s t a t u s B a r C o l o r で指定可能 デフォルト値は a n d r o i d : c o l o r P r i m a r y D a r k 透明にすることも可能だし、 NavigationBar も透明にできる ただし、NavigationBar だけ透明は不可
10. 1. マテリアル・テーマ (Material Theme) 2. リストとカード（Lists and Cards） 3. 影とクリップ（Shadows and Clipping Views） 4. 画像（Drawables） 5. アニメーション（Animations） 6. 互換性 (Compatibility)
11. リストとカード http://developer.android.com/training/material/lists-cards.html I/O アプリでは RecyclerView も CardWidget も 使っていないようです。残念。:-(
12. 1. マテリアル・テーマ (Material Theme) 2. リストとカード（Lists and Cards） 3. 影とクリップ（Shadows and Clipping Views） 4. アニメーション（Animations） 5. 互換性 (Compatibility)
13. 影とクリップ http://developer.android.com/training/material/shadows-clipping.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 ( ) を使 う。
14. I/O アプリにおける影の使い 方 スクロール量に応じてヘッダやスケジュール追加のボタンに 影の付け方が変わる
15. （参考）コード 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 ) ;
16. View の外形とクリップ View には外形(outline)を指定できる。この外形によって影の 形およびタッチフィードバックの領域が決まる。通常 は、b a c k g r o u n d に指定したd r a w a b l e の形が用いられる が、programmatic に指定することも可能。I/Oアプリでは、 スケジュールの追加ボタンで行っている。 p u b l i c c l a s s A d d T o S c h e d u l e F A B F r a m e L a y o u t e x t e n d s C h e c k a b l e F r a m e L a y o u t { . . . @ O v e r r i d e p r o t e c t e d v o i d o n S i z e C h a n g e d ( i n t w , i n t h , i n t o l d w , i n t o l d h ) { s u p e r . o n S i z e C h a n g e d ( w , h , o l d w , o l d h ) ; O u t l i n e o u t l i n e = n e w O u t l i n e ( ) ; o u t l i n e . s e t O v a l ( 0 , 0 , w , h ) ; s e t O u t l i n e ( o u t l i n e ) ;
17. さらに外形に指定した形に View を切り抜きたい場合は s e t C l i p T o O u t l i n e メソッドを用いる。 p u b l i c c l a s s A d d T o S c h e d u l e F A B F r a m e L a y o u t e x t e n d s C h e c k a b l e F r a m e L a y o u t { . . . @ O v e r r i d e p r o t e c t e d v o i d o n S i z e C h a n g e d ( i n t w , i n t h , i n t o l d w , i n t o l d h ) { s u p e r . o n S i z e C h a n g e d ( w , h , o l d w , o l d h ) ; O u t l i n e o u t l i n e = n e w O u t l i n e ( ) ; o u t l i n e . s e t O v a l ( 0 , 0 , w , h ) ; s e t O u t l i n e ( o u t l i n e ) ; s e t C l i p T o O u t l i n e ( t r u e ) ; ↓
18. 1. マテリアル・テーマ (Material Theme) 2. リストとカード（Lists and Cards） 3. 影とクリップ（Shadows and Clipping Views） 4. 画像（Drawables） 5. アニメーション（Animations） 6. 互換性 (Compatibility)
19. 画像 http://developer.android.com/training/material/drawables.html 画像の着色 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 >
20. 1. マテリアル・テーマ (Material Theme) 2. リストとカード（Lists and Cards） 3. 影とクリップ（Shadows and Clipping Views） 4. 画像（Drawables） 5. アニメーション（Animations） 6. 互換性 (Compatibility)
21. アニメーション http://developer.android.com/training/material/animations.html 1. タッチ・フィードバック (Touch Feedback) 2. 出現エフェクト (Reveal Effect) 3. アクティビティの遷移 (Activity Transition) 4. ビューの状態遷移 (Animating View State Changes) 5. 画像の着色 (Drawable Tinting)
22. タッチ・フィードバック マテリアル・テーマを使っていれば、ボタンには自動的に タッチ・フィードバックが当てられる（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 >
24. 出現エフェクト 円形状のアニメーションで 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 ) ; } } ) ;