先看效果圖
最近公司項目要實現類似這個效果於是自己就寫了個demo記錄一下,以下主要貼代碼,文末還會上傳demo代碼
思路
使用RecyclerView做下方的列表,tab使用TabLayout.至於懸浮摺疊則使用CoordinatorLayout+AppBarLayout+CollapsingToolbarLayout
開始貼代碼
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
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:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".ScrollingActivity">
<TextView
android:layout_width="wrap_content" android:layout_height="?attr/actionBarSize"
android:text="返回"
android:gravity="center"
android:layout_marginLeft="16dp"
android:layout_marginTop="16dp"/>
<com.scwang.smartrefresh.layout.SmartRefreshLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="@+id/app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true">
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/toolbar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
app:contentScrim="@color/colorAccent"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<FrameLayout
android:background="@color/design_default_color_primary"
android:layout_width="match_parent" android:layout_height="180dp">
<TextView
android:layout_gravity="center"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:text="假裝是一張圖"
/>
</FrameLayout>
</android.support.design.widget.CollapsingToolbarLayout>
<android.support.design.widget.TabLayout
android:id="@+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="@color/colorPrimary"
app:tabIndicatorColor="#FFFFFFFF"
app:tabSelectedTextColor="#FF888888"
app:tabTextColor="#FFFFFFFF">
<android.support.design.widget.TabItem android:layout_width="wrap_content"
android:text="tab1"
android:layout_height="wrap_content"/>
<android.support.design.widget.TabItem android:layout_width="wrap_content"
android:text="tab1"
android:layout_height="wrap_content"/>
<android.support.design.widget.TabItem android:layout_width="wrap_content"
android:text="tab1"
android:layout_height="wrap_content"/>
</android.support.design.widget.TabLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
app:layout_behavior="@string/appbar_scrolling_view_behavior"
android:id="@+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="wrap_content"></android.support.v7.widget.RecyclerView>
</android.support.design.widget.CoordinatorLayout>
</com.scwang.smartrefresh.layout.SmartRefreshLayout>
</LinearLayout>
SmartRefreshLayout是第三方刷新庫如果有需要可以使用其它實現了NestedScrollingParent, NestedScrollingChild的刷新庫
其中RecyclerView的使用代碼不再貼出。
FrameLayout那裏可以根據自己需要放圖或者其它內容,我這裏懶得放圖就弄了個帶背景的佈局