potatotips #15 で話す予定だった内容です。 http://connpass.com/event/12140/

1. Material Designな
Drawerを実装したい
2015/3/12
@sakebook
http://github.com/sakebook
http://sakebook.hatenablog.com

2. 自己紹介
酒本伸也
@sakebook
Android Developer & Lifelogger
JX通信社 Vingow(Android) / NewsDigest(iOS)
Swift

3. Google Play

4. 真似したい

5. Project
Template

6. いろいろ違う

7. よく見たらいろいろある

8. それぞれの実装方法を紹介

9. • ハンバーガーが
くるっとする
• ToolBarに被らない
Google Photo

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. <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. • ToolBarに重なる
Google Music

13. • ToolBarに重なる
• StatusBarを
暗くする
Fril

14. <style name=“Theme.Fril" parent="BaseTheme">
<item name=“android:windowTranslucentStatus">true</
item>
</style>
Fril
StatusBarが透過する
v19からなので、styleを分ける
value-v19/styles.xml

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. Fril
Statusbarの色を指定する
…
mDrawerLayout =
(DrawerLayout)findViewById(R.id.drawer_layout);
…
mDrawerLayout.setStatusBarBackgroundColor(Color.parseColor
("#ff6600"));
…
HogeActivity.java

17. • StatusBarに重なる
• Drawerの中身も
StatusBarに
描画される
Google Play

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. <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. <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. <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. 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. 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. • 透過させているの
ではなく、
StatusBarに重なる部分に
半透明の色をつけている
Google Play

25. 理解したところで

26. Drawerだけでもやることいっぱい
http://www.google.com/design/spec/patterns/navigation-
drawer.html

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. 以上
https://github.com/sakebook/android-sample-
NavigationDrawerSample