如何让嵌套滚动元素与CollapsingToolbarLayout对齐,实现表单重叠背景图效果
提问内容
我设计的布局结构如下:
根元素为LinearLayout,依次包含CoordinatorLayout、AppBarLayout、CollapsingToolbarLayout以及NestedScrollView。
我想要实现目标设计(第二张图)的效果,让FirstName对应的EditText有一半区域重叠在背景图上,但是当前实现的效果如第一张图所示,对应的XML代码如下,恳请大家提供解决方案。


布局结构示例:
<LinearLayout> <CoordinateLayout> <AppBar> <CollapsingToolbarLayout> <ImageView> (背景图) <TextView> (页面标题) <ButtonView> (返回箭头) <Toolbar> </CollapsingToolbarLayout> </AppBarLayout> <NestedScrollView> <!-- 这里放滚动内容,即注册表单 --> 注:该布局根元素为垂直方向的LinearLayout </NestedScrollView> </CoordinateLayout> </LinearLayout>
完整XML代码片段:
<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:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" tools:context=".SignUpActivity"> <androidx.coordinatorlayout.widget.CoordinatorLayout android:layout_width="match_parent" android:layout_height="match_parent"> <com.google.android.material.appbar.AppBarLayout android:id="@+id/app_bar" android:layout_width="match_parent" android:layout_height="wrap_content" app:elevation="0dp" android:translationZ="0.1dp" android:fitsSystemWindows="true"> <com.google.android.material.appbar.CollapsingToolbarLayout android:id="@+id/toolbar_layout" android:layout_width="match_parent" android:layout_height="wrap_content" app:contentScrim="?attr/colorPrimary" app:layout_scrollFlags="scroll|enterAlways"> <!--背景图(山脉图片)--> <ImageView android:id="@+id/imageView2" android:layout_width="match_parent" android:layout_height="wrap_content" android:contentDescription="@string/name_app" android:scaleType="centerCrop" app:layout_collapseMode="parallax" app:srcCompat="@drawable/login_background" /> <!--页面标题(注册)即TextView--> <TextView android:id="@+id/tv_title_name" style="@style/activity_font_title" android:layout_width="wrap_content" android:layout_marginTop="@dimen/_50sdp" android:layout_height="wrap_content" android:layout_marginStart="@dimen/activity_start_margin" android:gravity="start|center_vertical" android:text="@string/sign_up" /> <!-- 返回箭头按钮--> <Button android:id="@+id/button_arrow" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginStart="@dimen/activity_start_margin" android:background="@null" android:clickable="true" android:drawableStart="@drawable/ic_arrow" android:gravity="start|center_vertical" /> <androidx.appcompat.widget.Toolbar android:layout_width="?attr/actionBarSize" android:layout_height="wrap_content" app:layout_collapseMode="pin" app:layout_scrollFlags="scroll|enterAlways" app:popupTheme="@style/ThemeOverlay.AppCompat.Light" /> </com.google.android.material.appbar.CollapsingToolbarLayout> </com.google.android.material.appbar.AppBarLayout> <androidx.core.widget.NestedScrollView android:layout_width="match_parent" android:layout_height="wrap_content" app:layout_behavior="@string/appbar_scrolling_view_behavior"> <include layout="@layout/signup_form" /> </androidx.core.widget.NestedScrollView> </androidx.coordinatorlayout.widget.CoordinatorLayout> </LinearLayout>
解决方案
修改NestedScrollView的属性即可实现目标效果,具体修改如下:
- 添加负的顶部边距,数值对应需要叠加的高度(通常为输入框高度的一半,若输入框高度为48dp则设置为-24dp)
- 添加对应数值的顶部内边距,避免内部内容被裁剪
- 关闭裁剪内边距属性,允许内容绘制到内边距区域
- 可选添加z轴平移属性,保证表单层级高于背景图
修改后的NestedScrollView代码:
<androidx.core.widget.NestedScrollView android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="-24dp" android:paddingTop="24dp" android:clipToPadding="false" android:translationZ="2dp" app:layout_behavior="@string/appbar_scrolling_view_behavior"> <include layout="@layout/signup_form" /> </androidx.core.widget.NestedScrollView>
如果折叠工具栏滚动时出现排版异常,对应调整CollapsingToolbarLayout的滚动属性和最小高度即可。
内容的提问来源于stack exchange,提问作者Hubby Tiwari
相关产品推荐
相关产品推荐

