一、关于侧滑菜单
以前做过的侧滑菜单就是通过第三方,slidingmenu可以是实现类似于QQ的侧滑效果,但是还是有些bug没修复好,Material Design提供的toolbar与drawerlayout相结合便有了动画效果比较好的菜单按钮动画,加上Material Design提供的图片,使得界面有了很大的提升,我们来看看如何实现这样的效果
二、toolbar的简单使用
使用include让布局看起来简洁
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent"> <!--Toolbar--> <include layout="@layout/custom_toolbar" /> <!--DrawerLayout--> <include layout="@layout/custom_drawerlayout" /> </LinearLayout>
toolbar的布局设置
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/tl_custom" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="?attr/colorPrimary" android:minHeight="?attr/actionBarSize" app:popupTheme="@style/ToolbarPopupTheme"> </android.support.v7.widget.Toolbar>
toolbar的主题设置popupTheme,避免点击菜单时弹出的pop window遮挡住菜单而自己定义样式
<style name="ToolbarPopupTheme" parent="@style/ThemeOverlay.AppCompat.Dark"> <!--<item name="android:colorBackground">#000000</item> 也可以设置背景色以及menu中的其他属性--> <item name="actionOverflowMenuStyle">@style/OverflowMenuStyle</item> </style> <style name="OverflowMenuStyle" parent="Widget.AppCompat.Light.PopupMenu.Overflow"> <item name="overlapAnchor">false</item> <!--设置不覆盖锚点--> </style>
drawerLayout的布局设置
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/dl_left" android:layout_width="match_parent" android:layout_height="match_parent"> <!--主布局--> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent"> <include layout="@layout/activity_threelist"/> </LinearLayout> <!--侧滑菜单--> <LinearLayout android:layout_width="200dp" android:layout_height="match_parent" android:background="@color/color_drawder" android:layout_gravity="start" android:orientation="vertical"> <RelativeLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:padding="10dp" android:gravity="center_vertical">
这里的侧滑菜单中设置了一个属性gravity为start,表示这里设置为抽屉可以侧滑,下面的就没有贴出来,因为是自己填充的布局,没有必要了。主页的布局即是include中的布局。下面来看看代码中的设置:
private void initToolData() { toolbar.setTitle("点检");//设置标题 toolbar.setTitleTextColor(Color.parseColor("#ffffff"));//设置标题颜色 setSupportActionBar(toolbar); getSupportActionBar().setHomeButtonEnabled(true);//设置返回键可用 getSupportActionBar().setDisplayHomeAsUpEnabled(true); toolbar.setOnMenuItemClickListener(menuClickListener); //创建返回键,并实现打开关/闭监听 mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, toolbar, R.string.app_name, R.string.app_name) { @Override public void onDrawerOpened(View drawerView) { super.onDrawerOpened(drawerView); } @Override public void onDrawerClosed(View drawerView) { super.onDrawerClosed(drawerView); } }; mDrawerToggle.syncState(); mDrawerLayout.setDrawerListener(mDrawerToggle); }
最后antionBarDrawerToggle必须写,用于绑定toolbar和抽屉布局,这样就大致实现了侧滑菜单的效果和toolbar的菜单动画。最后忘了附上menu的菜单布局
/** * 这里将toolbar里面的菜单键显示出来 * @param menu * @return */ @Override public boolean onCreateOptionsMenu(Menu menu) { MenuInflater inflater = getMenuInflater(); inflater.inflate(R.menu.toolbar_menu,menu); return super.onCreateOptionsMenu(menu); }
设置如下:
<menu xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto"> <item android:id="@+id/action_search" android:icon="@mipmap/ic_readcard" android:title="@string/menu_search" app:showAsAction="ifRoom" /> <item android:id="@+id/action_notification" android:icon="@mipmap/ic_input" android:title="@string/menu_notifications" app:showAsAction="ifRoom" /> <item android:id="@+id/action_item1" android:title="关于" app:showAsAction="never" /> <item android:id="@+id/action_item2" android:title="设置" app:showAsAction="never" /> </menu>