高级UI-DrawerLayout侧滑

侧滑的方案有很多种，早期的开源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) {
                //状态改变时回调
            }
        });
    }
}

效果图如下