标题文本与 CollapsingToolbarLayout 中的标题后退按钮重叠

Question

希望有人能帮忙解决这个问题。正如您在图片中看到的，标题与标题栏中的后退按钮重叠。我试图增加边距，但没有得到我需要的结果。我正在使用 CollapsingToolbarLayout，当它展开时会显示一个图像和 2 个带有标题和副标题的 TextView。当 CollapsingToolbarLayout 折叠时，我只想显示标题，以便用户可以有更多空间阅读 body。但是，当它折叠时，标题文本会与标题栏中的后退按钮重叠。我该如何解决这个问题？

编辑：我试过removing/modifying这一行：app:expandedTitleMarginStart="48dp"但这并没有解决问题。另外，我添加了相关代码，使 CollapsingToolbarLayout 在折叠时设置标题。

这是我的 xml 布局：

<android.support.design.widget.AppBarLayout
    android:id="@+id/app_bar_detail"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:fitsSystemWindows="true"
    app:theme="@style/AppTheme.AppBarOverlay">

    <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/toolbar_layout_detail"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true"
        app:contentScrim="?attr/colorPrimary"
        app:layout_scrollFlags="scroll|exitUntilCollapsed"
        app:expandedTitleMarginStart="48dp">

        <ImageView
            android:id="@+id/photo"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:scaleType="centerCrop" />

        <LinearLayout
            android:id="@+id/meta_bar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom"

            android:background="#333"
            android:orientation="vertical"
            android:paddingBottom="@dimen/detail_metabar_vert_padding"
            android:paddingLeft="@dimen/detail_inner_horiz_margin"
            android:paddingRight="@dimen/detail_inner_horiz_margin"
            android:paddingTop="@dimen/detail_metabar_vert_padding"
            app:layout_collapseMode="pin">

            <TextView
                android:id="@+id/article_title"
                style="?android:attr/textAppearanceLarge"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:fontFamily="sans-serif-condensed"
                android:lineSpacingMultiplier="0.9"
                android:paddingBottom="@dimen/detail_metabar_title_bottom_padding"
                android:textColor="#fff"
                android:textSize="@dimen/detail_title_text_size"
                android:textStyle="bold" />

            <TextView
                android:id="@+id/article_byline"
                style="?android:attr/textAppearanceSmall"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textColor="#8fff" />
        </LinearLayout>

        <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_detail"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:layout_collapseMode="pin"
            app:layout_scrollFlags="scroll|enterAlways">

        </android.support.v7.widget.Toolbar>

    </android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>

<android.support.v4.widget.NestedScrollView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior">

    <TextView
        android:id="@+id/article_body"
        style="?android:attr/textAppearanceMedium"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="@dimen/detail_inner_horiz_margin"
        android:layout_marginRight="@dimen/detail_inner_horiz_margin"
        android:lineSpacingMultiplier="@fraction/detail_body_line_spacing_multiplier"
        android:paddingBottom="@dimen/detail_body_bottom_margin"
        android:textColor="@color/ltgray"
        android:textColorLink="@color/theme_accent"
        android:textSize="@dimen/detail_body_text_size" />

</android.support.v4.widget.NestedScrollView>

<ImageButton
    android:id="@+id/share_fab"
    android:layout_width="56dp"
    android:layout_height="56dp"
    android:layout_gravity="bottom|end"
    android:layout_marginBottom="@dimen/fab_margin"
    android:layout_marginRight="@dimen/fab_margin"
    android:background="@drawable/add_fab_background"
    android:contentDescription="@string/action_share"
    android:elevation="@dimen/fab_elevation"
    android:src="@drawable/ic_share"
    android:stateListAnimator="@anim/fab_state_list_anim" />

这段代码使 CollapsingToolbarLayout 在折叠时设置标题：

mCollapsingToolbarLayout = (CollapsingToolbarLayout) mRootView.findViewById(R.id.toolbar_layout_detail);
    AppBarLayout mAppBarLayout = (AppBarLayout) mRootView.findViewById(R.id.app_bar_detail);

    mAppBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
        @Override
        public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
            if (verticalOffset == -mCollapsingToolbarLayout.getHeight() + mToolbar.getHeight()) {
                mCollapsingToolbarLayout.setTitle(titleView.getText());
            }else
                mCollapsingToolbarLayout.setTitle("");
        }
    });

Answer 1

尝试删除这一行：

app:expandedTitleMarginStart="48dp"

Updated:

将您的工具栏更新为：

<android.support.v7.widget.Toolbar
         android:layout_width="match_parent"
         android:layout_height="64dp"
         app:layout_collapseMode="pin"
         app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
         android:layout_alignParentLeft="true"
         android:layout_alignParentStart="true">

Answer 2

试试这个

<android.support.design.widget.AppBarLayout
                android:id="@+id/app_bar"
                android:layout_width="match_parent"
                android:layout_height="300dp"
                android:fitsSystemWindows="true"
                android:theme="@style/AppTheme.AppBarOverlay">

                <android.support.design.widget.CollapsingToolbarLayout
                    android:id="@+id/toolbar_layout"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:fitsSystemWindows="true"
                    app:contentScrim="?attr/colorPrimary"
                    app:layout_scrollFlags="scroll|enterAlways">

                    <TextView>
                    <yourOtherViews>

                   <android.support.v7.widget.Toolbar
                    android:id="@+id/toolbar"
                    android:layout_width="match_parent"
                    android:layout_height="?attr/actionBarSize"
                    app:layout_collapseMode="pin"
                    app:popupTheme="@style/AppTheme.PopupOverlay" />

                   </android.support.design.widget.CollapsingToolbarLayout>
 </android.support.design.widget.AppBarLayout>

Answer 3

通过在我的工具栏中添加以下行解决了这个问题：

<android.support.v7.widget.Toolbar
          ...
          app:contentInsetStart="72dp"

标题文本与 CollapsingToolbarLayout 中的标题后退按钮重叠

title text overlaps title back button in CollapsingToolbarLayout

android

android-toolbar

android-collapsingtoolbarlayout