CollapsingToolbarLayout 内容与工具栏重叠
Posted
技术标签:
【中文标题】CollapsingToolbarLayout 内容与工具栏重叠【英文标题】：CollapsingToolbarLayout content overlap to toolbar 【发布时间】：2017-02-21 15:02:32 【问题描述】：我在使用 CollapsingToolbarLayout 时遇到问题。实际上我想粘贴工具栏，但它下面的内容处于视差模式，这样它可以在向上滚动时隐藏并在向下滚动时查看。它正在发生，但我的问题是视差线性布局中的内容与工具栏重叠。
我尝试了许多选项，将工具栏和线性布局添加到另一个垂直方向的线性布局中，但随后 collapsingToolbarLayout 停止工作。
我也尝试过添加 android:fitsSystemWindows="true" 但它也没有解决我的问题。我的布局代码如下：
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:custom="http://schemas.android.com/tools"
android:layout_
android:fitsSystemWindows="true"
android:layout_>
<android.support.design.widget.AppBarLayout
android:layout_
android:layout_
android:fitsSystemWindows="true"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapsing_toolbar"
android:layout_
android:layout_
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:titleEnabled="false">
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/toolbar"
android:layout_
android:layout_
android:background="?attr/colorPrimary"
android:minHeight="?attr/actionBarSize"
android:padding="0dp"
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"
app:layout_collapseMode="pin"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:titleTextAppearance="@style/ToolbarTitle"/>
<LinearLayout
android:fitsSystemWindows="true"
android:layout_below="@+id/toolbar"
android:layout_
android:layout_
android:layout_gravity="bottom"
app:layout_collapseMode="parallax">
<TextView
android:layout_
android:layout_
android:text="Email"
android:textColor="@color/white"
android:textSize="70dp"/>
</LinearLayout>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_
android:layout_
android:background="#ffe5e5e5"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<LinearLayout
android:layout_
android:layout_
android:orientation="vertical">
<android.support.v7.widget.CardView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:id="@+id/placeCard"
android:layout_
android:layout_
android:layout_margin="5dp"
card_view:cardCornerRadius="1dp"
card_view:cardElevation="3dp">
<LinearLayout
android:layout_
android:layout_
android:orientation="vertical"
android:padding="10dp">
<TextView
android:layout_
android:layout_
android:text="General"
android:textStyle="bold"/>
<LinearLayout
android:layout_
android:layout_
android:background="@color/gray_transparent3">
</LinearLayout>
<LinearLayout
android:layout_
android:layout_
android:orientation="horizontal"
android:paddingTop="10dp"
android:weightSum="10">
<TextView
android:layout_
android:layout_
android:layout_weight="5"
android:text="Model: "/>
<TextView
android:id="@+id/textViewModel"
android:layout_
android:layout_
android:layout_weight="5"
android:text=""/>
</LinearLayout>
<LinearLayout
android:layout_
android:layout_
android:orientation="horizontal"
android:paddingTop="5dp"
android:weightSum="10">
<TextView
android:layout_
android:layout_
android:layout_weight="5"
android:text="SKU: "/>
<TextView
android:id="@+id/textViewSKU"
android:layout_
android:layout_
android:layout_weight="5"
android:text=""/>
</LinearLayout>
<LinearLayout
android:layout_
android:layout_
android:orientation="horizontal"
android:paddingTop="5dp"
android:weightSum="10">
<TextView
android:layout_
android:layout_
android:layout_weight="5"
android:text="EAN: "/>
<TextView
android:id="@+id/textViewEAN"
android:layout_
android:layout_
android:layout_weight="5"
android:text=""/>
</LinearLayout>
<LinearLayout
android:layout_
android:layout_
android:orientation="horizontal"
android:paddingTop="5dp"
android:weightSum="10">
<TextView
android:layout_
android:layout_
android:layout_weight="5"
android:text="UPC: "/>
<TextView
android:id="@+id/textViewUPC"
android:layout_
android:layout_
android:layout_weight="5"
android:text=""/>
</LinearLayout>
<LinearLayout
android:layout_
android:layout_
android:orientation="horizontal"
android:paddingTop="5dp"
android:weightSum="10">
<TextView
android:layout_
android:layout_
android:layout_weight="5"
android:text="Manufacturer: "/>
<TextView
android:id="@+id/textViewManufacturer"
android:layout_
android:layout_
android:layout_weight="5"
android:text=""/>
</LinearLayout>
<LinearLayout
android:layout_
android:layout_
android:orientation="horizontal"
android:paddingTop="5dp"
android:weightSum="10">
<TextView
android:layout_
android:layout_
android:layout_weight="5"
android:text="Price: "/>
<TextView
android:id="@+id/textViewPrice"
android:layout_
android:layout_
android:layout_weight="5"
android:text=""/>
</LinearLayout>
<LinearLayout
android:layout_
android:layout_
android:orientation="horizontal"
android:paddingTop="5dp"
android:weightSum="10">
<TextView
android:layout_
android:layout_
android:layout_weight="5"
android:text="Quantity: "/>
<TextView
android:id="@+id/textViewQuantity"
android:layout_
android:layout_
android:layout_weight="5"
android:text=""/>
</LinearLayout>
<LinearLayout
android:layout_
android:layout_
android:orientation="horizontal"
android:paddingTop="5dp"
android:weightSum="10">
<TextView
android:layout_
android:layout_
android:layout_weight="5"
android:text="Status: "/>
<TextView
android:id="@+id/textViewStatus"
android:layout_
android:layout_
android:layout_weight="5"
android:text=""/>
</LinearLayout>
<LinearLayout
android:layout_
android:layout_
android:orientation="horizontal"
android:paddingTop="5dp"
android:weightSum="10">
<TextView
android:layout_
android:layout_
android:layout_weight="5"
android:text="Stock availability: "/>
<TextView
android:id="@+id/textViewStockAvailability"
android:layout_
android:layout_
android:layout_weight="5"
android:text=""/>
</LinearLayout>
<LinearLayout
android:layout_
android:layout_
android:orientation="horizontal"
android:paddingTop="5dp"
android:weightSum="10">
<TextView
android:layout_
android:layout_
android:layout_weight="5"
android:text="Total Ordered: "/>
<TextView
android:id="@+id/textViewTotalOrdered"
android:layout_
android:layout_
android:layout_weight="5"
android:text=""/>
</LinearLayout>
</LinearLayout>
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:id="@+id/placeCardDescription"
android:layout_
android:layout_
android:layout_margin="5dp"
card_view:cardCornerRadius="1dp"
card_view:cardElevation="3dp">
<LinearLayout
android:layout_
android:layout_
android:orientation="vertical"
android:padding="10dp">
<TextView
android:layout_
android:layout_
android:text="Description"
android:textStyle="bold"/>
<LinearLayout
android:layout_
android:layout_
android:background="@color/gray_transparent3">
</LinearLayout>
<TextView
android:id="@+id/textViewhtmlDescription"
android:layout_
android:layout_
android:paddingTop="10dp"
android:text=""
/>
</LinearLayout>
</android.support.v7.widget.CardView>
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
输出就像附件一样：
我需要内容“电子邮件”从工具栏底部开始，并具有折叠效果。
请帮我解决这个问题。
【问题讨论】：
【参考方案1】：你可以在 onCreate() 中这样做，这不会与标题重叠
final CollapsingToolbarLayout mCollapsingToolbar = (CollapsingToolbarLayout) findViewById(R.id.collapsingToolbar);
AppBarLayout appBarLayout = (AppBarLayout) findViewById(R.id.appBar);
appBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener()
@Override
public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset)
if (verticalOffset == 0 || verticalOffset <= toolbarInPerspectiveActivity.getHeight() && !toolbarInPerspectiveActivity.getTitle().equals(mCollapsedTitle))
mCollapsingToolbar.setTitle(mExpandedTitle);
else if (!toolbarInPerspectiveActivity.getTitle().equals(mExpandedTitle))
mCollapsingToolbar.setTitle(mCollapsedTitle);
);
并在设置工具栏标题的位置设置展开标题和折叠标题。
【讨论】：
以上是关于CollapsingToolbarLayout 内容与工具栏重叠的主要内容，如果未能解决你的问题，请参考以下文章
膨胀 CollapsingToolbarLayout 时出错
如何更改 CollapsingToolbarLayout 字体和大小？
以编程方式折叠或展开 CollapsingToolbarLayout
Android：CollapsingToolbarLayout 和 SwipeRefreshLayout 卡住