Android制作一個錨點定位的ScrollView

更新時間：2021年04月14日 08:35:17 作者：cpp加油站

這篇文章主要介紹了Android制作一個錨點定位的ScrollView，幫助大家更好的理解和學(xué)習(xí)使用Android，感興趣的朋友可以了解下

因為遇到了一個奇怪的需求：將垂直線性滾動的布局添加一個Indicator。定位布局中的幾個標(biāo)題項目。為了不影響原有的布局結(jié)構(gòu)所以制作了這個可以錨點定位的ScrollView，就像MarkDown的錨點定位一樣。所以自定義了一個ScrollView實現(xiàn)這個業(yè)務(wù)AnchorPointScrollView

完成效果圖

需求分析

怎么滾動?

一個錨點定位的ScrollView。在ScrollView中本身有smoothScrollBy(Int,Int)、scrollTo(Int,Int)這種可以滾動到指定坐標(biāo)位置的方法。我們可以基于這個方法來進行定位View的位置。

smoothScrollBy(Int,Int)是增量滾動。即從當(dāng)前位置增加減少滾動距離。

scrollTo(Int,Int)是絕對坐標(biāo)滾動。滾動到指定的坐標(biāo)位置。

這里我選擇的是使用smoothScrollBy這個方法來進行處理。

滾動到哪里?

我已經(jīng)確定使用smoothScrollBy來進行布局的滾動。那么下一步就是要知道滾動到下一個View要多少距離，怎么確定下一個View的坐標(biāo)位置。

首先要確定View的位置。如果我們通過View.getY()獲取的話這個是絕對不正確的。因為View.getY()是當(dāng)前View與自己父View的嵌套坐標(biāo)關(guān)系。而ScrollView內(nèi)部是個LinearLayout，而且布局中也有很多的嵌套關(guān)系，所以不能使用View.getY()來獲取View的坐標(biāo)。

使用getLocationOnScreen(IntArray)獲取View在屏幕上的絕對坐標(biāo)位置,再減去ScrollView的絕對坐標(biāo)位置，就得到了。當(dāng)前View與ScrollView的相對位置關(guān)系。它們之間的差值就是我們要滾動的距離。

代碼實現(xiàn)

我們寫一個方法，讓ScrollView滾動到指定的View位置。

    @JvmOverloads
    fun scrollToView(viewId: Int, offset: Int = 0) {
        val moveToView = findViewById<View>(viewId)
        moveToView ?: return
        //獲取自己的絕對xy坐標(biāo)
        val parentLocation = IntArray(2)
        getLocationOnScreen(parentLocation)
        //獲取View的絕對坐標(biāo)
        val viewLocation = IntArray(2)
        moveToView.getLocationOnScreen(viewLocation)
        //坐標(biāo)相減得到要滾動的距離
        val moveViewY = viewLocation[1] - parentLocation[1]
        //加上偏移坐標(biāo)量，得到最終要滾動的距離
        val needScrollY = (moveViewY - offset)
        //如果是0，那就沒必要滾動了，說明坐標(biāo)已經(jīng)重合了
        if (moveViewY == 0) return
        smoothScrollBy(0, needScrollY)
    }

這里的offset參數(shù)是滾動的額外偏移量。來保證滾動的時候預(yù)留一些額外空間。

    //滾動到第一個View
    fun scrollView1(view: View) {
        viewBinding.scrollView.scrollToView(R.id.demo_view1)
    }
    //滾動到第二個View 上方偏移50像素
    fun scrollView2Offset(view: View) {
        viewBinding.scrollView.scrollToView(R.id.demo_view2,50)
    }

現(xiàn)在已經(jīng)可以滾動到指定的View位置了。接下來就是比較難的了。

錨點變化位置處理

現(xiàn)在只是能夠滾動到指定的View了，但是這并不能完全滿足業(yè)務(wù)需求。在UI上是要有一個Indicator指示器的，來指示當(dāng)前已經(jīng)滾動到哪個位置。

所以我們先增加一個集合，來保存滾動的錨點View。

val registerViews = mutableListOf<View>()

并增加方法添加Views

    fun addScrollView(vararg viewIds: Int) {
        val views = Array(viewIds.size) { index ->
            val view = findViewById<View>(viewIds[index])
            if (view == null) {
                val missingId = rootView.resources.getResourceName(viewIds[index])
                throw NoSuchElementException("沒有找到這個ViewId相關(guān)的View $missingId")
            }
            view
        }
        registerViews.clear()
        registerViews.addAll(views)
    }

分析：我們已經(jīng)有了需要定位，需要監(jiān)聽變化的Views，當(dāng)ScrollView滾動的時候，我們可以通過OnScrollChangeListener監(jiān)聽滾動，并獲取注冊的錨點View的位置改變信息。在onScrollChange中計算滾動偏移和滾動到哪個View。

在注冊O(shè)nScrollChangeListener的時候我們也要保留外部的監(jiān)聽器使用。

    init {
        //調(diào)用父類的 不調(diào)用自身重寫的
        super.setOnScrollChangeListener(this)
    }
    //重寫并保留外部的對象
    override fun setOnScrollChangeListener(userListener: OnScrollChangeListener?) {
        mUserListener = userListener
    }
       
    override fun onScrollChange(
        v: NestedScrollView?,
        scrollX: Int,
        scrollY: Int,
        oldScrollX: Int,
        oldScrollY: Int
    ) {
        //用戶回調(diào)
        mUserListener?.onScrollChange(v, scrollX, scrollY, oldScrollX, oldScrollY)
        //計算邏輯
        computeView()
    }

我們接下來的所有操作都將會在computeView()這個方法中進行

我們先封裝一個數(shù)據(jù)體用于保存View與坐標(biāo)的對應(yīng)關(guān)系。

    data class ViewPos(val view: View?, var X: Int, var Y: Int)

在onSizeChanged的時候，獲取當(dāng)前ScrollView的坐標(biāo)位置

    override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {
        super.onSizeChanged(w, h, oldw, oldh)
        //大小改變時，更新自己的坐標(biāo)位置
        mPos = updateViewPos(this)
    }
    
    private fun updateViewPos(view: View): ViewPos {
        //獲取自己的絕對xy坐標(biāo)
        val location = IntArray(2)
        view.getLocationOnScreen(location)
        return ViewPos(view, location[0], location[1])
    }

這里的[mPos]在之后都將表示當(dāng)前ScrollView的坐標(biāo)位置

查找最近兩個View

我們該如何確定哪個View滾動的位置已經(jīng)臨近mPos了。我們可以使用一個簡單的查詢算法來找到。

演示

我們可以遍歷View的Y坐標(biāo)與當(dāng)前的Y坐標(biāo)進行對比然后得到當(dāng)前Y坐標(biāo)臨近的兩個值。我們通過一個測試方法演示一下

     @Test
    fun 最接近值() {
        val list = arrayListOf<Int>(-1, -2, -3, 14, 5, 62, 7, 80, 9, 100, 200, 500, 1123)
        //尋找與tag最近的兩個值
        val tag: Long = 5
        //tag左邊值
        var leftVal: Int = Int.MIN_VALUE
        //tag右邊值
        var rightVal: Int = Int.MAX_VALUE
        //首先排序
        list.sort()

        for (value in list) {
            //當(dāng)前值小于Tag
            if (tag >= value) {
                if (tag - value == min(tag - value, tag - leftVal)) {
                    leftVal = value
                }
            } else {
                //當(dāng)前值大于Tag
                if (value - tag == min(value - tag, rightVal - tag)) {
                    rightVal = value
                }
            }
        }

        println(" left=$leftVal tag=$tag  right=$rightVal")
    }

大家也可以自己運行一下例子修改tag的大小來驗證一下。

我們通過這個簡單的算法，抽象的應(yīng)用到我們的業(yè)務(wù)邏輯中。

private fun computeView() {
         mPos ?: return
         if (registerViews.isEmpty()) return
        //判斷是否滾動到底部了，后面會用到
        val isScrollBottom = scrollY == getMaxScrollY()
        //檢索相鄰兩個View
        //前一個View緩存
        var previousView = ViewPos(null, 0, Int.MIN_VALUE)
        //下一個View緩存
        var nextView = ViewPos(null, 0, Int.MAX_VALUE)
        //當(dāng)前滾動的View下標(biāo)
        var scrollIndex = -1
        //通過遍歷注冊的View，找到當(dāng)前與定點觸發(fā)位置相鄰的前后兩個View和坐標(biāo)位置
        //[這個查找算法查看 [com.example.scrollview.ExampleUnitTest]
        registerViews.forEachIndexed { index, it ->
            val viewPos = updateViewPos(it)
            if (mPos!!.Y >= viewPos.Y) {
                if (mPos!!.Y.toLong() - viewPos.Y == min(
                        mPos!!.Y.toLong() - viewPos.Y,
                        mPos!!.Y.toLong() - previousView.Y
                    )
                ) {
                    scrollIndex = index
                    previousView = viewPos
                }
            } else {
                if (viewPos.Y - mPos!!.Y.toLong() == min(
                        viewPos.Y - mPos!!.Y.toLong(),
                        nextView.Y - mPos!!.Y.toLong()
                    )
                ) {
                    nextView = viewPos
                }
            }
        }
}

我們通過上面的計算，拿到了當(dāng)前坐標(biāo)mPos與之相鄰的前一個ViewPos和后一個ViewPos,而且也得到了滾動到了哪個下標(biāo)位置index。如果在當(dāng)前滾動位置之前沒有所注冊的View即為Null。如果在當(dāng)前滾動位置之后沒有所注冊的View即為Null。

現(xiàn)在我們有了這幾個信息參數(shù)：

mPos: 當(dāng)前滾動布局ScrollView的頂部坐標(biāo).
previousView:當(dāng)前滾動位置的前一個View，或者說是Y坐標(biāo)小于mPos的最近的View。
nextView:當(dāng)前滾動位置的下一個View，或者說是Y坐標(biāo)大于mPos的最近的View。
scrollIndex: 即當(dāng)前滾動到哪個注冊的View范圍之內(nèi)了。這個參數(shù)的改變周期是,當(dāng)下一個nextView成為previousView之前，這個值將一直為當(dāng)前previousView的下標(biāo)位置。

計算距離

計算previousView與mPos的距離，nextView與mPos的距離. 這個距離其實很好計算。直接拿兩個坐標(biāo)相減即可得到。

private fun computeView() {
    //忽略上面的previousView與nextView計算代碼
    。。。。。。。
    //=========================前后View滾動差值
        //距離上一個View需要滾動的距離/與上一個View之間的距離
        var previousViewDistance = 0
        //距離下一個View需要滾動的距離/與下一個View之間的距離
        var nextViewDistance = 0

        if (previousView.view != null) {
            previousViewDistance = mPos!!.Y - previousView.Y
        } else {
            //沒有前一個View，這就是第一個
            if (scrollIndex == -1) {
                scrollIndex = 0
            }
        }

        if (nextView.view != null) {
            nextViewDistance = nextView.Y - mPos!!.Y
        } else {
            //沒有最后一個View，這就是最后一個
            if (scrollIndex == -1) {
                scrollIndex = registerViews.size - 1
            }
        }

        //當(dāng)滾動到底部的時候 判斷修改滾動下標(biāo)強制為最后一個錨點View
        if (isScrollBottom && isFixBottom) {
            scrollIndex = registerViews.size - 1
        }
}

這里的代碼，在計算滾動距離的時候，要先進行View==NULL的判斷。因為如果是NULL的話，有兩種情況。

開始滾動時還未滾動到，注冊的第一個View時。第一個View為nextView。previousView==null。
滾動到底部了，在滾動下去，后面沒有注冊的錨點了，最后一個View為previousView，nextView==null

在計算出距離的同時對scrollIndex的坐標(biāo)位置也進行修復(fù)。如果還沒滾動到第一個注冊的錨點View，那么scrollIndex=0,如果沒有nextView了說明到最后了，scrollIndex=最后。還有一種情況就是由于最后一個注冊的錨點View的高度，根本不夠滾動到ScrollView頂部的話。就對這個下標(biāo)位置進行修復(fù)。我們在一開始查找相鄰兩個View的時候就將isScrollBottom參數(shù)進行了初始化。而isFixBottom我們根據(jù)業(yè)務(wù)需求進行設(shè)置。

計算距離最終得到了兩個參數(shù):

~ previousViewDistance:previousView與mPos的距離。

~ nextViewDistance: nextView與mPos的距離。

計算百分比

有了相隔的距離，接下來我們就可以去求向上滾動時previousView的逃離百分比與nextView的進入百分比。

前一個View的逃離百分比previousRatio的值= previousViewDistance/前一個View與下一個View的距離

而下一個View的進入百分比nextRatio=1.0-prevousRatio.

代碼

    private fun computeView() {
    //忽略上面的previousView與nextView計算代碼
    。。。。
    //=========================前后View滾動差值
    。。。。
    //===============前后View逃離進入百分比
        //距離前一個View百分比值
        var previousRatio = 0.0f
        //距離下一個View百分比值
        var nextRatio = 0.0f
        //前后兩個View距離的差值
        var viewDistanceDifference = 0
        //根View的坐標(biāo)值
        val rootPos = getRootViewPos()
        //計算最相鄰兩個View的Y坐標(biāo)差值距離[viewDistanceDifference]
        if (previousView.view != null && nextView.view != null) {
            viewDistanceDifference = nextView.Y - previousView.Y
        } else if (rootPos != null) {
            if (previousView.view == null && nextView.view != null) {
                //沒有前一個View
                //那么到達(dá)第一個View的 距離 = 下一個View - 跟布局頂部坐標(biāo)
                viewDistanceDifference = nextView.Y - rootPos.Y
            } else if (nextView.view == null && previousView.view != null) {
                //沒有下一個View
                //此時前一個View是最后一個注冊的錨點view，
                //距離 = 底部Y坐標(biāo) - 前一個ViewY坐標(biāo)
                val bottomY = rootPos.Y + getMaxScrollY() //最大滾動距離
                viewDistanceDifference = bottomY - previousView.Y
            }
        }

//=====================計算百分比值
        if (nextViewDistance != 0) {
            //下一個View的距離/總距離=前一個view的逃離百分比
            previousRatio = nextViewDistance.toFloat() / viewDistanceDifference
            //反之是下一個View的進入百分比
            nextRatio = 1f - previousRatio
            if (previousViewDistance == 0) {
                //如果還不到第一個錨點View 將不存在第一個View的逃離百分比；
                //此時的previousRatio是頂部坐標(biāo)的逃離百分比
                previousRatio = 0f
            }
        } else if (previousViewDistance != 0) {
            //同理。前一個View的距離/總距離=下一個View的逃離百分比
            nextRatio = previousViewDistance.toFloat() / viewDistanceDifference
            //反之 是前一個View的進入百分比
            previousRatio = 1f - nextRatio
            if (nextViewDistance == 0) {
                //如果錨點計算已經(jīng)到達(dá)最后一個View 將不存在下一個View的進入百分比
                //此時的nextRatio是底部坐標(biāo)的進入百分比及到達(dá)不可滾動時的百分比
                nextRatio = 0f
            }
        }

}

    /**
     * 獲取最大滑動距離
     */
    fun getMaxScrollY(): Int {
        if (mMaxScrollY != -1) {
            return mMaxScrollY
        }
        if (childCount == 0) {
            // Nothing to do.
            return -1
        }
        val child = getChildAt(0)
        val lp = child.layoutParams as LayoutParams
        val childSize = child.height + lp.topMargin + lp.bottomMargin
        val parentSpace = height - paddingTop - paddingBottom
        mMaxScrollY = 0.coerceAtLeast(childSize - parentSpace)
        return mMaxScrollY
    }
    
    //獲取根View的坐標(biāo)。ScrollView的坐標(biāo)是不變的。
    //根布局的LinerLayout坐標(biāo)會根據(jù)滾動改變
    private fun getRootViewPos(): ViewPos? {
        if (childCount == 0) return null
        val rootView = getChildAt(0)
        val parentLocation = IntArray(2)
        rootView.getLocationOnScreen(parentLocation)
        return ViewPos(null, parentLocation[0], parentLocation[1])
    }

經(jīng)過上面的計算我們得到了這幾個數(shù)據(jù)：

viewDistanceDifference:previousView與nextViewY坐標(biāo)之差。即前后相距的距離
previousRatio:前一個View的逃離百分比，previousView與mPos的距離百分比。
nextRatio:下一個View的進入百分比，nextView與mPos的的距離百分比。

這樣就算是完工了。

回調(diào)監(jiān)聽

最后我們將這些參數(shù)進行分類，交給頁面去處理。

增加一個interface

 interface OnViewPointChangeListener {

        fun onScrollPointChange(previousDistance: Int, nextDistance: Int, index: Int)

        fun onScrollPointChangeRatio(
            previousFleeRatio: Float,
            nextEnterRatio: Float,
            index: Int,
            scrollPixel: Int,
            isScrollBottom: Boolean
        )

        fun onPointChange(index: Int, isScrollBottom: Boolean)
    }

將數(shù)據(jù)填入

    private fun computeView() {
    //忽略之前的計算代碼
    。。。
//==============數(shù)據(jù)回調(diào)

        //觸發(fā)錨點變化回調(diào)
        if (mViewPoint != scrollIndex) {
            mViewPoint = scrollIndex
            onViewPointChangeListener?.onPointChange(mViewPoint, isScrollBottom)
        }

        //觸發(fā)滾動距離改變回調(diào)
        onViewPointChangeListener?.onScrollPointChange(
            previousViewDistance,
            nextViewDistance,
            scrollIndex
        )

        //觸發(fā) 逃離進入百分比變化回調(diào)
        if (previousRatio in 0f..1f && nextRatio in 0f..1f) {
            //只有兩個值在正確的范圍之內(nèi)才能進行處理否則打印異常信息
            onViewPointChangeListener?.onScrollPointChangeRatio(
                previousRatio,
                nextRatio,
                scrollIndex,
                previousViewDistance,
                isScrollBottom
            )
        } else {
            Log.e(
                TAG, "computeView:" +
                        "\n previousRatio = $previousRatio" +
                        "\n nextRatio = $nextRatio"
            )
        }
}

最后再看一眼完成的效果

這里的indicator用的是MagicIndicator。代碼都再GitHub上了。大家自己觀摩一下吧。