一、效果图
1570689018888938.gif
二、布局代码
解决方案:
- 最外层:SmartRefreshLayout
- 中间滑动嵌套:CoordinatorLayout + AppBarLayout 这是android matrial组件组合
- 底部横向滑动多页面:tablayout + viewpager, viewpager中展示recylerview
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.scwang.smartrefresh.layout.SmartRefreshLayout xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/refreshLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@android:color/white"
app:srlAccentColor="@android:color/white"
app:srlEnablePreviewInEditMode="true"
app:srlPrimaryColor="@android:color/holo_blue_light">
<!--srlAccentColor srlPrimaryColor 将会改变 Header 和 Footer 的主题颜色-->
<!--srlEnablePreviewInEditMode 可以开启和关闭预览功能-->
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.coordinatorlayout.widget.CoordinatorLayout
android:id="@+id/search_sv_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="@id/search_rl_top">
<androidx.viewpager.widget.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior" />
<com.google.android.material.appbar.AppBarLayout
android:id="@+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@android:color/white">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
android:background="@android:color/white">
<cn.bingoogolapple.bgabanner.BGABanner
android:id="@+id/banner"
style="@style/BannerDefaultStyle"
app:banner_pageChangeDuration="1000"
app:banner_pointAutoPlayAble="true"
app:banner_pointContainerBackground="@android:color/transparent"
app:banner_pointDrawable="@drawable/bga_banner_selector_point_hollow"
app:banner_pointTopBottomMargin="15dp"
app:banner_transitionEffect="alpha" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="title"
android:textSize="20sp"
android:textColor="@android:color/black"
android:layout_alignParentLeft="true"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="subtitle"
android:textSize="15sp"
android:textColor="@android:color/darker_gray"
android:layout_alignParentRight="true"/>
</RelativeLayout>
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/rv_Grid"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"/>
<!-- PagerSnapHelper can move just one page when scroll -->
<!-- LinearSnapHelper can move serveral page when scroll-->
<com.ryan.rv_gallery.GalleryRecyclerView
android:id="@+id/rv_Gallery"
android:layout_width="match_parent"
android:layout_height="200dp"
app:helper="LinearSnapHelper"
android:layout_marginTop="10dp"/>
<View
android:layout_width="match_parent"
android:layout_height="10dp"
android:background="@android:color/darker_gray"/>
</LinearLayout>
<com.google.android.material.tabs.TabLayout
android:id="@+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</com.google.android.material.appbar.AppBarLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
<include
android:id="@+id/search_rl_top"
layout="@layout/layout_search"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp" />
</RelativeLayout>
<com.scwang.smartrefresh.layout.footer.ClassicsFooter
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<com.scwang.smartrefresh.layout.header.ClassicsHeader
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</com.scwang.smartrefresh.layout.SmartRefreshLayout>
</RelativeLayout>
三、demo地址
MutilScrollLayout
网友评论