侧滑的方案有很多种，早期的开源SliddingMenu，以及后来的DrawerLayout以及NavigationView等都可实现侧滑效果，这里介绍的是DrawerLayout，下一节将介绍NavigationView
原理
DrawerLayout位于v4包，为了做到最低限度的兼容，使得更低版本的Android也可以使用这个侧滑效果
其就是一个自定义的容器，继承自ViewGroup
在解析DrawerLayout布局的时候，根据android:layout_gravity="start"标签确定主布局和侧滑布局
例如下面的布局，就直接呈现出一个侧滑菜单
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!--内容部分-->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@android:color/holo_green_light"
android:text="内容部分" />
</LinearLayout>
<!--侧滑菜单部分-->
<LinearLayout
android:layout_width="200dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@android:color/holo_blue_light"
android:text="item 1" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@android:color/holo_orange_light"
android:text="item 2" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@android:color/holo_red_light"
android:text="item 3" />
</LinearLayout>
</android.support.v4.widget.DrawerLayout>
直接运行，效果图如下
使用Toolbar
因为要使用Toolbar，就要去掉其ActionBar，故直接修改style文件
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
</style>
</resources>
更改布局，使其符合MD标准
<?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">
<android.support.v7.widget.Toolbar
android:id="@+id/tool_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary" />
<android.support.v4.widget.DrawerLayout
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!--内容部分-->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@android:color/holo_green_light"
android:text="内容部分" />
</LinearLayout>
<!--侧滑菜单部分-->
<LinearLayout
android:layout_width="200dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="@color/colorPrimary"
android:orientation="vertical"
android:paddingTop="50dp">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@android:color/holo_blue_light"
android:text="item 1" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@android:color/holo_orange_light"
android:text="item 2" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@android:color/holo_red_light"
android:text="item 3" />
</LinearLayout>
</android.support.v4.widget.DrawerLayout>
</LinearLayout>
在活动处设置Toolbar
public class MainActivity extends AppCompatActivity {
private Toolbar toolbar;
private DrawerLayout drawerLayout;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
toolbar = findViewById(R.id.tool_bar);
//将ActionBar替换成Toolbar
setSupportActionBar(toolbar);
drawerLayout = findViewById(R.id.drawer_layout);
ActionBarDrawerToggle drawerToggle = new ActionBarDrawerToggle(this,
drawerLayout, toolbar, R.string.drawer_open, R.string.drawer_close);
//同步状态
drawerToggle.syncState();
//给侧滑控件设置监听
drawerLayout.setDrawerListener(drawerToggle);
}
}
至此便完成了侧滑功能的实现，其效果图如下
实现右侧滑入，这个其实很简单，将之前设置的android:layout_gravity="start"更改为android:layout_gravity="end"便实现右侧滑入，同时还可以实现左右都可以滑入
实现类似QQ的效果
在监听的状态里面设置即可
public class MainActivity extends AppCompatActivity {
private Toolbar toolbar;
private DrawerLayout drawerLayout;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
toolbar = findViewById(R.id.tool_bar);
//将ActionBar替换成Toolbar
setSupportActionBar(toolbar);
drawerLayout = findViewById(R.id.drawer_layout);
ActionBarDrawerToggle drawerToggle = new ActionBarDrawerToggle(this,
drawerLayout, toolbar, R.string.drawer_open, R.string.drawer_close);
//同步状态
drawerToggle.syncState();
//给侧滑控件设置监听
//drawerLayout.setDrawerListener(drawerToggle);
drawerLayout.setDrawerListener(new DrawerLayout.DrawerListener() {
@Override
public void onDrawerSlide(@NonNull View view, float slideOffset) {
//滑动过程中回调，其中slideOffset的值为 0~1
View content = drawerLayout.getChildAt(0);
View menu = view;
float scale = 1 - slideOffset;//1~0
float leftScale = (float) (1f - 0.3 * scale);//1~0.7
//float rightScale = (float) (0.7f + 0.3 * scale);//0.7~1
menu.setScaleX(leftScale);//1~0.7
menu.setScaleY(leftScale);//1~0.7
//content.setScaleX(rightScale);
//content.setScaleY(rightScale);
content.setTranslationX(menu.getMeasuredWidth() * (1 - scale));//0~width
}
@Override
public void onDrawerOpened(@NonNull View view) {
//打开时回调
}
@Override
public void onDrawerClosed(@NonNull View view) {
//关闭时回调
}
@Override
public void onDrawerStateChanged(int i) {
//状态改变时回调
}
});
}
}
效果图如下
