美文网首页优秀案例Android嵌套
Android开发上滑悬停且头部可刷新

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

作者: 你的益达233 | 来源:发表于2020-06-27 14:01 被阅读0次

    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

    相关文章

      网友评论

        本文标题:Android开发上滑悬停且头部可刷新

        本文链接:https://www.haomeiwen.com/subject/rwnmfktx.html