前言

在应用中，上拉抽屉是一个很常见的控件，它可以很优雅地隐藏与显示一些附加内容，比如评论列表等。

教程

自定义控件

首先需要编写一个自定义控件类，以继承自LinearLayout为例：

SlideUpLayout.java
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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
public class SlideUpLayout extends LinearLayout {

    /**
     * 变量
     */
    private View bar;
    private View content;
    private Scroller scroller;
    private int downY;

    /**
     * 构造
     */
    public SlideUpLayout(Context context) {
        this(context, null);
    }

    public SlideUpLayout(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    /**
     * 尺寸
     */
    @SuppressLint("DrawAllocation")
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        scroller = new Scroller(getContext());
        bar = getChildAt(0);
        content = getChildAt(1);
    }

    /**
     * 位置
     */
    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        super.onLayout(changed, l, t, r, b);
        //bar置底
        bar.layout(0, getMeasuredHeight() - bar.getMeasuredHeight(), getMeasuredWidth(), getMeasuredHeight());
        //content隐藏
        content.layout(0, getMeasuredHeight(), getMeasuredWidth(), bar.getBottom() + content.getMeasuredHeight());
    }

    /**
     * 触控
     */
    @SuppressLint("ClickableViewAccessibility")
    @Override
    public boolean onTouchEvent(MotionEvent event) {
        super.onTouchEvent(event);
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN://按下
                //记录位置
                downY = (int) event.getY();
                break;
            case MotionEvent.ACTION_MOVE://移动
                //移动偏移
                int offsetY = (int) event.getY() - downY;
                //滚动位置
                int toScroll = getScrollY() - offsetY;
                //是否滚动位置超出限制
                if (toScroll < 0) {//最小限制
                    toScroll = 0;
                } else if (toScroll > content.getMeasuredHeight()) {//最大限制
                    toScroll = content.getMeasuredHeight();
                }
                //滚动
                scrollTo(0, toScroll);
                //记录位置
                downY = (int) event.getY();
                break;
            case MotionEvent.ACTION_UP://松开
                //滚动偏移
                int offsetScroll = getScrollY();
                //是否滚动偏移超过实际高度的一半
                if (offsetScroll > content.getMeasuredHeight() / 2) {//显示
                    scroller.startScroll(getScrollX(), getScrollY(), 0, content.getMeasuredHeight() - offsetScroll, 500);
                } else {//隐藏
                    scroller.startScroll(getScrollX(), getScrollY(), 0, -offsetScroll, 500);
                }
                //刷新界面
                invalidate();
                break;
        }
        return true;
    }

    /**
     * 滚动
     */
    @Override
    public void computeScroll() {
        super.computeScroll();
        if (scroller.computeScrollOffset()) {//滚动已完成
            //计算位置并滚动
            scrollTo(scroller.getCurrX(), scroller.getCurrY());
            //刷新界面
            invalidate();
        }
    }

}

布局

重点在于net.coolkk.test.SlideUpLayout这个控件（请将前部分包名改为自己项目的包名），它的内部有ID为SlideUpLayoutBar和SlideUpLayoutContent的两个控件，前者为可视部分，后者为隐藏部分。

activity_main.xml
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
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/image_activity_main_background"
    tools:context=".MainActivity">

    <net.coolkk.test.SlideUpLayout
        android:id="@+id/SlideUpLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent">

        <androidx.constraintlayout.widget.ConstraintLayout
            android:id="@+id/SlideUpLayoutBar"
            android:layout_width="match_parent"
            android:layout_height="60dp"
            android:background="@color/colorPrimary">

        </androidx.constraintlayout.widget.ConstraintLayout>

        <androidx.constraintlayout.widget.ConstraintLayout
            android:id="@+id/SlideUpLayoutContent"
            android:layout_width="match_parent"
            android:layout_height="300dp"
            android:background="@color/colorAccent">

        </androidx.constraintlayout.widget.ConstraintLayout>

    </net.coolkk.test.SlideUpLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

演示

图片

参考资料