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

下載源碼