Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Material Designなdrawerを実装したい

4,628 views

Published on

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

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

Published in: Devices & Hardware
  • Hey guys! Who wants to chat with me? More photos with me here 👉 http://www.bit.ly/katekoxx
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

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

×