需求
在移动应用开发中，有时我们希望实现一种特殊的布局效果，即“底部二楼”效果。这个效果类似于在列表底部拖动时出现额外的内容区域，用户可以继续向上拖动查看更多内容。这种效果可以用于展示广告、推荐内容或其他信息。
效果
实现后的效果如下：
- 当用户滑动到列表底部时，可以继续向上拖动，显示出隐藏的底部内容区域。
- 底部内容区域可以包含任意视图，如RecyclerView等。
- 滑动到一定阈值后，可以自动回弹到初始位置或完全展示底部内容。
实现思路
为了实现这一效果，我们可以自定义一个ScrollerLayout，并使用Scroller类来处理滑动和回弹动画。主要思路如下：
- 创建自定义的
ScrollerLayout继承自LinearLayout。 - 在
ScrollerLayout中，遍历所有子视图，找到其中的RecyclerView，并为其添加滚动监听器。 - 在
RecyclerView滚动到顶部时，允许整个布局继续向上滑动，展示底部内容区域。 - 使用
Scroller类实现平滑滚动和回弹效果。
实现代码
ScrollerLayout.kt
package com.yxlh.androidxy.demo.ui.scroller
import android.content.Context
import android.util.AttributeSet
import android.util.Log
import android.view.MotionEvent
import android.view.View
import android.view.ViewConfiguration
import android.widget.LinearLayout
import android.widget.Scroller
import androidx.recyclerview.widget.RecyclerView
import com.yxlh.androidxy.R
//github.com/yixiaolunhui/AndroidXY
class ScrollerLayout @JvmOverloads constructor(
context: Context,
attrs: AttributeSet? = null,
defStyleAttr: Int = 0,
) : LinearLayout(context, attrs, defStyleAttr) {
private val mScroller = Scroller(context)
private var lastY = 0
private var downY = 0
private var contentHeight = 0
private var isRecyclerViewAtTop = false
private val touchSlop = ViewConfiguration.get(context).scaledTouchSlop
init {
orientation = VERTICAL
post {
setupRecyclerViews()
}
}
private fun setupRecyclerViews() {
for (i in 0 until childCount) {
val child = getChildAt(i)
if (child is RecyclerView) {
child.addOnScrollListener(object : RecyclerView.OnScrollListener() {
override fun onScrolled(recyclerView: RecyclerView, dx: Int, dy: Int) {
isRecyclerViewAtTop = !recyclerView.canScrollVertically(-1)
}
})
}
}
}
override fun onLayout(changed: Boolean, l: Int, t: Int, r: Int, b: Int) {
super.onLayout(changed, l, t, r, b)
val bottomBar = getChildAt(0)
contentHeight = 0
for (i in 0 until childCount) {
val child = getChildAt(i)
if (child is RecyclerView) {
contentHeight += child.measuredHeight
}
}
bottomBar.layout(0, measuredHeight - bottomBar.measuredHeight, measuredWidth, measuredHeight)
for (i in 1 until childCount) {
val child = getChildAt(i)
if (child is RecyclerView) {
child.layout(0, measuredHeight, measuredWidth, measuredHeight + contentHeight)
}
}
}
override fun onInterceptTouchEvent(ev: MotionEvent): Boolean {
val isTouchChildren = isTouchInsideChild(ev)
Log.d("121212", "onInterceptTouchEvent isTouchChildren=$isTouchChildren")
when (ev.action) {
MotionEvent.ACTION_DOWN -> {
downY = ev.y.toInt()
lastY = downY
}
MotionEvent.ACTION_MOVE -> {
val currentY = ev.y.toInt()
val dy = currentY - downY
if (isRecyclerViewAtTop && dy > touchSlop) {
lastY = currentY
return true
}
}
}
return super.onInterceptTouchEvent(ev)
}
override fun onTouchEvent(event: MotionEvent): Boolean {
when (event.action) {
MotionEvent.ACTION_DOWN -> {
if (!isTouchInsideChild(event)) return false
if (!mScroller.isFinished) {
mScroller.abortAnimation()
}
lastY = event.y.toInt()
return true
}
MotionEvent.ACTION_MOVE -> {
if (!isTouchInsideChild(event)) return false
val currentY = event.y.toInt()
val dy = lastY - currentY
val scrollY = scrollY + dy
if (scrollY < 0) {
scrollTo(0, 0)
} else if (scrollY > contentHeight) {
scrollTo(0, contentHeight)
} else {
scrollBy(0, dy)
}
lastY = currentY
return true
}
MotionEvent.ACTION_UP, MotionEvent.ACTION_CANCEL -> {
val threshold = contentHeight / 2
if (scrollY > threshold) {
showNavigation()
} else {
closeNavigation()
}
return true
}
}
return false
}
private fun isTouchInsideChild(event: MotionEvent): Boolean {
val x = event.rawX.toInt()
val y = event.rawY.toInt()
for (i in 0 until childCount) {
val child = getChildAt(i)
if (isViewUnder(child, x, y)) {
return true
}
}
return false
}
private fun isViewUnder(view: View?, x: Int, y: Int): Boolean {
if (view == null) return false
val location = IntArray(2)
view.getLocationOnScreen(location)
val viewX = location[0]
val viewY = location[1]
return x >= viewX && x < viewX + view.width && y >= viewY && y < viewY + view.height
}
fun showNavigation() {
val dy = contentHeight - scrollY
mScroller.startScroll(scrollX, scrollY, 0, dy, 500)
invalidate()
}
private fun closeNavigation() {
val dy = -scrollY
mScroller.startScroll(scrollX, scrollY, 0, dy, 500)
invalidate()
}
override fun computeScroll() {
if (mScroller.computeScrollOffset()) {
scrollTo(mScroller.currX, mScroller.currY)
postInvalidateOnAnimation()
}
}
}
ScrollerActivity.kt
package com.yxlh.androidxy.demo.ui.scroller
import android.graphics.Color
import android.os.Bundle
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.TextView
import androidx.appcompat.app.AppCompatActivity
import androidx.recyclerview.widget.LinearLayoutManager
import androidx.recyclerview.widget.RecyclerView
import com.yxlh.androidxy.R
import com.yxlh.androidxy.databinding.ActivityScrollerBinding
import kotlin.random.Random
class ScrollerActivity : AppCompatActivity() {
private var binding: ActivityScrollerBinding? = null
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
binding = ActivityScrollerBinding.inflate(layoutInflater)
setContentView(binding?.root)
//内容布局
binding?.content?.layoutManager = LinearLayoutManager(this)
binding?.content?.adapter = ColorAdapter(false)
//底部布局
binding?.bottomContent?.layoutManager = LinearLayoutManager(this)
binding?.bottomContent?.adapter = ColorAdapter(true)
binding?.content?.addOnScrollListener(object : RecyclerView.OnScrollListener() {
override fun onScrollStateChanged(recyclerView: RecyclerView, newState: Int) {
if (!recyclerView.canScrollVertically(1) && newState == RecyclerView.SCROLL_STATE_IDLE) {
binding?.scrollerLayout?.showNavigation()
}
}
})
}
}
class ColorAdapter(private var isColor: Boolean) : RecyclerView.Adapter<ColorAdapter.ColorViewHolder>() {
private val colors = List(100) { getRandomColor() }
override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ColorViewHolder {
val view = LayoutInflater.from(parent.context).inflate(R.layout.item_color, parent, false)
return ColorViewHolder(view, isColor)
}
override fun onBindViewHolder(holder: ColorViewHolder, position: Int) {
holder.bind(colors[position], position)
}
override fun getItemCount(): Int = colors.size
private fun getRandomColor(): Int {
val random = Random.Default
return Color.rgb(random.nextInt(256), random.nextInt(256), random.nextInt(256))
}
class ColorViewHolder(itemView: View, private var isColor: Boolean) : RecyclerView.ViewHolder(itemView) {
fun bind(color: Int, position: Int) {
if (isColor) {
itemView.setBackgroundColor(color)
}
itemView.findViewById<TextView>(R.id.color_tv).text = "$position"
}
}
}
结束
通过上述代码，我们成功实现了底部二楼效果。在用户滑动到RecyclerView底部时，可以继续向上拖动以显示底部的内容区域。这种效果可以增强用户体验，增加更多的内容展示方式。通过自定义布局和使用Scroller类，我们可以轻松实现这种复杂的滑动效果。
详情：github.com/yixiaolunhui/AndroidXY
