Android滚动多TAB悬浮头效果

Android滚动多TAB悬浮头效果

先看效果图

在这里插入图片描述

最近公司项目要实现类似这个效果于是自己就写了个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那里可以根据自己需要放图或者其它内容,我这里懒得放图就弄了个带背景的布局

最后放个Demo下载地址

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值