Android开发上滑悬停且头部可刷新
需求:上滑列表后推荐,小岛,专题置顶,可左右切换。因为头部有重要内容,所有头部出现且滑到顶之后,再下来可刷新头部内容
效果图:
scroll1.jpgScreenshot_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
网友评论