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

完成效果圖

需求分析怎么滾動(dòng)?

一個(gè)錨點(diǎn)定位的ScrollView。在ScrollView中本身有smoothScrollBy(Int,Int)、scrollTo(Int,Int)這種可以滾動(dòng)到指定坐標(biāo)位置的方法。我們可以基于這個(gè)方法來(lái)進(jìn)行定位View的位置。

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

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

這里我選擇的是使用smoothScrollBy這個(gè)方法來(lái)進(jìn)行處理。

滾動(dòng)到哪里?

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

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

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

代碼實(shí)現(xiàn)

我們寫(xiě)一個(gè)方法，讓ScrollView滾動(dòng)到指定的View位置。

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

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

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

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

錨點(diǎn)變化位置處理

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

所以我們先增加一個(gè)集合，來(lái)保存滾動(dòng)的錨點(diǎn)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('沒(méi)有找到這個(gè)ViewId相關(guān)的View $missingId') } view}registerViews.clear()registerViews.addAll(views) }

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

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

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

我們接下來(lái)的所有操作都將會(huì)在computeView()這個(gè)方法中進(jìn)行

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

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

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

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

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

查找最近兩個(gè)View

我們?cè)撊绾未_定哪個(gè)View滾動(dòng)的位置已經(jīng)臨近mPos了。我們可以使用一個(gè)簡(jiǎn)單的查詢(xún)算法來(lái)找到。

演示

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

@Test fun 最接近值() {val list = arrayListOf<Int>(-1, -2, -3, 14, 5, 62, 7, 80, 9, 100, 200, 500, 1123)//尋找與tag最近的兩個(gè)值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)前值大于Tagif (value - tag == min(value - tag, rightVal - tag)) { rightVal = value} }}println(' left=$leftVal tag=$tag right=$rightVal') }

大家也可以自己運(yùn)行一下例子修改tag的大小來(lái)驗(yàn)證一下。

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

private fun computeView() { mPos ?: return if (registerViews.isEmpty()) return//判斷是否滾動(dòng)到底部了，后面會(huì)用到val isScrollBottom = scrollY == getMaxScrollY()//檢索相鄰兩個(gè)View//前一個(gè)View緩存var previousView = ViewPos(null, 0, Int.MIN_VALUE)//下一個(gè)View緩存var nextView = ViewPos(null, 0, Int.MAX_VALUE)//當(dāng)前滾動(dòng)的View下標(biāo)var scrollIndex = -1//通過(guò)遍歷注冊(cè)的View，找到當(dāng)前與定點(diǎn)觸發(fā)位置相鄰的前后兩個(gè)View和坐標(biāo)位置//[這個(gè)查找算法查看 [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} }}}

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

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

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

計(jì)算距離

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

private fun computeView() { //忽略上面的previousView與nextView計(jì)算代碼 。。。。。。。 //=========================前后View滾動(dòng)差值//距離上一個(gè)View需要滾動(dòng)的距離/與上一個(gè)View之間的距離var previousViewDistance = 0//距離下一個(gè)View需要滾動(dòng)的距離/與下一個(gè)View之間的距離var nextViewDistance = 0if (previousView.view != null) { previousViewDistance = mPos!!.Y - previousView.Y} else { //沒(méi)有前一個(gè)View，這就是第一個(gè) if (scrollIndex == -1) {scrollIndex = 0 }}if (nextView.view != null) { nextViewDistance = nextView.Y - mPos!!.Y} else { //沒(méi)有最后一個(gè)View，這就是最后一個(gè) if (scrollIndex == -1) {scrollIndex = registerViews.size - 1 }}//當(dāng)滾動(dòng)到底部的時(shí)候 判斷修改滾動(dòng)下標(biāo)強(qiáng)制為最后一個(gè)錨點(diǎn)Viewif (isScrollBottom && isFixBottom) { scrollIndex = registerViews.size - 1}}

這里的代碼，在計(jì)算滾動(dòng)距離的時(shí)候，要先進(jìn)行View==NULL的判斷。因?yàn)槿绻荖ULL的話(huà)，有兩種情況。

開(kāi)始滾動(dòng)時(shí)還未滾動(dòng)到，注冊(cè)的第一個(gè)View時(shí)。第一個(gè)View為nextView。previousView==null。 滾動(dòng)到底部了，在滾動(dòng)下去，后面沒(méi)有注冊(cè)的錨點(diǎn)了，最后一個(gè)View為previousView，nextView==null

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

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

~ previousViewDistance:previousView與mPos的距離。

~ nextViewDistance: nextView與mPos的距離。

計(jì)算百分比

有了相隔的距離，接下來(lái)我們就可以去求向上滾動(dòng)時(shí)previousView的逃離百分比與nextView的進(jìn)入百分比。

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

而下一個(gè)View的進(jìn)入百分比nextRatio=1.0-prevousRatio.

代碼

private fun computeView() { //忽略上面的previousView與nextView計(jì)算代碼 。。。。 //=========================前后View滾動(dòng)差值 。。。。 //===============前后View逃離進(jìn)入百分比//距離前一個(gè)View百分比值var previousRatio = 0.0f//距離下一個(gè)View百分比值var nextRatio = 0.0f//前后兩個(gè)View距離的差值var viewDistanceDifference = 0//根View的坐標(biāo)值val rootPos = getRootViewPos()//計(jì)算最相鄰兩個(gè)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) {//沒(méi)有前一個(gè)View//那么到達(dá)第一個(gè)View的 距離 = 下一個(gè)View - 跟布局頂部坐標(biāo)viewDistanceDifference = nextView.Y - rootPos.Y } else if (nextView.view == null && previousView.view != null) {//沒(méi)有下一個(gè)View//此時(shí)前一個(gè)View是最后一個(gè)注冊(cè)的錨點(diǎn)view，//距離 = 底部Y坐標(biāo) - 前一個(gè)ViewY坐標(biāo)val bottomY = rootPos.Y + getMaxScrollY() //最大滾動(dòng)距離viewDistanceDifference = bottomY - previousView.Y }}//=====================計(jì)算百分比值if (nextViewDistance != 0) { //下一個(gè)View的距離/總距離=前一個(gè)view的逃離百分比 previousRatio = nextViewDistance.toFloat() / viewDistanceDifference //反之是下一個(gè)View的進(jìn)入百分比 nextRatio = 1f - previousRatio if (previousViewDistance == 0) {//如果還不到第一個(gè)錨點(diǎn)View 將不存在第一個(gè)View的逃離百分比；//此時(shí)的previousRatio是頂部坐標(biāo)的逃離百分比previousRatio = 0f }} else if (previousViewDistance != 0) { //同理。前一個(gè)View的距離/總距離=下一個(gè)View的逃離百分比 nextRatio = previousViewDistance.toFloat() / viewDistanceDifference //反之 是前一個(gè)View的進(jìn)入百分比 previousRatio = 1f - nextRatio if (nextViewDistance == 0) {//如果錨點(diǎn)計(jì)算已經(jīng)到達(dá)最后一個(gè)View 將不存在下一個(gè)View的進(jìn)入百分比//此時(shí)的nextRatio是底部坐標(biāo)的進(jìn)入百分比及到達(dá)不可滾動(dòng)時(shí)的百分比nextRatio = 0f }}} /** * 獲取最大滑動(dòng)距離 */ 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 LayoutParamsval childSize = child.height + lp.topMargin + lp.bottomMarginval parentSpace = height - paddingTop - paddingBottommMaxScrollY = 0.coerceAtLeast(childSize - parentSpace)return mMaxScrollY }//獲取根View的坐標(biāo)。ScrollView的坐標(biāo)是不變的。 //根布局的LinerLayout坐標(biāo)會(huì)根據(jù)滾動(dòng)改變 private fun getRootViewPos(): ViewPos? {if (childCount == 0) return nullval rootView = getChildAt(0)val parentLocation = IntArray(2)rootView.getLocationOnScreen(parentLocation)return ViewPos(null, parentLocation[0], parentLocation[1]) }

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

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

這樣就算是完工了。

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

最后我們將這些參數(shù)進(jìn)行分類(lèi)，交給頁(yè)面去處理。

增加一個(gè)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() { //忽略之前的計(jì)算代碼 。。。//==============數(shù)據(jù)回調(diào)//觸發(fā)錨點(diǎn)變化回調(diào)if (mViewPoint != scrollIndex) { mViewPoint = scrollIndex onViewPointChangeListener?.onPointChange(mViewPoint, isScrollBottom)}//觸發(fā)滾動(dòng)距離改變回調(diào)onViewPointChangeListener?.onScrollPointChange( previousViewDistance, nextViewDistance, scrollIndex)//觸發(fā) 逃離進(jìn)入百分比變化回調(diào)if (previousRatio in 0f..1f && nextRatio in 0f..1f) { //只有兩個(gè)值在正確的范圍之內(nèi)才能進(jìn)行處理否則打印異常信息 onViewPointChangeListener?.onScrollPointChangeRatio(previousRatio,nextRatio,scrollIndex,previousViewDistance,isScrollBottom )} else { Log.e(TAG, 'computeView:' +'n previousRatio = $previousRatio' +'n nextRatio = $nextRatio' )}}

最后再看一眼完成的效果

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

其實(shí)還是有很多優(yōu)化的空間的。比如查找最相鄰的兩個(gè)View時(shí)的算法。在最后注冊(cè)的1-3個(gè)view不足以滾動(dòng)到頂部的時(shí)候，可以讓index的變化更加優(yōu)雅等等。。有待改進(jìn)。

以上就是Android制作一個(gè)錨點(diǎn)定位的ScrollView的詳細(xì)內(nèi)容，更多關(guān)于Android 制作ScrollView的資料請(qǐng)關(guān)注好吧啦網(wǎng)其它相關(guān)文章！