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) returnsmoothScrollBy(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 {//當前值大于Tagif (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 = 0if (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 }}//當滾動到底部的時候 判斷修改滾動下標強制為最后一個錨點Viewif (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 LayoutParamsval childSize = child.height + lp.topMargin + lp.bottomMarginval parentSpace = height - paddingTop - paddingBottommMaxScrollY = 0.coerceAtLeast(childSize - parentSpace)return mMaxScrollY }//獲取根View的坐標。ScrollView的坐標是不變的。 //根布局的LinerLayout坐標會根據滾動改變 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]) }
經過上面的計算我們得到了這幾個數據：
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的資料請關注好吧啦網其它相關文章！
相關文章：
網公網安備