Android制作一個錨點定位的ScrollView
因為遇到瞭一個奇怪的需求:將垂直線性滾動的佈局添加一個Indicator。定位佈局中的幾個標題項目。為瞭不影響原有的佈局結構所以制作瞭這個可以錨點定位的ScrollView,就像MarkDown的錨點定位一樣。所以自定義瞭一個ScrollView實現這個業務AnchorPointScrollView
完成效果圖
需求分析
怎麼滾動?
一個錨點定位的ScrollView。在ScrollView中本身有smoothScrollBy(Int,Int)、scrollTo(Int,Int)這種可以滾動到指定坐標位置的方法。我們可以基於這個方法來進行定位View的位置。
smoothScrollBy(Int,Int)是增量滾動。即從當前位置增加減少滾動距離。
scrollTo(Int,Int)是絕對坐標滾動。滾動到指定的坐標位置。
這裡我選擇的是使用smoothScrollBy這個方法來進行處理。
滾動到哪裡?
我已經確定使用smoothScrollBy來進行佈局的滾動。那麼下一步就是要知道滾動到下一個View要多少距離,怎麼確定下一個View的坐標位置。
首先要確定View的位置。如果我們通過View.getY()獲取的話這個是絕對不正確的。因為View.getY()是當前View與自己父View的嵌套坐標關系。而ScrollView內部是個LinearLayout,而且佈局中也有很多的嵌套關系,所以不能使用View.getY()來獲取View的坐標。
使用getLocationOnScreen(IntArray)獲取View在屏幕上的絕對坐標位置,再減去ScrollView的絕對坐標位置,就得到瞭。當前View與ScrollView的相對位置關系。它們之間的差值就是我們要滾動的距離。
代碼實現
我們寫一個方法,讓ScrollView滾動到指定的View位置。
@JvmOverloads fun scrollToView(viewId: Int, offset: Int = 0) { val moveToView = findViewById<View>(viewId) moveToView ?: return //獲取自己的絕對xy坐標 val parentLocation = IntArray(2) getLocationOnScreen(parentLocation) //獲取View的絕對坐標 val viewLocation = IntArray(2) moveToView.getLocationOnScreen(viewLocation) //坐標相減得到要滾動的距離 val moveViewY = viewLocation[1] - parentLocation[1] //加上偏移坐標量,得到最終要滾動的距離 val needScrollY = (moveViewY - offset) //如果是0,那就沒必要滾動瞭,說明坐標已經重合瞭 if (moveViewY == 0) return smoothScrollBy(0, needScrollY) }
這裡的offset參數是滾動的額外偏移量。來保證滾動的時候預留一些額外空間。
//滾動到第一個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) }
現在已經可以滾動到指定的View位置瞭。接下來就是比較難的瞭。
錨點變化位置處理
現在隻是能夠滾動到指定的View瞭,但是這並不能完全滿足業務需求。在UI上是要有一個Indicator指示器的,來指示當前已經滾動到哪個位置。
所以我們先增加一個集合,來保存滾動的錨點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相關的View $missingId") } view } registerViews.clear() registerViews.addAll(views) }
分析: 我們已經有瞭需要定位,需要監聽變化的Views,當ScrollView滾動的時候,我們可以通過OnScrollChangeListener監聽滾動,並獲取註冊的錨點View的位置改變信息。在onScrollChange中計算滾動偏移和滾動到哪個View。
在註冊OnScrollChangeListener的時候我們也要保留外部的監聽器使用。
init { //調用父類的 不調用自身重寫的 super.setOnScrollChangeListener(this) } //重寫並保留外部的對象 override fun setOnScrollChangeListener(userListener: OnScrollChangeListener?) { mUserListener = userListener } override fun onScrollChange( v: NestedScrollView?, scrollX: Int, scrollY: Int, oldScrollX: Int, oldScrollY: Int ) { //用戶回調 mUserListener?.onScrollChange(v, scrollX, scrollY, oldScrollX, oldScrollY) //計算邏輯 computeView() }
我們接下來的所有操作都將會在computeView()這個方法中進行
我們先封裝一個數據體用於保存View與坐標的對應關系。
data class ViewPos(val view: View?, var X: Int, var Y: Int)
在onSizeChanged的時候,獲取當前ScrollView的坐標位置
override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) { super.onSizeChanged(w, h, oldw, oldh) //大小改變時,更新自己的坐標位置 mPos = updateViewPos(this) } private fun updateViewPos(view: View): ViewPos { //獲取自己的絕對xy坐標 val location = IntArray(2) view.getLocationOnScreen(location) return ViewPos(view, location[0], location[1]) }
這裡的[mPos]在之後都將表示當前ScrollView的坐標位置
查找最近兩個View
我們該如何確定哪個View滾動的位置已經臨近mPos瞭。我們可以使用一個簡單的查詢算法來找到。
演示
我們可以遍歷View的Y坐標與當前的Y坐標進行對比然後得到當前Y坐標臨近的兩個值。 我們通過一個測試方法演示一下
@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) { //當前值小於Tag if (tag >= value) { if (tag - value == min(tag - value, tag - leftVal)) { leftVal = value } } else { //當前值大於Tag if (value - tag == min(value - tag, rightVal - tag)) { rightVal = value } } } println(" left=$leftVal tag=$tag right=$rightVal") }
大傢也可以自己運行一下例子修改tag的大小來驗證一下。
我們通過這個簡單的算法,抽象的應用到我們的業務邏輯中。
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) //當前滾動的View下標 var scrollIndex = -1 //通過遍歷註冊的View,找到當前與定點觸發位置相鄰的前後兩個View和坐標位置 //[這個查找算法查看 [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 } } } }
我們通過上面的計算,拿到瞭當前坐標mPos與之相鄰的前一個ViewPos和後一個ViewPos,而且也得到瞭滾動到瞭哪個下標位置index。如果在當前滾動位置之前沒有所註冊的View即為Null。如果在當前滾動位置之後沒有所註冊的View即為Null。
現在我們有瞭這幾個信息參數:
- mPos: 當前滾動佈局ScrollView的頂部坐標.
- previousView:當前滾動位置的前一個View,或者說是Y坐標小於mPos的最近的View。
- nextView:當前滾動位置的下一個View,或者說是Y坐標大於mPos的最近的View。
- scrollIndex: 即當前滾動到哪個註冊的View范圍之內瞭。這個參數的改變周期是,當下一個nextView成為previousView之前,這個值將一直為當前previousView的下標位置。
計算距離
計算previousView與mPos的距離,nextView與mPos的距離. 這個距離其實很好計算。直接拿兩個坐標相減即可得到。
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 } } //當滾動到底部的時候 判斷修改滾動下標強制為最後一個錨點View if (isScrollBottom && isFixBottom) { scrollIndex = registerViews.size - 1 } }
這裡的代碼,在計算滾動距離的時候,要先進行View==NULL的判斷。因為如果是NULL的話,有兩種情況。
- 開始滾動時還未滾動到,註冊的第一個View時。第一個View為nextView。previousView==null。
- 滾動到底部瞭,在滾動下去,後面沒有註冊的錨點瞭,最後一個View為previousView,nextView==null
在計算出距離的同時對scrollIndex的坐標位置也進行修復。如果還沒滾動到第一個註冊的錨點View,那麼scrollIndex=0,如果沒有nextView瞭說明到最後瞭,scrollIndex=最後。還有一種情況就是由於最後一個註冊的錨點View的高度,根本不夠滾動到ScrollView頂部的話。就對這個下標位置進行修復。我們在一開始查找相鄰兩個View的時候就將isScrollBottom參數進行瞭初始化。而isFixBottom我們根據業務需求進行設置。
計算距離最終得到瞭兩個參數:
~ 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的坐標值 val rootPos = getRootViewPos() //計算最相鄰兩個View的Y坐標差值距離[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 //那麼到達第一個View的 距離 = 下一個View - 跟佈局頂部坐標 viewDistanceDifference = nextView.Y - rootPos.Y } else if (nextView.view == null && previousView.view != null) { //沒有下一個View //此時前一個View是最後一個註冊的錨點view, //距離 = 底部Y坐標 - 前一個ViewY坐標 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是頂部坐標的逃離百分比 previousRatio = 0f } } else if (previousViewDistance != 0) { //同理。前一個View的距離/總距離=下一個View的逃離百分比 nextRatio = previousViewDistance.toFloat() / viewDistanceDifference //反之 是前一個View的進入百分比 previousRatio = 1f - nextRatio if (nextViewDistance == 0) { //如果錨點計算已經到達最後一個View 將不存在下一個View的進入百分比 //此時的nextRatio是底部坐標的進入百分比及到達不可滾動時的百分比 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的坐標。ScrollView的坐標是不變的。 //根佈局的LinerLayout坐標會根據滾動改變 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]) }
經過上面的計算我們得到瞭這幾個數據:
- viewDistanceDifference:previousView與nextViewY坐標之差。即前後相距的距離
- previousRatio:前一個View的逃離百分比,previousView與mPos的距離百分比。
- nextRatio:下一個View的進入百分比,nextView與mPos的的距離百分比。
這樣就算是完工瞭。
回調監聽
最後我們將這些參數進行分類,交給頁面去處理。
增加一個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) }
將數據填入
private fun computeView() { //忽略之前的計算代碼 。。。 //==============數據回調 //觸發錨點變化回調 if (mViewPoint != scrollIndex) { mViewPoint = scrollIndex onViewPointChangeListener?.onPointChange(mViewPoint, isScrollBottom) } //觸發滾動距離改變回調 onViewPointChangeListener?.onScrollPointChange( previousViewDistance, nextViewDistance, scrollIndex ) //觸發 逃離進入百分比變化回調 if (previousRatio in 0f..1f && nextRatio in 0f..1f) { //隻有兩個值在正確的范圍之內才能進行處理否則打印異常信息 onViewPointChangeListener?.onScrollPointChangeRatio( previousRatio, nextRatio, scrollIndex, previousViewDistance, isScrollBottom ) } else { Log.e( TAG, "computeView:" + "\n previousRatio = $previousRatio" + "\n nextRatio = $nextRatio" ) } }
最後再看一眼完成的效果
這裡的indicator用的是MagicIndicator。代碼都再GitHub上瞭。大傢自己觀摩一下吧。
其實還是有很多優化的空間的。比如查找最相鄰的兩個View時的算法。在最後註冊的1-3個view不足以滾動到頂部的時候,可以讓index的變化更加優雅等等。。有待改進。
以上就是Android制作一個錨點定位的ScrollView的詳細內容,更多關於Android 制作ScrollView的資料請關註WalkonNet其它相關文章!
推薦閱讀:
- None Found