material designなdrawerを実装したい
TRANSCRIPT
![Page 1: Material Designなdrawerを実装したい](https://reader033.vdocuments.site/reader033/viewer/2022051414/55a511291a28ab3d2d8b462e/html5/thumbnails/1.jpg)
Material DesignなDrawerを実装したい
2015/3/12@sakebook
http://github.com/sakebookhttp://sakebook.hatenablog.com
![Page 2: Material Designなdrawerを実装したい](https://reader033.vdocuments.site/reader033/viewer/2022051414/55a511291a28ab3d2d8b462e/html5/thumbnails/2.jpg)
自己紹介酒本伸也
@sakebookAndroid Developer & Lifelogger
JX通信社 Vingow(Android) / NewsDigest(iOS)
Swift
![Page 3: Material Designなdrawerを実装したい](https://reader033.vdocuments.site/reader033/viewer/2022051414/55a511291a28ab3d2d8b462e/html5/thumbnails/3.jpg)
Google Play
![Page 4: Material Designなdrawerを実装したい](https://reader033.vdocuments.site/reader033/viewer/2022051414/55a511291a28ab3d2d8b462e/html5/thumbnails/4.jpg)
真似したい
![Page 5: Material Designなdrawerを実装したい](https://reader033.vdocuments.site/reader033/viewer/2022051414/55a511291a28ab3d2d8b462e/html5/thumbnails/5.jpg)
Project Template
![Page 6: Material Designなdrawerを実装したい](https://reader033.vdocuments.site/reader033/viewer/2022051414/55a511291a28ab3d2d8b462e/html5/thumbnails/6.jpg)
いろいろ違う
![Page 7: Material Designなdrawerを実装したい](https://reader033.vdocuments.site/reader033/viewer/2022051414/55a511291a28ab3d2d8b462e/html5/thumbnails/7.jpg)
よく見たらいろいろある
![Page 8: Material Designなdrawerを実装したい](https://reader033.vdocuments.site/reader033/viewer/2022051414/55a511291a28ab3d2d8b462e/html5/thumbnails/8.jpg)
それぞれの実装方法を紹介
![Page 9: Material Designなdrawerを実装したい](https://reader033.vdocuments.site/reader033/viewer/2022051414/55a511291a28ab3d2d8b462e/html5/thumbnails/9.jpg)
• ハンバーガーがくるっとする
• ToolBarに被らない
Google Photo
![Page 10: Material Designなdrawerを実装したい](https://reader033.vdocuments.site/reader033/viewer/2022051414/55a511291a28ab3d2d8b462e/html5/thumbnails/10.jpg)
<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
![Page 11: Material Designなdrawerを実装したい](https://reader033.vdocuments.site/reader033/viewer/2022051414/55a511291a28ab3d2d8b462e/html5/thumbnails/11.jpg)
<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
![Page 12: Material Designなdrawerを実装したい](https://reader033.vdocuments.site/reader033/viewer/2022051414/55a511291a28ab3d2d8b462e/html5/thumbnails/12.jpg)
• ToolBarに重なる
Google Music
![Page 13: Material Designなdrawerを実装したい](https://reader033.vdocuments.site/reader033/viewer/2022051414/55a511291a28ab3d2d8b462e/html5/thumbnails/13.jpg)
• ToolBarに重なる• StatusBarを暗くする
Fril
![Page 14: Material Designなdrawerを実装したい](https://reader033.vdocuments.site/reader033/viewer/2022051414/55a511291a28ab3d2d8b462e/html5/thumbnails/14.jpg)
<style name=“Theme.Fril" parent="BaseTheme"> <item name=“android:windowTranslucentStatus">true</item> </style>
Fril
StatusBarが透過するv19からなので、styleを分ける
value-v19/styles.xml
![Page 15: Material Designなdrawerを実装したい](https://reader033.vdocuments.site/reader033/viewer/2022051414/55a511291a28ab3d2d8b462e/html5/thumbnails/15.jpg)
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
![Page 16: Material Designなdrawerを実装したい](https://reader033.vdocuments.site/reader033/viewer/2022051414/55a511291a28ab3d2d8b462e/html5/thumbnails/16.jpg)
Fril
Statusbarの色を指定する
…mDrawerLayout = (DrawerLayout)findViewById(R.id.drawer_layout); …mDrawerLayout.setStatusBarBackgroundColor(Color.parseColor("#ff6600"));…
HogeActivity.java
![Page 17: Material Designなdrawerを実装したい](https://reader033.vdocuments.site/reader033/viewer/2022051414/55a511291a28ab3d2d8b462e/html5/thumbnails/17.jpg)
• StatusBarに重なる• Drawerの中身も
StatusBarに描画される
Google Play
![Page 18: Material Designなdrawerを実装したい](https://reader033.vdocuments.site/reader033/viewer/2022051414/55a511291a28ab3d2d8b462e/html5/thumbnails/18.jpg)
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>
![Page 19: Material Designなdrawerを実装したい](https://reader033.vdocuments.site/reader033/viewer/2022051414/55a511291a28ab3d2d8b462e/html5/thumbnails/19.jpg)
<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
}}
![Page 20: Material Designなdrawerを実装したい](https://reader033.vdocuments.site/reader033/viewer/2022051414/55a511291a28ab3d2d8b462e/html5/thumbnails/20.jpg)
<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
![Page 21: Material Designなdrawerを実装したい](https://reader033.vdocuments.site/reader033/viewer/2022051414/55a511291a28ab3d2d8b462e/html5/thumbnails/21.jpg)
<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
![Page 22: Material Designなdrawerを実装したい](https://reader033.vdocuments.site/reader033/viewer/2022051414/55a511291a28ab3d2d8b462e/html5/thumbnails/22.jpg)
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
![Page 23: Material Designなdrawerを実装したい](https://reader033.vdocuments.site/reader033/viewer/2022051414/55a511291a28ab3d2d8b462e/html5/thumbnails/23.jpg)
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 }
![Page 24: Material Designなdrawerを実装したい](https://reader033.vdocuments.site/reader033/viewer/2022051414/55a511291a28ab3d2d8b462e/html5/thumbnails/24.jpg)
• 透過させているのではなく、StatusBarに重なる部分に半透明の色をつけている
Google Play
![Page 25: Material Designなdrawerを実装したい](https://reader033.vdocuments.site/reader033/viewer/2022051414/55a511291a28ab3d2d8b462e/html5/thumbnails/25.jpg)
理解したところで
![Page 26: Material Designなdrawerを実装したい](https://reader033.vdocuments.site/reader033/viewer/2022051414/55a511291a28ab3d2d8b462e/html5/thumbnails/26.jpg)
Drawerだけでもやることいっぱい
http://www.google.com/design/spec/patterns/navigation-drawer.html
![Page 27: Material Designなdrawerを実装したい](https://reader033.vdocuments.site/reader033/viewer/2022051414/55a511291a28ab3d2d8b462e/html5/thumbnails/27.jpg)
ライブラリで楽しよう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
![Page 28: Material Designなdrawerを実装したい](https://reader033.vdocuments.site/reader033/viewer/2022051414/55a511291a28ab3d2d8b462e/html5/thumbnails/28.jpg)
以上
https://github.com/sakebook/android-sample-NavigationDrawerSample