Android开发 自定义底部可拖拽滑动浮层控件及原理解析

最近项目中用到了可滑动底部浮层，于是乎就写了这个控件，代码不多很简单用到的都是一些基础知识并开源出来供大家参考，感兴趣的可以看看。

先看效果图：

了解完Android开发 View的生命周期结合代码详解和一张流程图带你完全搞懂Android的View事件分发机制并结合源码详解完全可以实现本篇自定义底部可滑动浮层控件。

实现步骤：

1.xml中写入SlideNormalView自定义控件：

    <com.example.floatlistview.slide.SlideNormalView
        android:id="@+id/slide_float_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="bottom"
        android:orientation="vertical">

        <ListView
            android:id="@+id/lv_content"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/purple_200"
            android:scrollbars="none" />

    </com.example.floatlistview.slide.SlideNormalView>

2.Activity中：

package com.example.floatlistview;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.ListView;

import com.example.floatlistview.slide.base.BaseSlideView;

import java.util.ArrayList;

public class SlideNormalActivity extends AppCompatActivity {
    private BaseSlideView slideFloatView;
    private ListView lvContent;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_slide_normal);
        slideFloatView = findViewById(R.id.slide_float_view);
        lvContent = findViewById(R.id.lv_content);
        ArrayList<String> list = new ArrayList();
        for (int i = 0; i < 20; i++) {
            list.add("Android");
        }
        lvContent.setAdapter(new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, list));
        lvContent.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
                Log.e("MainActivity", "onItemClick--->" + position);
            }
        });
    }

    public void onClickStart(View view) {
        slideFloatView.setOffset(slideFloatView.getParrentHeight() / 2);
        slideFloatView.setMaxHeight(slideFloatView.getParrentHeight() / 5 * 4);
        if (!slideFloatView.isShowing())
            slideFloatView.show();
        else slideFloatView.hide();
    }
}

 slideFloatView.setOffset(slideFloatView.getParrentHeight() / 2);是默认弹出高度；

slideFloatView.setMaxHeight(slideFloatView.getParrentHeight() / 5 * 4);是可滑动最大高度；

如果都不设值则最大高度和弹出高度都是默认按测量内容高度；

原理解析：

实现该功能主要需要知识点：滑动原理、view生命周期、事件分发机制，这里就讲讲滑动原理，至于view生命周期、事件分发机制之前讲过请移步相关文章查看。

滑动工具借用了Scroller组件，Scroller是Android系统提供的一个专门用于处理滚动效果的工具类，Scroller工具很强大ViewPager、ListView等内部都借用的是此工具类。

主要滑动核心代码：

 this.scroller.startScroll(0, scroller.getFinalY(), 0, offset, DEFAULT_DURATION);
 postInvalidate();

当然滑动了也要有滑动接收代码：

    @Override
    public void computeScroll() {
        super.computeScroll();
        if (scroller.computeScrollOffset()) {
            View v = getChildAt(0);
            if (v != null) {
                measureChild(v, View.MeasureSpec.makeMeasureSpec(parrentWidth, MeasureSpec.EXACTLY),
                        View.MeasureSpec.makeMeasureSpec(scroller.getFinalY(), MeasureSpec.EXACTLY));
                v.layout(0, getParrentHeight() - scroller.getCurrY(), v.getMeasuredWidth(), getParrentHeight());
                postInvalidate();
            }
            this.show.set(scroller.getFinalY() > 0);
        }
    }

其实就这么几行代码就是核心代码，大家看到上下滑动的时候布局是也跟随改变的，所以滑动接收代码自然是改变view的高度，那就需要使用到测量view的高度然后使用layout改变view的位置实现高度跟随滑动变化，是不是非常简单。

 switch (ev.getAction()) {
                case MotionEvent.ACTION_DOWN:
                    if (isChildView(child, ev)) {
                        setStartY(ev.getY());
                        setcOffset(0);
                    } else {
                        setStartY(-1);
                    }
//                    Log.e("ViewGroup", "dispatchTouchEvent--->ACTION_DOWN=" + ev.getY());
                    break;
                case MotionEvent.ACTION_MOVE:
                    if (getStartY() >= 0 && !intercept) {
                        if (getScroller().getFinalY()  + getStartY() - ev.getY() <= getMaxHeight()) {
                            if (Math.abs(getStartY() - ev.getY()) > 0) {
                                getScroller().startScroll(0, getScroller().getFinalY(), 0, (int) (getStartY() - ev.getY()), 0);
                                postInvalidate();
                            }
                            if (getStartY() - ev.getY() > 0) {
                                if (getScroller().getFinalY() < (getOffset() )) {
                                    setcOffset(-getScroller().getFinalY());
                                } else {
                                    if (getStartY() - ev.getY() > getSKIP_BOUND())
                                        setcOffset(getMaxHeight() - getScroller().getFinalY() );
                                    else
                                        setcOffset(-getScroller().getFinalY() + getOffset());
                                }
                            } else if (getStartY() - ev.getY() < 0) {
                                if (getScroller().getFinalY() < (getOffset())) {
                                    setcOffset(-getScroller().getFinalY() );
                                } else {
                                    if (Math.abs(getStartY() - ev.getY()) > getSKIP_BOUND())
                                        setcOffset(-getScroller().getFinalY() + getOffset() );
                                    else
                                        setcOffset(getMaxHeight() - getScroller().getFinalY() );
                                }
                            }
                        } else {
                            setcOffset(0);
                            if (Math.abs(getMaxHeight()  - getScroller().getFinalY()) > 0) {
                                getScroller().startScroll(0, getScroller().getFinalY(), 0, getMaxHeight()  - getScroller().getFinalY(), 0);
                                postInvalidate();
                            }
                        }
                    }
                    setStartY(ev.getY());
//                    Log.e("ViewGroup", "dispatchTouchEvent--->ACTION_MOVE=" + ev.getY());
                    break;
                case MotionEvent.ACTION_UP:
                    if (getStartY() >= 0) {
                        if (Math.abs(getcOffset()) > 0) slideView(getcOffset());
                    }
//                    Log.e("ViewGroup", "dispatchTouchEvent--->ACTION_UP=" + ev.getY());
                    break;
                default:
                    setStartY(-1);
                    break;
            }

以上是算法核心部分，不多解释了也很简单相信大家都能看懂，至于详细的事件分发部分就不多讲了感兴趣的可以自己下载源码研究一下。

如果我的文章对你有帮助，"一键三连"给个鼓励，让我更新文章更有动力，“关注”我会有更多干货不定时的更新哦！

下载APK

下载源码

欢迎关注微信公众号！你的每个赞和在看，都是对我的支持！👍