Android开发上滑悬停且头部可刷新

Android开发上滑悬停且头部可刷新

需求：上滑列表后推荐，小岛，专题置顶，可左右切换。因为头部有重要内容，所有头部出现且滑到顶之后，再下来可刷新头部内容

效果图：

scroll1.jpg
Screenshot_20200627_134124_com.cong.coordinatorla.jpg
Screenshot_20200627_134130_com.cong.coordinatorla.jpg

实现思路：

首先上滑悬停想到的是协调布局CoordinatorLayout，
第二用刷新控件包裹着协调布局，我用的刷新控件是refreshlayout.RefreshLayout
第三在代码中app_bar_layout.addOnOffsetChangedListener判断刷新布局什么时候可用，什么时候不可用

下面是实现文档

步骤一：布局

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">

<TextView
    android:id="@+id/tv_title"
    android:layout_width="match_parent"
    android:layout_height="48dp"
    android:text="头部刷新"
    android:gravity="center"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    android:textSize="20sp"
    android:background="@color/white"
    />

<android.support.constraint.ConstraintLayout

    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:layout_constraintTop_toBottomOf="@+id/tv_title"

    >

    <com.ccr.ccrecyclerviewlibrary.view.refreshlayout.RefreshLayout
        android:id="@+id/mRefreshLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:focusableInTouchMode="true"
        app:layout_constraintTop_toTopOf="parent"
        >

        <android.support.design.widget.CoordinatorLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/white">

            <android.support.design.widget.AppBarLayout
                android:id="@+id/app_bar_layout"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:clipChildren="false"
                android:background="@color/white"
                android:orientation="vertical">

                <!--可以滑走-->
                <android.support.design.widget.CollapsingToolbarLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:clipChildren="false"
                    app:layout_scrollFlags="scroll|exitUntilCollapsed">


                    <android.support.v7.widget.RecyclerView
                        android:id="@+id/common_recycler"
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        app:layout_collapseMode="pin" />

                </android.support.design.widget.CollapsingToolbarLayout>

                <!--滑动悬停-->
                <android.support.constraint.ConstraintLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content">

                    <com.flyco.tablayout.SlidingTabLayout
                        android:id="@+id/stl_ceo_data"
                        android:layout_width="match_parent"
                        android:layout_height="40dp"
                        app:layout_constraintTop_toTopOf="parent"
                        app:tl_indicator_color="@color/color_D5100A"
                        app:tl_indicator_height="2dp"
                        app:tl_indicator_width="21dp"
                        app:tl_tab_space_equal="true"
                        app:tl_textBold="BOTH"
                        app:tl_textSelectColor="@color/color_D5100A"
                        app:tl_textUnselectColor="@color/c_33"
                        app:tl_textsize="16sp" />

                    <View
                        android:layout_width="0dp"
                        android:layout_height="1px"
                        android:layout_marginLeft="16dp"
                        android:layout_marginRight="16dp"
                        android:background="@color/c_f2efef"
                        app:layout_constraintLeft_toLeftOf="parent"
                        app:layout_constraintRight_toRightOf="parent"
                        app:layout_constraintTop_toBottomOf="@id/stl_ceo_data" />
                </android.support.constraint.ConstraintLayout>


            </android.support.design.widget.AppBarLayout>

            <!--协调联动-->
            <android.support.v4.view.ViewPager
                android:id="@+id/vp_pager_ceo_data"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                app:layout_behavior="@string/appbar_scrolling_view_behavior" />
        </android.support.design.widget.CoordinatorLayout>

    </com.ccr.ccrecyclerviewlibrary.view.refreshlayout.RefreshLayout>
</android.support.constraint.ConstraintLayout>
</android.support.constraint.ConstraintLayout>

步骤二：使用示例

class OutRefreshActivity : AppCompatActivity() {

private var context: Context? = null

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_out_refresh)
    context = this

    setRefreshLayout(mRefreshLayout)
    common_recycler.layoutManager = LinearLayoutManager(context)
    val headView = LayoutInflater.from(context).inflate(R.layout.layout_out_refresh_head, common_recycler, false)
    val headAdapter = OutRefreshHeadAdapter()
    common_recycler?.adapter = headAdapter
    headAdapter.addHeaderView(headView)
    //关键,什么时候RefreshLayout可用
    app_bar_layout.addOnOffsetChangedListener(object :AppBarLayout.OnOffsetChangedListener{
        override fun onOffsetChanged(p0: AppBarLayout?, verticalOffset: Int) {
            mRefreshLayout.isEnabled = verticalOffset >=0
            //只能下拉
            mRefreshLayout?.direction = RefreshLayoutDirection.TOP
        }

    })

    val fragments: MutableList<Fragment> = ArrayList()
    fragments.add(AFragment())
    fragments.add(BFragment())
    fragments.add(CFragment())
    val titles: MutableList<String> = ArrayList()
    titles.add("推荐")
    titles.add("小岛")
    titles.add("专题")
    val baseFragmentAdapter = BaseFragmentAdapter(supportFragmentManager, fragments, titles)
    vp_pager_ceo_data.setAdapter(baseFragmentAdapter)
    stl_ceo_data.setViewPager(vp_pager_ceo_data)

}

protected fun setRefreshLayout(refreshLayout: RefreshLayout) {

    refreshLayout.direction = RefreshLayoutDirection.BOTH
    refreshLayout.setColorSchemeResources(R.color.m_red_two, R.color.m_charcoal_grey, R.color.m_purple, R.color.m_green, R.color.m_blue)
    refreshLayout.setOnRefreshListener(object : RefreshLayout.OnRefreshListener {
        override fun onPullDownToRefresh() {
            //做刷新操作，模拟请求接口
            Handler().postDelayed(object :Runnable{
                override fun run() {
                    refreshLayout.isRefreshing = false //隐藏刷新圈圈
                }

            },1000)
        }

        override fun onPullUpToRefresh() {
            //加载更多
        }
    })
}
}

上面有OutRefreshHeadAdapter，BaseFragmentAdapter，AFragment没给出，就是普通的操作类，相信你们都会写或者项目中就有。
重点是上面的关键代码

app_bar_layout.addOnOffsetChangedListener(object :AppBarLayout.OnOffsetChangedListener{
        override fun onOffsetChanged(p0: AppBarLayout?, verticalOffset: Int) {
            mRefreshLayout.isEnabled = verticalOffset >=0
            //只能下拉
            mRefreshLayout?.direction = RefreshLayoutDirection.TOP
        }

    })

ok,这样的效果就做好了。
有问题加我QQ:893151960 或者加群：142739277