0
点赞
收藏
分享

微信扫一扫

制作一个锚点定位的ScrollView,面试官

芷兮离离 2022-01-31 阅读 44

//当前值大于Tag
if (value - tag == min(value - tag, rightVal - tag)) {
rightVal = value
}
}
}

println(" left= l e f t V a l t a g = leftVal tag= leftValtag=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。

现在我们有了这几个信息参数:

  1. mPos: 当前滚动布局ScrollView的顶部坐标.
  2. previousView:当前滚动位置的前一个View,或者说是Y坐标小于mPos的最近的View。
  3. nextView:当前滚动位置的下一个View,或者说是Y坐标大于mPos的最近的View。
  4. scrollIndex: 即当前滚动到哪个注册的View范围之内了。这个参数的改变周期是,当下一个nextView成为previousView之前,这个值将一直为当前previousView的下标位置。

Snipaste_2021-04-13_13-04-08.png

计算距离

计算previousViewmPos的距离,nextViewmPos的距离. 这个距离其实很好计算。直接拿两个坐标相减即可得到。

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的话,有两种情况。

  1. 开始滚动时还未滚动到,注册的第一个View时。第一个View为nextViewpreviousView==null。
  2. 滚动到底部了,在滚动下去,后面没有注册的锚点了,最后一个View为previousViewnextView==null

Snipaste_2021-04-13_13-29-59.png

在计算出距离的同时对scrollIndex的坐标位置也进行修复。如果还没滚动到第一个注册的锚点View,那么scrollIndex=0,如果没有nextView了说明到最后了,scrollIndex=最后。还有一种情况就是由于最后一个注册的锚点View的高度,根本不够滚动到ScrollView顶部的话。就对这个下标位置进行修复。我们在一开始查找相邻两个View的时候就将isScrollBottom参数进行了初始化。而isFixBottom我们根据业务需求进行设置。

计算距离最终得到了两个参数:

previousViewDistance:previousViewmPos的距离。

nextViewDistance: nextViewmPos的距离。

Snipaste_2021-04-13_13-45-49.png

计算百分比

有了相隔的距离,接下来我们就可以去求向上滚动时previousView的逃离百分比与nextView的进入百分比。

Snipaste_2021-04-13_13-58-02.png

前一个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])
}

经过上面的计算我们得到了这几个数据:

  1. viewDistanceDifference:previousViewnextViewY坐标之差。即前后相距的距离
  2. previousRatio:前一个View的逃离百分比,previousViewmPos的距离百分比。
  3. nextRatio:下一个View的进入百分比,nextViewmPos的的距离百分比。

这样就算是完工了。

回调监听

最后我们将这些参数进行分类,交给页面去处理。

增加一个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”
0f…1f) {
//只有两个值在正确的范围之内才能进行处理否则打印异常信息
onViewPointChangeListener?.onScrollPointChangeRatio(
previousRatio,
nextRatio,
scrollIndex,
previousViewDistance,
isScrollBottom
)
} else {
Log.e(
TAG, “computeView:” +
“\n previousRatio = $previousRatio” +
“\n nextRatio = $nextRatio”

举报

相关推荐

0 条评论