Material DesignなDrawerを実装したい

2015/3/12@sakebook

http://github.com/sakebookhttp://sakebook.hatenablog.com

自己紹介酒本伸也

@sakebookAndroid Developer & Lifelogger

JX通信社 Vingow(Android) / NewsDigest(iOS)

Swift

Google Play

真似したい

Project Template

いろいろ違う

よく見たらいろいろある

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

• ハンバーガーがくるっとする

• ToolBarに被らない

Google Photo

<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

<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

• ToolBarに重なる

Google Music

• ToolBarに重なる• StatusBarを暗くする

Fril

<style name=“Theme.Fril" parent="BaseTheme"> <item name=“android:windowTranslucentStatus">true</item> </style>

Fril

StatusBarが透過するv19からなので、styleを分ける

value-v19/styles.xml

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

Fril

Statusbarの色を指定する

…mDrawerLayout = (DrawerLayout)findViewById(R.id.drawer_layout); …mDrawerLayout.setStatusBarBackgroundColor(Color.parseColor("#ff6600"));…

HogeActivity.java

• StatusBarに重なる• Drawerの中身も

StatusBarに描画される

Google Play

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>

<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

}}

<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

<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

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

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 }

• 透過させているのではなく、StatusBarに重なる部分に半透明の色をつけている

Google Play

理解したところで

Drawerだけでもやることいっぱい

http://www.google.com/design/spec/patterns/navigation-drawer.html

ライブラリで楽しよう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

以上

https://github.com/sakebook/android-sample-NavigationDrawerSample