滑动吸顶效果

作者: 三流之路 | 来源:发表于2019-05-20 12:27 被阅读21次

需求是先滑动里面的列表，滑动到一个位置时外面滑动，外面滑动一段距离后再里面滑动。最初想用 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)
    }
}

源码：

滑动吸顶效果

滑动效果

吸顶后悬浮

自动到顶部

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

Android开发

Android开发经验谈

Android开发

高级UI

Android

Android应用开发那些事