material designなdrawerを実装したい
TRANSCRIPT
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