滑动吸顶效果

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

源码:

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Android 动画总结(3) - 补间动画

    Tween Animation 包括、ScaleAnimation、TranslateAnimation、RotateAnimation 以及这四种动画的组合 ...

    七适散人
  • Android 动画总结(8) - Activity 转场动画

    从 Android 5.0 之后,可以用 ActivityOptions 来实现,ActivityOptionsCompat 是 support v4 的兼容实...

    七适散人
  • Android 动画总结(9) - 过渡动画

    前面已经介绍过一部分 Activity 之间的过渡动画。现在讲的不是 Activity 转场,而是同一个页面的 View 之间的过渡。

    七适散人
  • AndroidStudio项目制作倒计时模块

    大家好,我是 Vic,今天给大家带来AndroidStudio项目制作倒计时模块的概述,希望你们喜欢

    达达前端
  • Android开发笔记(一百二十七)活用提示窗Toast和Snackbar

    大家平时都经常用Toast,可是你是否发现,系统默认的Toast样式太过单调乏味呢?其实Toast的界面也允许开发者自行定制,只要定义好提示窗的布局文件,即...

    用户4464237
  • 15.Android-实现TCP客户端,支持读写

    在上章14.Android-使用sendMessage线程之间通信我们学习了如何在线程之间发送数据.

    张诺谦
  • A020-列表容器之ListView

    前面介绍了Android UI中的五大布局容器,本节课介绍实际项目当中经常会用到的组件-ListView,它也是一个布局容器,它的每一项就是我们的列表项,每一个...

    用户1130025
  • Volley网络连接

    听着music睡
  • Android VideoView 视频播放完成例子(进度条,播放时间,暂停,拖动)

    中国广东省深圳市望海路半岛城邦三期 518067 +86 13113668890 <netkiller@msn.com>

    netkiller
  • Android开发(37) 使用DrawerLayout实现抽屉式导航菜单

    最近流行 左侧抽屉式的导航条菜单,知乎,360,QQ都使用了这样的导航菜单,我们也了解下:

    zhangyunfeiVir

扫码关注云+社区

领取腾讯云代金券