高级UI之DrawerLayout侧滑

发表于 | 分类于 | |

侧滑的方案有很多种，早期的开源SliddingMenu，以及后来的DrawerLayout以及NavigationView等都可实现侧滑效果，这里介绍的是DrawerLayout，下一节将介绍NavigationView

原理

DrawerLayout位于v4包，为了做到最低限度的兼容，使得更低版本的Android也可以使用这个侧滑效果
其就是一个自定义的容器，继承自ViewGroup
在解析DrawerLayout布局的时候，根据android:layout_gravity="start"标签确定主布局和侧滑布局
例如下面的布局，就直接呈现出一个侧滑菜单

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<?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文件

1
2
3
4
5
6
7
8
9
10
11
<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标准

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<?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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
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的效果

在监听的状态里面设置即可

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
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) {
                //状态改变时回调

            }
        });
    }
}

效果图如下

Donate comment here