Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

Material Designなdrawerを実装したい

5 037 vues

Publié le

potatotips #15 で話す予定だった内容です。

http://connpass.com/event/12140/

Publié dans : Périphériques & matériel
  • Hey guys! Who wants to chat with me? More photos with me here 👉 http://www.bit.ly/katekoxx
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici

Material Designなdrawerを実装したい

  1. 1. Material Designな Drawerを実装したい 2015/3/12 @sakebook http://github.com/sakebook http://sakebook.hatenablog.com
  2. 2. 自己紹介 酒本伸也 @sakebook Android Developer & Lifelogger
 JX通信社 Vingow(Android) / NewsDigest(iOS) Swift
  3. 3. Google Play
  4. 4. 真似したい
  5. 5. Project Template
  6. 6. いろいろ違う
  7. 7. よく見たらいろいろある
  8. 8. それぞれの実装方法を紹介
  9. 9. • ハンバーガーが
 くるっとする • ToolBarに被らない Google Photo
  10. 10. <style name="BaseTheme" parent="Theme.AppCompat.Light.NoActionBar"> <item name="drawerArrowStyle">@style/ DrawerArrowStyle</item> </style> <style name="DrawerArrowStyle" parent="Widget.AppCompat.DrawerArrowToggle"> <item name="spinBars">true</item> <item name="color">@android:color/white</item> </style> Google Photo spinBarsを回転させるかどうか style.xml
  11. 11. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/parent_layout" android:layout_width="match_parent" android:layout_height="match_parent"> <include android:id="@+id/toolbar" layout="@layout/tool_bar"/> <android.support.v4.widget.DrawerLayout android:id=“@+id/drawer_layout … Google Photo DrawerLayoutに親を作り、その間にToolBar activiy_hoge.xml
  12. 12. • ToolBarに重なる Google Music
  13. 13. • ToolBarに重なる • StatusBarを
 暗くする Fril
  14. 14. <style name=“Theme.Fril" parent="BaseTheme"> <item name=“android:windowTranslucentStatus">true</ item> </style> Fril StatusBarが透過する v19からなので、styleを分ける value-v19/styles.xml
  15. 15. Fril StatusBarを透過した分だけ調節する <android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/drawer_layout" android:fitsSystemWindows="true" android:layout_width="match_parent" android:layout_height="match_parent"> … activity_hoge.xml
  16. 16. Fril Statusbarの色を指定する … mDrawerLayout = (DrawerLayout)findViewById(R.id.drawer_layout); … mDrawerLayout.setStatusBarBackgroundColor(Color.parseColor ("#ff6600")); … HogeActivity.java
  17. 17. • StatusBarに重なる • Drawerの中身も
 StatusBarに
 描画される Google Play
  18. 18. StatusBarの部分の描画を許可する StatusBarの色を無色にする v16からなのでstyleを分ける StatusBarを透過にするのではなく重なる部分を透過に見せている values-v16/styles.xml Google Play <style name="Theme.Mail" parent="BaseTheme"> <item name="android:windowDrawsSystemBarBackgrounds">true</ item> <item name="android:statusBarColor">@android:color/ transparent</item> </style>
  19. 19. <android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/drawer_layout" android:fitsSystemWindows="true" android:layout_width="match_parent" android:layout_height="match_parent"> <LinearLayout android:orientation="vertical" android:id="@+id/container" android:layout_width="match_parent" android:layout_height="match_parent"> <include layout="@layout/tool_bar"/> </LinearLayout> <com.sakebook.android.sample.navigationdrawersample.ui.ScrimInsetsFrameLayout xmlns:app="http://schemas.android.com/apk/res-auto" app:insetForeground="#80000000" android:id="@+id/parent_drawer" android:fitsSystemWindows="true" android:layout_gravity="start" android:layout_width="match_parent" android:layout_height="match_parent"> … </com.sakebook.android.sample.navigationdrawersample.ui.ScrimInsetsFrameLayout> </android.support.v4.widget.DrawerLayout> activity_hoge.xmlGoogle Play } }
  20. 20. <android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/drawer_layout" android:fitsSystemWindows="true" android:layout_width="match_parent" android:layout_height="match_parent"> <LinearLayout android:orientation="vertical" android:id="@+id/container" android:layout_width="match_parent" android:layout_height="match_parent"> <include layout="@layout/tool_bar"/> </LinearLayout> StatusBarが描画可能になった分だけ調節する ToolBarが隠れるのを防ぐ activity_hoge.xmlGoogle Play
  21. 21. <com.sakebook.android.sample.navigationdrawersample.ui.ScrimInsetsFrameLayout xmlns:app="http://schemas.android.com/apk/res-auto" app:insetForeground="#80000000" android:id="@+id/parent_drawer" android:fitsSystemWindows="true" android:layout_gravity="start" android:layout_width="match_parent" android:layout_height="match_parent"> … </com.sakebook.android.sample.navigationdrawersample.ui.ScrimInsetsFrameLayout> </android.support.v4.widget.DrawerLayout> FrameLayoutを拡張したカスタムレイアウト ScrimInsetsFrameLayout (by iosched) activity_hoge.xmlGoogle Play
  22. 22. app:insetForeground を定義する attrs.xml <?xml version="1.0" encoding="utf-8"?> <resources> <declare-styleable name="ScrimInsetsView"> <attr name="insetForeground" format="reference|color" /> </declare-styleable> </resources> Google Play
  23. 23. FrameLayoutを拡張したカスタムレイアウト ScrimInsetsFrameLayout (by iosched) ScrimInsetsFrameLayoutGoogle Play private void init(Context context, AttributeSet attrs, int defStyle) { final TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.ScrimInsetsView, defStyle, 0); if (a == null) { return; } mInsetForeground = a.getDrawable(R.styleable.ScrimInsetsView_insetForeground); a.recycle(); setWillNotDraw(true); } @Override protected boolean fitSystemWindows(Rect insets) { mInsets = new Rect(insets); setWillNotDraw(mInsetForeground == null); ViewCompat.postInvalidateOnAnimation(this); if (mOnInsetsCallback != null) { mOnInsetsCallback.onInsetsChanged(insets); } return true; // consume insets }
  24. 24. • 透過させているの
 ではなく、
 StatusBarに重なる部分に 半透明の色をつけている Google Play
  25. 25. 理解したところで
  26. 26. Drawerだけでもやることいっぱい http://www.google.com/design/spec/patterns/navigation- drawer.html
  27. 27. ライブラリで楽しよう https://github.com/mikepenz/MaterialDrawer https://github.com/neokree/MaterialNavigationDrawer https://github.com/rudsonlive/NavigationDrawer- MaterialDesign https://github.com/kanytu/android-material-drawer- template https://github.com/HeinrichReimer/material-drawer
  28. 28. 以上 https://github.com/sakebook/android-sample- NavigationDrawerSample

×