当前位置: 代码迷 >> 综合 >> CoordinatorLayout+AppBarLayout+CollapsingToolbarLayout+ImmersionBar实现吸顶悬浮,状态栏沉浸式,顶部图片拉伸效果(二)
  详细解决方案

CoordinatorLayout+AppBarLayout+CollapsingToolbarLayout+ImmersionBar实现吸顶悬浮,状态栏沉浸式,顶部图片拉伸效果(二)

热度:95   发布时间:2023-09-29 22:17:13.0

话不多说直接上图:
CoordinatorLayout+AppBarLayout+CollapsingToolbarLayout+ImmersionBar实现吸顶悬浮,状态栏沉浸式,顶部图片拉伸效果(二)

在第一篇的基础上进行了拓展,整体下拉时,顶部图片会有拉伸回弹效果。

核心主要是重写了AppBarLayout使用的layout_behavior,顶部折叠的布局。Activity中只改动了一处,解决整体滑动时不流畅问题,Viewpager嵌套Fragment中展示每个item横向的RecycleView设置为setNestedScrollingEnabled(false);

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout 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"android:background="@color/black"android:orientation="vertical"><com.google.android.material.appbar.AppBarLayoutandroid:id="@+id/appBarLayout"android:layout_width="match_parent"android:layout_height="wrap_content"android:background="#0000"app:layout_behavior=".feature.mine.widget.AppbarZoomBehavior"tools:ignore="MissingConstraints"><com.google.android.material.appbar.CollapsingToolbarLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"app:contentScrim="@color/black"app:layout_scrollFlags="scroll|exitUntilCollapsed"><!--顶部折叠布局--><com.example.gw.xlp.feature.mine.widget.YYImageWrapRelativeLayoutandroid:id="@+id/topLayout"android:layout_width="match_parent"android:layout_height="wrap_content"android:background="#ececec"android:tag="scrollTag"app:layout_collapseMode="pin"app:layout_collapseParallaxMultiplier="0.7"><LinearLayoutandroid:layout_width="match_parent"android:layout_height="300dp"android:orientation="vertical"android:padding="12dp"android:gravity="left|bottom"android:tag="bottomLayoutTag"><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="阿伟哈皮"android:textColor="@color/white"android:textSize="@dimen/sp_18"android:textStyle="bold"/><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:gravity="bottom"><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="1关注"android:textSize="@dimen/sp_14"android:textColor="@color/white"/><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="1被关注"android:layout_marginStart="@dimen/dp_10"android:textSize="@dimen/sp_14"android:textColor="@color/white"/><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="vertical"android:layout_marginStart="@dimen/dp_10"><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="+2"android:layout_marginStart="@dimen/dp_20"android:textColor="@color/red"/><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="6人气"android:textSize="@dimen/sp_14"android:textColor="@color/white"/></LinearLayout></LinearLayout><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="21/170/60"android:textSize="@dimen/sp_14"android:textColor="@color/light_gray"android:layout_marginTop="@dimen/dp_10"android:drawablePadding="@dimen/dp_10"android:drawableLeft="@mipmap/icon_white_user"/><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="北京"android:textSize="@dimen/sp_14"android:textColor="@color/light_gray"android:layout_marginTop="@dimen/dp_10"android:drawablePadding="@dimen/dp_10"android:drawableLeft="@mipmap/icon_white_location"/><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="你还没有填写个人介绍,点击添加"android:textSize="@dimen/sp_14"android:textColor="@color/light_gray"android:layout_marginTop="@dimen/dp_10"android:drawablePadding="@dimen/dp_10" /></LinearLayout></com.example.gw.xlp.feature.mine.widget.YYImageWrapRelativeLayout><androidx.appcompat.widget.Toolbarandroid:id="@+id/toolbar"android:layout_width="match_parent"android:layout_height="@dimen/dp_40"app:layout_collapseMode="pin"><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:layout_marginRight="@dimen/dp_30"android:gravity="right"><ImageViewandroid:id="@+id/img_right"android:layout_width="@dimen/dp_24"android:layout_height="@dimen/dp_32"android:layout_gravity="right"android:src="@mipmap/icon_list_setting" /></LinearLayout></androidx.appcompat.widget.Toolbar></com.google.android.material.appbar.CollapsingToolbarLayout><com.flyco.tablayout.CommonTabLayoutandroid:id="@+id/tablayout"android:layout_width="match_parent"android:layout_height="@dimen/dp_40"android:tag="tabTag"app:tl_iconVisible="false"app:tl_textBold="SELECT"app:layout_constraintLeft_toLeftOf="parent"app:layout_constraintRight_toRightOf="parent"app:tl_indicator_width="@dimen/dp_70"app:tl_indicator_color="@color/white"app:tl_indicator_height="@dimen/dp_2"app:tl_textsize="@dimen/sp_16"app:tl_textSelectColor="@color/white"app:tl_textUnselectColor="@color/white"></com.flyco.tablayout.CommonTabLayout></com.google.android.material.appbar.AppBarLayout><androidx.viewpager.widget.ViewPagerandroid:id="@+id/vp"android:layout_width="match_parent"android:layout_height="wrap_content"app:layout_behavior="@string/appbar_scrolling_view_behavior"></androidx.viewpager.widget.ViewPager></androidx.coordinatorlayout.widget.CoordinatorLayout>

在此很感谢博主迷人的羊驼的支持。重写的布局在他资源可下载,一定要注意布局中tag的设置。

大家喜欢的话可以点赞哦~~~