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

下載原始碼