Andorid 工作记录： CoordinatorLayout 之 吸顶 和 折叠

Aivan_Uy
176 阅读5分钟 
<?xml version="1.0" encoding="utf-8"?>  
<FrameLayout 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/page_bg_color">  
  
<com.scwang.smart.refresh.layout.SmartRefreshLayout  
android:id="@+id/refreshLayout"  
android:layout_width="match_parent"  
android:layout_height="match_parent"  
android:background="@color/transparent">  
  
<com.scwang.smart.refresh.header.MaterialHeader  
android:layout_width="match_parent"  
android:layout_height="wrap_content" />  
  
<androidx.coordinatorlayout.widget.CoordinatorLayout  
android:layout_width="match_parent"  
android:layout_height="match_parent">  
  
<com.google.android.material.appbar.AppBarLayout  
android:id="@+id/frontAppBarLayout"  
android:layout_width="match_parent"  
android:layout_height="wrap_content"  
android:background="@color/transparent">  
  
  
<com.google.android.material.appbar.CollapsingToolbarLayout  
android:layout_width="match_parent"  
android:layout_height="wrap_content"  
app:layout_scrollFlags="scroll|exitUntilCollapsed">  
  
<androidx.constraintlayout.widget.ConstraintLayout  
android:layout_width="match_parent"  
android:layout_height="wrap_content"  
app:layout_collapseMode="parallax">  
<!--搜索和轮播图-->  
<androidx.constraintlayout.widget.ConstraintLayout  
android:id="@+id/frontBannerCl"  
android:layout_width="0dp"  
android:layout_height="0dp"  
android:background="@drawable/shape_front_top_bg"  
android:paddingStart="15dp"  
android:paddingTop="20dp"  
android:paddingEnd="15dp"  
app:layout_constraintDimensionRatio="375:260"  
app:layout_constraintEnd_toEndOf="parent"  
app:layout_constraintStart_toStartOf="parent"  
app:layout_constraintTop_toTopOf="parent">  
  
<ImageView  
android:id="@+id/logo"  
android:layout_width="70dp"  
android:layout_height="0dp"  
android:contentDescription="@null"  
android:src="@drawable/ic_front_logo"  
app:layout_constraintBottom_toBottomOf="@+id/frontSearchEdt"  
app:layout_constraintDimensionRatio="63.5:22"  
app:layout_constraintStart_toStartOf="parent"  
app:layout_constraintTop_toTopOf="@+id/frontSearchEdt"  
app:layout_constraintWidth_percent="0.18955223880597" />  
  
<androidx.appcompat.widget.AppCompatEditText  
android:id="@+id/frontSearchEdt"  
android:layout_width="0dp"  
android:layout_height="30dp"  
android:layout_marginStart="10dp"  
android:background="@drawable/shape_front_search_bg"  
android:drawableStart="@drawable/ic_search"  
android:drawablePadding="5dp"  
android:gravity="center_vertical"  
android:hint="@string/front_search_hint"  
android:paddingStart="15dp"  
android:paddingEnd="15dp"  
android:textSize="13sp"  
app:layout_constraintEnd_toEndOf="parent"  
app:layout_constraintStart_toEndOf="@+id/logo"  
app:layout_constraintTop_toTopOf="parent" />  
  
<androidx.cardview.widget.CardView  
android:id="@+id/noticeBannerRoot"  
android:layout_width="0dp"  
android:layout_height="0dp"  
app:cardBackgroundColor="@color/white"  
app:cardCornerRadius="8dp"  
app:cardElevation="0dp"  
app:cardPreventCornerOverlap="true"  
app:cardUseCompatPadding="false"  
app:contentPadding="0dp"  
app:layout_constraintBottom_toBottomOf="parent"  
app:layout_constraintDimensionRatio="345:145"  
app:layout_constraintEnd_toEndOf="parent"  
app:layout_constraintStart_toStartOf="parent"  
app:layout_constraintTop_toBottomOf="@+id/frontSearchEdt">  
<!-- https://github.com/youth5201314/banner -->  
<com.youth.banner.Banner  
android:id="@+id/noticeBanner"  
android:layout_width="match_parent"  
android:layout_height="match_parent"  
app:banner_auto_loop="true"  
app:banner_infinite_loop="true" />  
  
</androidx.cardview.widget.CardView>  
  
</androidx.constraintlayout.widget.ConstraintLayout>  
  
<!--新闻快报-->  
<LinearLayout  
android:id="@+id/frontNewsLL"  
android:layout_width="0dp"  
android:layout_height="40dp"  
android:layout_marginStart="15dp"  
android:layout_marginEnd="15dp"  
android:background="@drawable/shape_radius_white_bg"  
android:gravity="center_vertical"  
android:orientation="horizontal"  
android:paddingStart="8dp"  
android:paddingEnd="8dp"  
app:layout_constraintEnd_toEndOf="parent"  
app:layout_constraintStart_toStartOf="parent"  
app:layout_constraintTop_toBottomOf="@+id/frontBannerCl">  
  
<ImageView  
android:layout_width="wrap_content"  
android:layout_height="wrap_content"  
android:contentDescription="@null"  
android:src="@drawable/ic_xinjian" />  
  
<View  
android:layout_width="1dp"  
android:layout_height="10dp"  
android:layout_marginStart="4dp"  
android:layout_marginEnd="5dp"  
android:background="@color/gray" />  
  
<com.youth.banner.Banner  
android:id="@+id/frontNewsBanner"  
android:layout_width="0dp"  
android:layout_height="match_parent"  
android:layout_weight="1" />  
  
<ImageView  
android:layout_width="wrap_content"  
android:layout_height="wrap_content"  
android:contentDescription="@null"  
android:src="@drawable/ic_arrow_right_gray" />  
  
</LinearLayout>  
  
<!--分类-->  
<FrameLayout  
android:id="@+id/frontCategoryFL"  
android:layout_width="0dp"  
android:layout_height="wrap_content"  
android:layout_marginStart="15dp"  
android:layout_marginTop="15dp"  
android:layout_marginEnd="15dp"  
android:background="@drawable/shape_radius_white_bg"  
android:paddingStart="5dp"  
android:paddingTop="10dp"  
android:paddingEnd="5dp"  
android:paddingBottom="10dp"  
app:layout_constraintEnd_toEndOf="parent"  
app:layout_constraintStart_toStartOf="parent"  
app:layout_constraintTop_toBottomOf="@+id/frontNewsLL">  
  
<androidx.recyclerview.widget.RecyclerView  
android:id="@+id/frontCategoryRV"  
android:layout_width="match_parent"  
android:layout_height="match_parent"  
app:layoutManager="androidx.recyclerview.widget.GridLayoutManager"  
tools:itemCount="1"  
tools:listitem="@layout/adapter_front_category_item" />  
  
</FrameLayout>  
  
<!--红包-->  
<androidx.constraintlayout.widget.ConstraintLayout  
android:id="@+id/frontRedEnvelopeCl"  
android:layout_width="0dp"  
android:layout_height="0dp"  
android:layout_marginStart="15dp"  
android:layout_marginTop="15dp"  
android:layout_marginEnd="15dp"  
android:background="@drawable/ic_front_red_envelope_bg"  
app:layout_constraintDimensionRatio="345:119"  
app:layout_constraintEnd_toEndOf="parent"  
app:layout_constraintStart_toStartOf="parent"  
app:layout_constraintTop_toBottomOf="@+id/frontCategoryFL">  
  
</androidx.constraintlayout.widget.ConstraintLayout>  
  
<!--秒杀-->  
<androidx.constraintlayout.widget.ConstraintLayout  
android:id="@+id/frontFlashSaleCl"  
android:layout_width="0dp"  
android:layout_height="0dp"  
android:layout_marginStart="15dp"  
android:layout_marginTop="15dp"  
android:layout_marginEnd="15dp"  
android:background="@drawable/ic_front_flash_sale_bg"  
app:layout_constraintDimensionRatio="345:210"  
app:layout_constraintEnd_toEndOf="parent"  
app:layout_constraintStart_toStartOf="parent"  
app:layout_constraintTop_toBottomOf="@+id/frontRedEnvelopeCl">  
  
</androidx.constraintlayout.widget.ConstraintLayout>  
  
<!--拼团-->  
<androidx.constraintlayout.widget.ConstraintLayout  
android:id="@+id/frontGroupSharingCl"  
android:layout_width="0dp"  
android:layout_height="0dp"  
android:layout_marginStart="15dp"  
android:layout_marginTop="15dp"  
android:layout_marginEnd="15dp"  
android:background="@drawable/shape_radius_white_bg"  
app:layout_constraintDimensionRatio="345:203"  
app:layout_constraintEnd_toEndOf="parent"  
app:layout_constraintStart_toStartOf="parent"  
app:layout_constraintTop_toBottomOf="@+id/frontFlashSaleCl">  
  
<FrameLayout  
android:layout_width="0dp"  
android:layout_height="0dp"  
android:background="@drawable/ic_front_group_sharing_bg"  
app:layout_constraintDimensionRatio="690:156"  
app:layout_constraintEnd_toEndOf="parent"  
app:layout_constraintStart_toStartOf="parent"  
app:layout_constraintTop_toTopOf="parent" />  
  
</androidx.constraintlayout.widget.ConstraintLayout>  
  
<!--砍价活动-->  
<androidx.constraintlayout.widget.ConstraintLayout  
android:id="@+id/frontBargainActivityCl"  
android:layout_width="0dp"  
android:layout_height="0dp"  
android:layout_marginStart="15dp"  
android:layout_marginTop="15dp"  
android:layout_marginEnd="15dp"  
android:background="@drawable/shape_radius_white_bg"  
app:layout_constraintDimensionRatio="345:203"  
app:layout_constraintEnd_toEndOf="parent"  
app:layout_constraintStart_toStartOf="parent"  
app:layout_constraintTop_toBottomOf="@+id/frontGroupSharingCl">  
  
<FrameLayout  
android:layout_width="0dp"  
android:layout_height="0dp"  
android:background="@drawable/ic_front_bargain_activity_bg"  
app:layout_constraintDimensionRatio="690:156"  
app:layout_constraintEnd_toEndOf="parent"  
app:layout_constraintStart_toStartOf="parent"  
app:layout_constraintTop_toTopOf="parent" />  
  
<ImageView  
android:layout_width="70dp"  
android:layout_height="0dp"  
android:layout_marginStart="10dp"  
android:layout_marginTop="10dp"  
android:contentDescription="@null"  
android:src="@drawable/ic_front_bargain_activity"  
app:layout_constraintDimensionRatio="130:30"  
app:layout_constraintStart_toStartOf="parent"  
app:layout_constraintTop_toTopOf="parent" />  
  
</androidx.constraintlayout.widget.ConstraintLayout>  
</androidx.constraintlayout.widget.ConstraintLayout>  
  
<androidx.appcompat.widget.Toolbar  
android:id="@+id/frontTitleTv"  
android:layout_width="match_parent"  
android:layout_height="wrap_content"  
android:alpha="0"  
android:background="@drawable/shape_front_top_bg"  
app:layout_collapseMode="pin">  
  
<androidx.constraintlayout.widget.ConstraintLayout  
android:layout_width="match_parent"  
android:layout_height="80dp"  
android:paddingTop="35dp"  
android:paddingEnd="15dp"  
app:layout_constraintEnd_toEndOf="parent"  
app:layout_constraintStart_toStartOf="parent"  
app:layout_constraintTop_toTopOf="parent">  
  
<ImageView  
android:id="@+id/logoTitle"  
android:layout_width="70dp"  
android:layout_height="0dp"  
android:contentDescription="@null"  
android:src="@drawable/ic_front_logo"  
app:layout_constraintBottom_toBottomOf="@+id/frontSearchEdtTitle"  
app:layout_constraintDimensionRatio="63.5:22"  
app:layout_constraintStart_toStartOf="parent"  
app:layout_constraintTop_toTopOf="@+id/frontSearchEdtTitle"  
app:layout_constraintWidth_percent="0.18955223880597" />  
  
<androidx.appcompat.widget.AppCompatEditText  
android:id="@+id/frontSearchEdtTitle"  
android:layout_width="0dp"  
android:layout_height="30dp"  
android:layout_marginStart="10dp"  
android:background="@drawable/shape_front_search_bg"  
android:drawableStart="@drawable/ic_search"  
android:drawablePadding="5dp"  
android:gravity="center_vertical"  
android:hint="@string/front_search_hint"  
android:paddingStart="15dp"  
android:paddingEnd="15dp"  
android:textSize="13sp"  
app:layout_constraintEnd_toEndOf="parent"  
app:layout_constraintStart_toEndOf="@+id/logoTitle"  
app:layout_constraintTop_toTopOf="parent" />  
  
  
</androidx.constraintlayout.widget.ConstraintLayout>  
</androidx.appcompat.widget.Toolbar>  
</com.google.android.material.appbar.CollapsingToolbarLayout>  
  
</com.google.android.material.appbar.AppBarLayout>  
  
<LinearLayout  
android:id="@+id/frontProductLL"  
android:layout_width="match_parent"  
android:layout_height="match_parent"  
android:layout_marginStart="15dp"  
android:layout_marginTop="5dp"  
android:layout_marginEnd="15dp"  
android:orientation="vertical"  
app:layout_behavior="@string/appbar_scrolling_view_behavior"  
app:layout_constraintEnd_toEndOf="parent"  
app:layout_constraintStart_toStartOf="parent"  
app:layout_constraintTop_toTopOf="parent"  
app:layout_scrollFlags="scroll">  
  
<com.google.android.material.tabs.TabLayout  
android:id="@+id/orderListTab"  
android:layout_width="match_parent"  
android:layout_height="wrap_content"  
android:layout_marginStart="15dp"  
android:background="@color/transparent"  
app:tabBackground="@color/transparent"  
app:tabGravity="start"  
app:tabIndicatorColor="@color/red"  
app:tabIndicatorFullWidth="true"  
app:tabIndicatorHeight="2dp"  
app:tabMode="scrollable"  
app:tabSelectedTextColor="@color/red"  
app:tabTextColor="@color/text_black"  
app:tabUnboundedRipple="true" />  
  
<androidx.viewpager2.widget.ViewPager2  
android:id="@+id/orderListVP2"  
android:layout_width="match_parent"  
android:layout_height="0dp"  
android:layout_marginTop="10dp"  
android:layout_weight="1"  
android:orientation="horizontal" />  
  
  
<TextView  
android:layout_width="wrap_content"  
android:layout_height="wrap_content"  
android:layout_gravity="center_horizontal"  
android:layout_marginTop="10dp"  
android:layout_marginBottom="10dp"  
android:text="@string/front_bottom_text"  
android:textColor="#999999"  
android:textSize="13sp"  
app:layout_constraintBottom_toBottomOf="parent"  
app:layout_constraintEnd_toEndOf="parent"  
app:layout_constraintStart_toStartOf="parent" />  
</LinearLayout>  
  
</androidx.coordinatorlayout.widget.CoordinatorLayout>  
  
</com.scwang.smart.refresh.layout.SmartRefreshLayout>  
  
</FrameLayout>

binding.frontAppBarLayout.addOnOffsetChangedListener { appBarLayout, verticalOffset ->  
//这个是计算App bar Layout的总高度的API  
val totalScrollRange = appBarLayout.totalScrollRange  
val height = binding.frontBannerCl.height  
val offset = verticalOffset.toFloat()  
if (offset <= height) {  
val ratio = Math.abs(verticalOffset.toFloat() / height)  
binding.frontTitleTv.alpha = ratio  
}  
}
avatar
文章
阅读
粉丝