DrawerLayout与ToolBar之双宿双飞
来源:互联网 发布:win10深度系统优化 编辑:程序博客网 时间:2024/05/22 09:03
最近因为项目需求需要实现侧滑功能,一开始决定使用SlideMenu的,可是研究Material Design时发现了谷歌自身推出了DrawerLayout,所以决定使用谷歌的东西来实现。
一、侧滑菜单在Toolbar下方情况
首先看下效果图是不是你所需要的,如下图:
1、首先需要添加v7包的依赖
dependencies { ...//其他代码 compile 'com.android.support:appcompat-v7:23.3.0'}
2、创建一个toolbar.xml作为布局文件toolbar继承自View,因此可以像其他标准控件一样直接早主布局文件中添加Toolbar,但是为了提高Toolbar的重用效率,可以在layout中创建一个custom_toolbar.xml代码如下:
<?xml version="1.0" encoding="utf-8"?><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/toolbar" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="?attr/colorPrimary" android:minHeight="?attr/actionBarSize" android:orientation="vertical" app:popupTheme="@style/ThemeOverlay.AppCompat.Light" app:theme="@style/ThemeOverlay.AppCompat.ActionBar"></android.support.v7.widget.Toolbar>
3、创建DrawerLayout布局文件
在主布局中添加drawerlayout和toolbar,代码如下:
<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <include layout="@layout/custom_toolbar"/> <android.support.v4.widget.DrawerLayout android:id="@+id/drawerLayout" android:layout_width="match_parent" android:layout_height="match_parent"> <!-- 内容部分 --> <FrameLayout android:id="@+id/content" android:layout_width="match_parent" android:layout_height="match_parent"/> <!-- 左侧侧滑部分 --> <ListView android:id="@+id/leftListView" android:layout_width="240dp" android:layout_height="match_parent" android:layout_gravity="start" android:background="@color/colorPrimary"/> </android.support.v4.widget.DrawerLayout></LinearLayout>
DrawerLayout标签中有两个子控件,一个是左边侧滑菜单View,一个是主界面。另外需要在左边菜单起始位置设置为android:layout_gravity=”start”。如果你设置了右侧侧滑菜单,也需要添加android:layout_gravity=”end”。
3、你可能对toolbar里面的返回按钮很感兴趣,切换效果特绚。客官、别急,容我来告诉你是个啥。这同样是design里面的一个类ActionBarDrawerToggle。只需要你配置了你就能体验它的炫丽。不了解的直接查看官方文档(请自备梯子)。使用方法我们在代码中为你讲述。这里我们来设置该返回键的样式,谷歌为我们提供了几种样式。
<resources> <style name="AppTheme"parent="Theme.AppCompat.Light.NoActionBar"> <item name="colorPrimary">@color/colorPrimary</item> <item name="colorPrimaryDark">@color/colorPrimaryDark</item> <item name="colorAccent">@color/colorAccent</item> <item name="android:textColorPrimary">@android:color/white</item> <!-- 返回键样式 --> <item name="drawerArrowStyle">@style/AppTheme.DrawerArrowToggle</item> </style> <style name="AppTheme.DrawerArrowToggle" parent="Base.Widget.AppCompat.DrawerArrowToggle"> <item name="color">@android:color/white</item> </style></resources>
4、源代码
public class MainActivity extends AppCompatActivity { @Bind(R.id.content) FrameLayout mContent; @Bind(R.id.leftListView) ListView mLeftListView; @Bind(R.id.drawerLayout) DrawerLayout mDrawerLayout; @Bind(R.id.toolbar) Toolbar mToolbar; private ActionBarDrawerToggle mDrawerToggle; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); ButterKnife.bind(this); mToolbar.setTitle("测试"); setSupportActionBar(mToolbar); getSupportActionBar().setHomeButtonEnabled(true); //设置返回键可用 getSupportActionBar().setDisplayHomeAsUpEnabled(true); //创建返回键,并实现打开关/闭监听 mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, mToolbar, R.string.open, R.string.close){ @Override public void onDrawerOpened(View drawerView) { super.onDrawerOpened(drawerView); } @Override public void onDrawerClosed(View drawerView) { super.onDrawerClosed(drawerView); } }; mDrawerToggle.syncState(); //将DrawerLayout与DrawerToggle绑定 mDrawerLayout.addDrawerListener(mDrawerToggle); mDrawerLayout.setScrimColor(Color.TRANSPARENT); //去除侧边阴影 String[] aee = {"测试1", "测试2"}; ArrayAdapter arrayAdapter = new ArrayAdapter(this, android.R.layout.simple_list_item_1, aee); mLeftListView.setAdapter(arrayAdapter); }}
代码中我添加了setScrimColor方法,这个方法是修改侧滑菜单滑出时背景颜色。
二、侧滑菜单遮盖Toolbar情况
效果图如下:
侧滑菜单遮盖toolbar。其实只需要修改主布局文件就可以实现。drawerlayout作为根布局标签就OK,代码如下:
<?xml version="1.0" encoding="utf-8"?><android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/drawerLayout" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <!--内容+toolbar--> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <include layout="@layout/custom_toolbar"/> <!-- 内容部分 --> <FrameLayout android:id="@+id/content" android:layout_width="match_parent" android:layout_height="match_parent"/> </LinearLayout> <!-- 左侧侧滑部分 --> <ListView android:id="@+id/leftListView" android:layout_width="240dp" android:layout_height="match_parent" android:layout_gravity="start" android:background="@color/colorPrimary" android:clickable="true"/></android.support.v4.widget.DrawerLayout>
注意:在侧滑布局上必须要加上android:clickable=”true”,不然侧滑菜单将无法使用。
如有问题欢迎留言。
源码下载
- DrawerLayout与ToolBar之双宿双飞
- NavigationView与Drawerlayout之双宿双飞
- Android5.0 之 ToolBar与DrawerLayout配合使用
- Android开发之DrawerLayout与ToolBar之间不得不说的秘密
- Toolbar与抽屉菜单DrawerLayout
- DrawerLayout,Toolbar
- DrawerLayout + Toolbar
- ToolBar + DrawerLayout
- Drawerlayout Toolbar
- Toolbar+DrawerLayout
- DrawerLayout+ToolBar
- 仿知乎程序(一)DrawerLayout与Toolbar
- DrawerLayout的学习(与ToolBar结合)
- 仿知乎程序(一)DrawerLayout与Toolbar
- Material Design学习笔记之Toolbar+DrawerLayout
- Android控件之Toolbar + DrawerLayout的使用
- Material Design-UI之Toolbar+DrawerLayout
- 【菜鸟学安卓】- DrawerLayout + Toolbar 与主题theme 颜色设置
- 【数字图像处理学习笔记之六】基本灰度级形态学算法
- Bootstrap之网站导航栏制作
- x264 android移植
- 深度学习入门:Supervised Hashing for Image Retrieval via Image Representation Learning
- 避免进入页面EditText自动弹出软键盘
- DrawerLayout与ToolBar之双宿双飞
- 消息队列设计精要
- 转boolean时,值为假的情况
- myBaties的级联查询
- Java面向对象
- qt中的各种workaround
- myBaties的级联查询
- ACM中的博弈论入门(一)POJ 2425 针对SG函数的理解
- ucosii 消息队列的应用