需求是先滑动里面的列表，滑动到一个位置时外面滑动，外面滑动一段距离后再里面滑动。最初想用 CoordinatorLayout 加 RecyclerView，但效果不好直接用，或者用 NestedScrollView 与 RecyclerView 组合使用。
但 NestedScrollView 与 RecyclerView 组合时怎么也不能使 RecyclerView 自己滑动，而 NestedScrollView 不滑动，事件拦截，禁止嵌套滑动，NestedScrollView 是否消费 RecyclerView 发过来的距离，怎么试都不行，最终还是尝试用 CoordinatorLayout 和 RecyclerView 组合。
实现效果如下：
2019_05_19_16_07_00.gif
要让 CoordinatorLayout 一开始不滑动，然后可以滑动，再然后又不可以滑动，所以想自定义一个控件，重写 onNestedPreScroll 方法看能否有用。
class MyCoordinatorLayout @JvmOverloads constructor(
context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0
) : CoordinatorLayout(context, attrs, defStyleAttr) {
override fun onNestedPreScroll(target: View, dx: Int, dy: Int, consumed: IntArray, type: Int) {
super.onNestedPreScroll(target, dx, dy, consumed, type)
}
}
页面布局如下：
<?xml version="1.0" encoding="utf-8"?>
<pot.ner347.androiddemo.view.MyCoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/coordinatorLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@android:color/white">
<android.support.design.widget.AppBarLayout
android:id="@+id/appbarLayout"
android:layout_width="match_parent"
android:layout_height="150dp"
android:fitsSystemWindows="true"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
<RelativeLayout
android:id="@+id/titleLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<!-- 滑上去后要显示的内容，需求是一个复杂 View，Demo 就用 TextView -->
<TextView
android:id="@+id/smallTitle"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_alignParentBottom="true"
android:alpha="0"
android:background="#ffffff"
android:gravity="center"
android:text="标题"
android:textColor="#000000"
android:textSize="20sp" />
<!-- 一开始显示的复杂 View -->
<TextView
android:id="@+id/bigTitle"
android:layout_width="match_parent"
android:layout_height="150dp"
android:background="#0000ff"
android:gravity="center"
android:text="行程"
android:textColor="#ffffff"
android:textSize="20sp" />
</RelativeLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:id="@+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior" />
</pot.ner347.androiddemo.view.MyCoordinatorLayout>
先填充假数据
class ScrollActivity : AppCompatActivity() {
private lateinit var layoutManager : LinearLayoutManager
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_scroll)
layoutManager = LinearLayoutManager(this)
recyclerView.layoutManager = layoutManager
recyclerView.addItemDecoration(DividerItemDecoration(this, DividerItemDecoration.VERTICAL))
recyclerView.adapter = Adapter()
}
private inner class Adapter: RecyclerView.Adapter<RecyclerView.ViewHolder> () {
override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): RecyclerView.ViewHolder {
val tv = TextView(parent.context)
tv.textColor = Color.WHITE
tv.setTextSize(TypedValue.COMPLEX_UNIT_SP, 18f)
tv.gravity = Gravity.CENTER
return ViewHolder(tv)
}
override fun onBindViewHolder(holder: RecyclerView.ViewHolder, position: Int) {
val tv = holder.itemView as TextView
var height = 200
when (position) {
0 -> {
tv.text = "上面"
tv.backgroundColor = Color.BLACK
}
1 -> {
tv.text = "吸顶标题"
tv.backgroundColor = resources.getColor(R.color.colorPrimary)
height = dp2px(50)
}
else -> {
tv.text = "position:$position"
tv.backgroundColor = Color.BLACK
}
}
val lp = ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, height)
tv.layoutParams = lp
}
override fun getItemCount() = 20
}
private inner class ViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView)
fun dp2px(dip: Int): Int {
return Math.round(TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,
dip.toFloat(), resources.displayMetrics))
}
}
滑动效果
监听 AppBarLayout 和 RecyclerView 的滑动事件，当要吸顶的 Item 滑到要隐藏的时候，让外层 CoordinatorLayout 消费滑动距离。
class MyCoordinatorLayout @JvmOverloads constructor(
context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0
) : CoordinatorLayout(context, attrs, defStyleAttr) {
override fun onNestedPreScroll(target: View, dx: Int, dy: Int, consumed: IntArray, type: Int) {
if (canScroll) {
// fling 事件会瞬间滑动很多，控制一下只消费 height + appbarLayout.y 的距离
if (scrollHeight + appbarLayout.y < dy) {
super.onNestedPreScroll(target, dx, (scrollHeight + appbarLayout.y).toInt(), consumed, type)
} else {
super.onNestedPreScroll(target, dx, dy, consumed, type)
}
} else {
// 本身不消费任何距离，让 RecyclerView 自己滑动
super.onNestedPreScroll(target, dx, 0, consumed, type)
}
}
private var canScroll = true
fun canScroll(can: Boolean) {
canScroll = can
}
private var scrollHeight: Int = 0
// Activity 传过来的，AppBarLayout 从最大到最小可移动的距离
fun setScrollHeight(height: Int) {
scrollHeight = height
}
}
修改 Activity 添加监听
private val STICK_TITLE_INDEX = 1 // 吸顶标题在 RecyclerView 的位置
private var barHeightDistance: Int = 0 // 上面行程标题大小两种的高度差
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_scroll)
barHeightDistance = dp2px(100)
coordinatorLayout.setScrollHeight(barHeightDistance)
// ...
appbarLayout.addOnOffsetChangedListener { _, _ -> calculate() }
recyclerView.addOnScrollListener(object : RecyclerView.OnScrollListener() {
override fun onScrollStateChanged(recyclerView: RecyclerView, newState: Int) {
super.onScrollStateChanged(recyclerView, newState)
}
override fun onScrolled(recyclerView: RecyclerView, dx: Int, dy: Int) {
super.onScrolled(recyclerView, dx, dy)
calculate()
}
})
}
/**
* 控制 AppBar 是否可以滑动
*/
private fun calculate() {
val firstPosition = layoutManager.findFirstVisibleItemPosition()
// 可见位置还没有要吸顶的 View，让 CoordinatorLayout 不可以滑动
if (firstPosition < STICK_TITLE_INDEX) {
coordinatorLayout.canScroll(false)
} else {
// 要吸顶的位置到了，让外面滚动，此时 appbarLayout.y 从 0 开始慢慢变小，
// 变到 -barHeightDistance 时不再滑动，让 RecyclerView 滑动
coordinatorLayout.canScroll(appbarLayout.y > -barHeightDistance)
}
}
吸顶后悬浮
要使吸顶的 View 停在外面，单独做一个 View 覆盖在 RecyclerView 上。
<!--<android.support.v7.widget.RecyclerView-->
<!--android:id="@+id/recyclerView"-->
<!--android:layout_width="match_parent"-->
<!--android:layout_height="match_parent"-->
<!--app:layout_behavior="@string/appbar_scrolling_view_behavior" />-->
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<android.support.v7.widget.RecyclerView
android:id="@+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<!-- 这个 View 和 RecyclerView 里第一个位置的 View 一样 -->
<TextView
android:visibility="gone"
android:id="@+id/stickyTitle"
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="@color/colorPrimary"
android:gravity="center"
android:text="吸顶标题"
android:textColor="#ffffff"
android:textSize="18sp" />
</RelativeLayout>
修改 calculate 方法
private fun calculate() {
val firstPosition = layoutManager.findFirstVisibleItemPosition()
if (firstPosition < STICK_TITLE_INDEX) {
stickyTitle.visibility = View.GONE // 第一个可见的小于 1，悬浮标题还能看见
coordinatorLayout.canScroll(false)
} else {
// 第一个可见的大于 STICK_TITLE_INDEX，说明滑到上面了，显示这个单独的 View
stickyTitle.visibility = View.VISIBLE
coordinatorLayout.canScroll(appbarLayout.y > -barHeightDistance)
}
// 控制透明度变化
smallTitle.alpha = Math.abs(appbarLayout.y / barHeightDistance.toFloat())
bigTitle.alpha = 1 - smallTitle.alpha
}
自动到顶部
如果 AppBarLayout 滑到一半手松开了，想自动收起来，让 RecyclerView 发个假的滑动。如果想渐进的，可以做个 ValueAnimator，每次发一点。
然后发现一个问题，向下拉时由于 canScroll 成 false 时，发假的也没用，所以修改
private fun calculate() {
// 只要 appbarLayout 在这不上不下的位置，都可以滑动
coordinatorLayout.canScroll(appbarLayout.y <=0 && appbarLayout.y >= -barHeightDistance)
val firstPosition = layoutManager.findFirstVisibleItemPosition()
// 可见位置还没有要吸顶的 View，让 CoordinatorLayout 不可以滑动
if (firstPosition < STICK_TITLE_INDEX) {
stickyTitle.visibility = View.GONE // 第一个可见的小于 1，悬浮标题还能看见
} else {
// 要吸顶的位置到了，让外面滚动，此时 appbarLayout.y 从 0 开始慢慢变小，
// 变到 -barHeightDistance 时不再滑动，让 RecyclerView 滑动
stickyTitle.visibility = View.VISIBLE
}
// 控制透明度变化
smallTitle.alpha = Math.abs(appbarLayout.y / barHeightDistance.toFloat())
bigTitle.alpha = 1 - smallTitle.alpha
}
然后监听 View 的触摸事件
recyclerView.setOnTouchListener { _, event ->
if (event.action == MotionEvent.ACTION_UP) autoToTop()
false
}
coordinatorLayout.setOnTouchListener { _, event ->
if (event.action == MotionEvent.ACTION_UP) autoToTop()
false
}
其中 autoToTop 方法没有做动画效果，一次性的
private fun autoToTop() {
if (appbarLayout.y < 0 && appbarLayout.y > -barHeightDistance) {
// 在这中间，分发一个假的滑动事件
recyclerView.dispatchNestedPreScroll(0, (appbarLayout.y + barHeightDistance).toInt(), intArrayOf(0,0), intArrayOf(0,0), ViewCompat.TYPE_TOUCH)
}
}
源码：
