Android: DrawerLayout 侧滑菜单栏
DrawerLayout是SupportLibrary包中实现的侧滑菜单效果的控件。
分为主内容区域和侧边菜单区域
drawerLayout本身就支持:侧边菜单根据手势展开与隐藏,
开发者只需要实现:主内容区的内容和菜单的点击变化即可。
API:https://developer.android.com/reference/android/support/v4/widget/DrawerLayout.html
1. DrawerLayout本身就是一个顶级容器,只需要按照规定的布局方式写布局就会有侧滑效果:
规定:
- DrawerLayout要包括两个子视图,分别为主内容区布局和侧滑菜单布局,并且主内容区布局要放到侧滑菜单布局的前面;
- 主内容布局需要设置宽高为match_parent,且不能设置layout_gravity;
- 侧滑菜单布局一般高度为match_parent,宽度为固定值;
- 侧滑菜单布局需要设置layout_gravity属性,start表示左边,end表示右边,不设置时会默认显示且不能滑动;
- 侧滑菜单布局(drawer)只能有一个,多于一个会报错;
- 主内容布局和侧滑菜单布局,使用何种样式的布局没有强制限制。
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<?xml version="1.0" encoding="utf-8"?> <android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/palyer_drawer_layout" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true" tools:context=".PlayerActivity" > <RelativeLayout android:layout_width="match_parent" android:layout_height="match_parent"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="200dp" android:layout_marginLeft="200dp" android:text="这是主区域"/> </RelativeLayout> <LinearLayout android:orientation="vertical" android:layout_width="200dp" android:layout_gravity="start" android:layout_height="match_parent" android:background="#ff00B8D4"> <TextView android:layout_width="match_parent" android:layout_height="50dp" android:text="这是菜单栏"/> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="菜单一"/> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="菜单二"/> </LinearLayout> </android.support.v4.widget.DrawerLayout>
2. DrawerLayout.DrawerListener可以监听drawer的状态变化和运动过程
只想继承某个或者某些方法,使用DrawerLayout.SimpleDrawerListener,这是DrawerListener接口的简单实现;
注意:要避免执行昂贵的动画,必须要做动画可以在STATE_IDLE状态时执行;
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
package com.media.customplayer; import android.support.v4.widget.DrawerLayout; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.util.Log; import android.view.View; public class PlayerActivity extends AppCompatActivity { private final String TAG = "PlayerActivity"; private DrawerLayout mPlayerDrawer; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_player); mPlayerDrawer = (DrawerLayout) findViewById(R.id.palyer_drawer_layout); mPlayerDrawer.addDrawerListener(new DrawerLayout.DrawerListener() { @Override public void onDrawerSlide(View drawerView, float slideOffset) { Log.v(TAG, "onDrawerSlide: slideOffset = " + slideOffset); } @Override public void onDrawerOpened(View drawerView) { Log.v(TAG, "onDrawerOpened"); } @Override public void onDrawerClosed(View drawerView) { Log.v(TAG, "onDrawerClosed"); } @Override public void onDrawerStateChanged(int newState) { Log.v(TAG, "onDrawerStateChanged: newState = " + newState); } }); } }
一次展示和隐藏的日志如下:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
07-10 09:57:20.336 27804-27804/com.media.customplayer V/PlayerActivity: onDrawerStateChanged: newState = 1 07-10 09:57:20.356 27804-27804/com.media.customplayer V/PlayerActivity: onDrawerSlide: slideOffset = 0.045 07-10 09:57:20.366 27804-27804/com.media.customplayer V/PlayerActivity: onDrawerSlide: slideOffset = 0.10666667 07-10 09:57:20.386 27804-27804/com.media.customplayer V/PlayerActivity: onDrawerSlide: slideOffset = 0.16666667 07-10 09:57:20.406 27804-27804/com.media.customplayer V/PlayerActivity: onDrawerSlide: slideOffset = 0.23 07-10 09:57:20.416 27804-27804/com.media.customplayer V/PlayerActivity: onDrawerSlide: slideOffset = 0.29666665 07-10 09:57:20.436 27804-27804/com.media.customplayer V/PlayerActivity: onDrawerSlide: slideOffset = 0.36166668 07-10 09:57:20.446 27804-27804/com.media.customplayer V/PlayerActivity: onDrawerSlide: slideOffset = 0.42333335 07-10 09:57:20.476 27804-27804/com.media.customplayer V/PlayerActivity: onDrawerSlide: slideOffset = 0.50166667 07-10 09:57:20.486 27804-27804/com.media.customplayer V/PlayerActivity: onDrawerSlide: slideOffset = 0.5516667 07-10 09:57:20.506 27804-27804/com.media.customplayer V/PlayerActivity: onDrawerSlide: slideOffset = 0.60333335 07-10 09:57:20.526 27804-27804/com.media.customplayer V/PlayerActivity: onDrawerSlide: slideOffset = 0.655 07-10 09:57:20.536 27804-27804/com.media.customplayer V/PlayerActivity: onDrawerSlide: slideOffset = 0.7133333 07-10 09:57:20.556 27804-27804/com.media.customplayer V/PlayerActivity: onDrawerSlide: slideOffset = 0.7816667 07-10 09:57:20.576 27804-27804/com.media.customplayer V/PlayerActivity: onDrawerSlide: slideOffset = 0.8516667 07-10 09:57:20.586 27804-27804/com.media.customplayer V/PlayerActivity: onDrawerSlide: slideOffset = 0.92833334 07-10 09:57:20.606 27804-27804/com.media.customplayer V/PlayerActivity: onDrawerSlide: slideOffset = 1.0 07-10 09:57:20.636 27804-27804/com.media.customplayer V/PlayerActivity: onDrawerOpened 07-10 09:57:20.646 27804-27804/com.media.customplayer V/PlayerActivity: onDrawerStateChanged: newState = 0 07-10 09:57:40.546 27804-27804/com.media.customplayer V/PlayerActivity: onDrawerStateChanged: newState = 1 07-10 09:57:40.566 27804-27804/com.media.customplayer V/PlayerActivity: onDrawerSlide: slideOffset = 0.9633333 07-10 09:57:40.586 27804-27804/com.media.customplayer V/PlayerActivity: onDrawerSlide: slideOffset = 0.92333335 07-10 09:57:40.596 27804-27804/com.media.customplayer V/PlayerActivity: onDrawerSlide: slideOffset = 0.89166665 07-10 09:57:40.616 27804-27804/com.media.customplayer V/PlayerActivity: onDrawerSlide: slideOffset = 0.8616667 07-10 09:57:40.636 27804-27804/com.media.customplayer V/PlayerActivity: onDrawerSlide: slideOffset = 0.83666664 07-10 09:57:40.646 27804-27804/com.media.customplayer V/PlayerActivity: onDrawerSlide: slideOffset = 0.81166667 07-10 09:57:40.666 27804-27804/com.media.customplayer V/PlayerActivity: onDrawerSlide: slideOffset = 0.7916667 07-10 09:57:40.686 27804-27804/com.media.customplayer V/PlayerActivity: onDrawerSlide: slideOffset = 0.7683333 07-10 09:57:40.696 27804-27804/com.media.customplayer V/PlayerActivity: onDrawerSlide: slideOffset = 0.74833333 07-10 09:57:40.716 27804-27804/com.media.customplayer V/PlayerActivity: onDrawerSlide: slideOffset = 0.73 07-10 09:57:40.736 27804-27804/com.media.customplayer V/PlayerActivity: onDrawerSlide: slideOffset = 0.71666664 07-10 09:57:40.746 27804-27804/com.media.customplayer V/PlayerActivity: onDrawerSlide: slideOffset = 0.70166665 07-10 09:57:40.766 27804-27804/com.media.customplayer V/PlayerActivity: onDrawerSlide: slideOffset = 0.6933333 07-10 09:57:40.786 27804-27804/com.media.customplayer V/PlayerActivity: onDrawerSlide: slideOffset = 0.67833334 07-10 09:57:40.796 27804-27804/com.media.customplayer V/PlayerActivity: onDrawerSlide: slideOffset = 0.66333336 07-10 09:57:40.816 27804-27804/com.media.customplayer V/PlayerActivity: onDrawerSlide: slideOffset = 0.645 07-10 09:57:40.836 27804-27804/com.media.customplayer V/PlayerActivity: onDrawerSlide: slideOffset = 0.62833333 07-10 09:57:40.846 27804-27804/com.media.customplayer V/PlayerActivity: onDrawerSlide: slideOffset = 0.615 07-10 09:57:40.866 27804-27804/com.media.customplayer V/PlayerActivity: onDrawerSlide: slideOffset = 0.6 07-10 09:57:40.876 27804-27804/com.media.customplayer V/PlayerActivity: onDrawerSlide: slideOffset = 0.58666664 07-10 09:57:40.896 27804-27804/com.media.customplayer V/PlayerActivity: onDrawerSlide: slideOffset = 0.57166666 07-10 09:57:40.916 27804-27804/com.media.customplayer V/PlayerActivity: onDrawerSlide: slideOffset = 0.55333334 07-10 09:57:40.926 27804-27804/com.media.customplayer V/PlayerActivity: onDrawerSlide: slideOffset = 0.53333336 07-10 09:57:40.946 27804-27804/com.media.customplayer V/PlayerActivity: onDrawerSlide: slideOffset = 0.515 07-10 09:57:40.966 27804-27804/com.media.customplayer V/PlayerActivity: onDrawerSlide: slideOffset = 0.49833333 07-10 09:57:40.976 27804-27804/com.media.customplayer V/PlayerActivity: onDrawerSlide: slideOffset = 0.48833334 07-10 09:57:40.996 27804-27804/com.media.customplayer V/PlayerActivity: onDrawerSlide: slideOffset = 0.47333333 07-10 09:57:41.016 27804-27804/com.media.customplayer V/PlayerActivity: onDrawerSlide: slideOffset = 0.46 07-10 09:57:41.026 27804-27804/com.media.customplayer V/PlayerActivity: onDrawerSlide: slideOffset = 0.44333333 07-10 09:57:41.046 27804-27804/com.media.customplayer V/PlayerActivity: onDrawerSlide: slideOffset = 0.42833334 07-10 09:57:41.066 27804-27804/com.media.customplayer V/PlayerActivity: onDrawerSlide: slideOffset = 0.41333333 07-10 09:57:41.076 27804-27804/com.media.customplayer V/PlayerActivity: onDrawerSlide: slideOffset = 0.39666668 07-10 09:57:41.096 27804-27804/com.media.customplayer V/PlayerActivity: onDrawerSlide: slideOffset = 0.38333333 07-10 09:57:41.116 27804-27804/com.media.customplayer V/PlayerActivity: onDrawerSlide: slideOffset = 0.37 07-10 09:57:41.126 27804-27804/com.media.customplayer V/PlayerActivity: onDrawerSlide: slideOffset = 0.35666665 07-10 09:57:41.146 27804-27804/com.media.customplayer V/PlayerActivity: onDrawerSlide: slideOffset = 0.34833333 07-10 09:57:41.156 27804-27804/com.media.customplayer V/PlayerActivity: onDrawerSlide: slideOffset = 0.33333334 07-10 09:57:41.176 27804-27804/com.media.customplayer V/PlayerActivity: onDrawerSlide: slideOffset = 0.32 07-10 09:57:41.196 27804-27804/com.media.customplayer V/PlayerActivity: onDrawerSlide: slideOffset = 0.30666667 07-10 09:57:41.206 27804-27804/com.media.customplayer V/PlayerActivity: onDrawerSlide: slideOffset = 0.29666665 07-10 09:57:41.226 27804-27804/com.media.customplayer V/PlayerActivity: onDrawerSlide: slideOffset = 0.28666666 07-10 09:57:41.246 27804-27804/com.media.customplayer V/PlayerActivity: onDrawerSlide: slideOffset = 0.27333334 07-10 09:57:41.256 27804-27804/com.media.customplayer V/PlayerActivity: onDrawerSlide: slideOffset = 0.25833333 07-10 09:57:41.276 27804-27804/com.media.customplayer V/PlayerActivity: onDrawerSlide: slideOffset = 0.23833333 07-10 09:57:41.296 27804-27804/com.media.customplayer V/PlayerActivity: onDrawerSlide: slideOffset = 0.22 07-10 09:57:41.306 27804-27804/com.media.customplayer V/PlayerActivity: onDrawerSlide: slideOffset = 0.20333333 07-10 09:57:41.326 27804-27804/com.media.customplayer V/PlayerActivity: onDrawerSlide: slideOffset = 0.18666667 07-10 09:57:41.346 27804-27804/com.media.customplayer V/PlayerActivity: onDrawerSlide: slideOffset = 0.17166667 07-10 09:57:41.356 27804-27804/com.media.customplayer V/PlayerActivity: onDrawerSlide: slideOffset = 0.15166667 07-10 09:57:41.376 27804-27804/com.media.customplayer V/PlayerActivity: onDrawerSlide: slideOffset = 0.13 07-10 09:57:41.386 27804-27804/com.media.customplayer V/PlayerActivity: onDrawerSlide: slideOffset = 0.108333334 07-10 09:57:41.406 27804-27804/com.media.customplayer V/PlayerActivity: onDrawerSlide: slideOffset = 0.08833333 07-10 09:57:41.436 27804-27804/com.media.customplayer V/PlayerActivity: onDrawerStateChanged: newState = 2 07-10 09:57:41.446 27804-27804/com.media.customplayer V/PlayerActivity: onDrawerSlide: slideOffset = 0.086666666 07-10 09:57:41.456 27804-27804/com.media.customplayer V/PlayerActivity: onDrawerSlide: slideOffset = 0.065 07-10 09:57:41.476 27804-27804/com.media.customplayer V/PlayerActivity: onDrawerSlide: slideOffset = 0.046666667 07-10 09:57:41.486 27804-27804/com.media.customplayer V/PlayerActivity: onDrawerSlide: slideOffset = 0.033333335 07-10 09:57:41.506 27804-27804/com.media.customplayer V/PlayerActivity: onDrawerSlide: slideOffset = 0.023333333 07-10 09:57:41.526 27804-27804/com.media.customplayer V/PlayerActivity: onDrawerSlide: slideOffset = 0.015 07-10 09:57:41.536 27804-27804/com.media.customplayer V/PlayerActivity: onDrawerSlide: slideOffset = 0.01 07-10 09:57:41.556 27804-27804/com.media.customplayer V/PlayerActivity: onDrawerSlide: slideOffset = 0.006666667 07-10 09:57:41.576 27804-27804/com.media.customplayer V/PlayerActivity: onDrawerSlide: slideOffset = 0.0033333334 07-10 09:57:41.586 27804-27804/com.media.customplayer V/PlayerActivity: onDrawerSlide: slideOffset = 0.0016666667 07-10 09:57:41.626 27804-27804/com.media.customplayer V/PlayerActivity: onDrawerSlide: slideOffset = 0.0 07-10 09:57:41.646 27804-27804/com.media.customplayer V/PlayerActivity: onDrawerClosed 07-10 09:57:41.646 27804-27804/com.media.customplayer V/PlayerActivity: onDrawerStateChanged: newState = 0
3. 主动展开:DrawerLayout.openDrawer
主动隐藏:DrawerLayout.closeDrawer
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
package com.media.customplayer; import android.support.v4.view.GravityCompat; import android.support.v4.widget.DrawerLayout; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.util.Log; import android.view.Gravity; import android.view.View; import java.util.Timer; import java.util.TimerTask; public class PlayerActivity extends AppCompatActivity { private final String TAG = "PlayerActivity"; private DrawerLayout mPlayerDrawer; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_player); mPlayerDrawer = (DrawerLayout) findViewById(R.id.palyer_drawer_layout); mPlayerDrawer.addDrawerListener(new DrawerLayout.DrawerListener() { @Override public void onDrawerSlide(View drawerView, float slideOffset) { Log.v(TAG, "onDrawerSlide: slideOffset = " + slideOffset); } @Override public void onDrawerOpened(View drawerView) { Log.v(TAG, "onDrawerOpened"); } @Override public void onDrawerClosed(View drawerView) { Log.v(TAG, "onDrawerClosed"); } @Override public void onDrawerStateChanged(int newState) { Log.v(TAG, "onDrawerStateChanged: newState = " + newState); } }); mPlayerDrawer.openDrawer(GravityCompat.START, true); final Timer timer = new Timer(); TimerTask task = new TimerTask() { @Override public void run() { mPlayerDrawer.closeDrawer(GravityCompat.START, true); timer.cancel(); } }; timer.schedule(task, 2000); } }
posted on 2016-07-13 15:01 alvin.zhang 阅读(1481) 评论(0) 编辑 收藏 举报