Android - Material 设计库：如何使用 collapsingToolBar 布局
Android - Material Design Library: How to use the collapsingToolBar Layout
我是 android 开发的新手，正在尝试使用 Google 的 material 设计库中的 collapsingToolBar。我是整个折叠工具栏的新手，但我遵循了一些在线教程并根据我的需要制作了一个 xml 并牢记建议。我有一个主 activity 和一个包含 5 个片段的 viewPager，现在我希望当用户滚动 activity 时 viewPager 应该占据全屏，而 activity 的其余部分是折叠工具栏.
activity 的其余部分有两个 imageView、一个评分栏和一些 TextView。我不确定是否所有这些都与折叠工具栏布局兼容，所以我正在尝试。
This 是我想说的。这是我尝试实现 coordinatorLayout 和折叠工具栏之前的屏幕截图。
Here 是我希望应用程序输出的类型。此示例在 viewpager 中的选项卡较少，但基本的折叠工具栏布局实现是相同的。这是应用程序的 Playstore 行，以防万一：play.google.com/store/apps/details?id=com.kkings.cinematics
这是我的 activity 的 xml，当前的 activity：
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<android.support.design.widget.AppBarLayout
android:id="@+id/tvDescAppBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:theme="@style/ThemeOverlay.AppCompact.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/tvDescCollapsingToolBar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
app:contentScrim="@color/chocolateBrown"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<RelativeLayout
android:id="@+id/tvDescTabLayout01"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@android:color/black"
android:paddingBottom="8dp">
<ImageView
android:id="@+id/tvBackgroundImage"
android:layout_width="match_parent"
android:layout_height="200dp"
android:adjustViewBounds="true" />
<ImageView
android:id="@+id/tvImageMain"
android:layout_width="120dp"
android:layout_height="150dp"
android:layout_alignParentTop="true"
android:layout_marginLeft="20dp"
android:layout_marginTop="100dp"
android:foregroundGravity="left" />
<TextView
android:id="@+id/tvDescHeading"
android:layout_width="140dp"
android:layout_height="wrap_content"
android:layout_below="@+id/tvBackgroundImage"
android:layout_marginLeft="8dp"
android:layout_marginTop="16dp"
android:layout_toRightOf="@id/tvImageMain"
android:textAppearance="@style/Base.TextAppearance.AppCompat.Large"
android:textColor="@android:color/white"
android:textStyle="bold|italic" />
<RatingBar
android:id="@+id/tvDescRating"
style="?android:attr/ratingBarStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_below="@id/tvBackgroundImage"
android:layout_marginRight="8dp"
android:layout_marginTop="30dp"
android:gravity="center_vertical"
android:numStars="5"
android:stepSize="0.5"
android:visibility="visible" />
<TextView
android:id="@+id/tvDescIdTag"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="@+id/tvDescReleaseDate"
android:layout_below="@+id/tvDescRating"
android:layout_marginBottom="8dp"
android:layout_toLeftOf="@+id/tvDescId"
android:text="ID: "
android:textColor="#D2D2D2"
android:textSize="15sp"
android:textStyle="italic|bold" />
<TextView
android:id="@+id/tvDescId"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignTop="@id/tvDescIdTag"
android:layout_below="@+id/tvDescRating"
android:layout_marginBottom="8dp"
android:layout_marginRight="16dp"
android:textColor="#D2D2D2"
android:textSize="15sp"
android:textStyle="bold|italic" />
<TextView
android:id="@+id/tvDescReleaseDate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/tvDescHeading"
android:layout_marginLeft="20dp"
android:layout_marginTop="8dp"
android:layout_toRightOf="@+id/tvImageMain"
android:textColor="#D6D6D6"
android:textSize="13sp"
android:textStyle="bold" />
</RelativeLayout>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/tvDescAppBarLayout">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<android.support.design.widget.TabLayout
android:id="@+id/tvDescTabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@android:color/darker_gray"
app:tabMode="fixed"
app:tabTextAppearance="@style/Base.TextAppearance.AppCompat.Medium"
app:tabTextColor="@android:color/black" />
<android.support.v4.view.ViewPager
android:id="@+id/tvDescViewPager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="@android:color/white" />
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
</RelativeLayout>
</android.support.design.widget.CoordinatorLayout>
这是 activity 产生的结果类型：
i.stack.imgur.com/hPruf.png
我没有对 java 进行任何更改。学分或任何其他 class 无法显示任何内容。我怀疑这是由于 recyclerView 和 nestedScroll View 之间的一些冲突造成的。
所以，无论如何，我看到在所有在线教程中，他们都在 collapsingToolbarLayout 中使用了一个工具栏。所以我尝试做同样的事情，这是新的 XML:
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<android.support.design.widget.AppBarLayout
android:id="@+id/tvDescAppBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:theme="@style/ThemeOverlay.AppCompact.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/tvDescCollapsingToolBar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
app:contentScrim="@color/chocolateBrown"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/transparentColor"
android:fitsSystemWindows="true"
app:layout_scrollFlags="scroll|enterAlways">
<RelativeLayout
android:id="@+id/tvDescTabLayout01"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@android:color/black"
android:paddingBottom="8dp">
<ImageView
android:id="@+id/tvBackgroundImage"
android:layout_width="match_parent"
android:layout_height="200dp"
android:adjustViewBounds="true" />
<ImageView
android:id="@+id/tvImageMain"
android:layout_width="120dp"
android:layout_height="150dp"
android:layout_alignParentTop="true"
android:layout_marginLeft="20dp"
android:layout_marginTop="100dp"
android:foregroundGravity="left" />
<TextView
android:id="@+id/tvDescHeading"
android:layout_width="140dp"
android:layout_height="wrap_content"
android:layout_below="@+id/tvBackgroundImage"
android:layout_marginLeft="8dp"
android:layout_marginTop="16dp"
android:layout_toRightOf="@id/tvImageMain"
android:textAppearance="@style/Base.TextAppearance.AppCompat.Large"
android:textColor="@android:color/white"
android:textStyle="bold|italic" />
<RatingBar
android:id="@+id/tvDescRating"
style="?android:attr/ratingBarStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_below="@id/tvBackgroundImage"
android:layout_marginRight="8dp"
android:layout_marginTop="30dp"
android:gravity="center_vertical"
android:numStars="5"
android:stepSize="0.5"
android:visibility="visible" />
<TextView
android:id="@+id/tvDescIdTag"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="@+id/tvDescReleaseDate"
android:layout_below="@+id/tvDescRating"
android:layout_marginBottom="8dp"
android:layout_toLeftOf="@+id/tvDescId"
android:text="ID: "
android:textColor="#D2D2D2"
android:textSize="15sp"
android:textStyle="italic|bold" />
<TextView
android:id="@+id/tvDescId"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignTop="@id/tvDescIdTag"
android:layout_below="@+id/tvDescRating"
android:layout_marginBottom="8dp"
android:layout_marginRight="16dp"
android:textColor="#D2D2D2"
android:textSize="15sp"
android:textStyle="bold|italic" />
<TextView
android:id="@+id/tvDescReleaseDate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/tvDescHeading"
android:layout_marginLeft="20dp"
android:layout_marginTop="8dp"
android:layout_toRightOf="@+id/tvImageMain"
android:textColor="#D6D6D6"
android:textSize="13sp"
android:textStyle="bold" />
</RelativeLayout>
</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="wrap_content"
android:layout_below="@+id/tvDescAppBarLayout">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<android.support.design.widget.TabLayout
android:id="@+id/tvDescTabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@android:color/darker_gray"
app:tabMode="fixed"
app:tabTextAppearance="@style/Base.TextAppearance.AppCompat.Medium"
app:tabTextColor="@android:color/black" />
<android.support.v4.view.ViewPager
android:id="@+id/tvDescViewPager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="@android:color/white" />
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
</RelativeLayout>
</android.support.design.widget.CoordinatorLayout>
这个工具栏让一切变得奇怪，这就是它的样子：
i.stack.imgur.com/PfqP9.png
此外，logcat 没有显示任何错误。
我似乎无法弄清楚我哪里出错了。我已经检查了 Whosebug 上的所有其他类似问题，none 的解决方案目前有效。
这是我提到的教程：
www.youtube.com/watch?v=ssh09JbQ3nc
我在这里做错了什么？
The point was in removing the first RelativeLayout which it wasn't
necessary & adding the RelativeLayout outside of the Toolbar.
现在应该可以工作了：
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/tvDescAppBarLayout">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<android.support.v4.view.ViewPager
android:id="@+id/tvDescViewPager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="@android:color/white" />
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
<android.support.design.widget.AppBarLayout
android:id="@+id/tvDescAppBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:theme="@style/ThemeOverlay.AppCompact.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/tvDescCollapsingToolBar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
app:contentScrim="@color/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
app:layout_scrollFlags="scroll|enterAlways" />
<RelativeLayout
android:id="@+id/tvDescTabLayout01"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingBottom="8dp">
<ImageView
android:id="@+id/tvBackgroundImage"
android:layout_width="match_parent"
android:layout_height="200dp"
android:adjustViewBounds="true"
android:background="@drawable/bg_intro" />
<ImageView
android:id="@+id/tvImageMain"
android:layout_width="120dp"
android:layout_height="150dp"
android:layout_alignParentTop="true"
android:layout_marginLeft="20dp"
android:layout_marginTop="100dp"
android:background="@drawable/bg"
android:foregroundGravity="left" />
<TextView
android:id="@+id/tvDescHeading"
android:layout_width="140dp"
android:layout_height="wrap_content"
android:layout_below="@+id/tvBackgroundImage"
android:layout_marginLeft="8dp"
android:layout_marginTop="16dp"
android:layout_toRightOf="@id/tvImageMain"
android:text="This is theheading"
android:textAppearance="@style/Base.TextAppearance.AppCompat.Large"
android:textColor="@android:color/white"
android:textStyle="bold|italic" />
<RatingBar
android:id="@+id/tvDescRating"
style="?android:attr/ratingBarStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_below="@id/tvBackgroundImage"
android:layout_marginRight="8dp"
android:layout_marginTop="30dp"
android:gravity="center_vertical"
android:numStars="5"
android:stepSize="0.5"
android:visibility="visible" />
<TextView
android:id="@+id/tvDescIdTag"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="@+id/tvDescReleaseDate"
android:layout_below="@+id/tvDescRating"
android:layout_marginBottom="8dp"
android:layout_toLeftOf="@+id/tvDescId"
android:text="ID: "
android:textColor="#D2D2D2"
android:textSize="15sp"
android:textStyle="italic|bold" />
<TextView
android:id="@+id/tvDescId"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignTop="@id/tvDescIdTag"
android:layout_below="@+id/tvDescRating"
android:layout_marginBottom="8dp"
android:layout_marginRight="16dp"
android:textColor="#D2D2D2"
android:textSize="15sp"
android:textStyle="bold|italic" />
<TextView
android:id="@+id/tvDescReleaseDate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/tvDescHeading"
android:layout_marginLeft="20dp"
android:layout_marginTop="8dp"
android:layout_toRightOf="@+id/tvImageMain"
android:textColor="#D6D6D6"
android:textSize="13sp"
android:textStyle="bold" />
</RelativeLayout>
</android.support.design.widget.CollapsingToolbarLayout>
<android.support.design.widget.TabLayout
android:id="@+id/tvDescTabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:background="@android:color/darker_gray"
app:tabMode="fixed"
app:tabTextAppearance="@style/Base.TextAppearance.AppCompat.Medium"
app:tabTextColor="@android:color/black" />
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>
结果：
我是 android 开发的新手，正在尝试使用 Google 的 material 设计库中的 collapsingToolBar。我是整个折叠工具栏的新手，但我遵循了一些在线教程并根据我的需要制作了一个 xml 并牢记建议。我有一个主 activity 和一个包含 5 个片段的 viewPager，现在我希望当用户滚动 activity 时 viewPager 应该占据全屏，而 activity 的其余部分是折叠工具栏.
activity 的其余部分有两个 imageView、一个评分栏和一些 TextView。我不确定是否所有这些都与折叠工具栏布局兼容，所以我正在尝试。
This 是我想说的。这是我尝试实现 coordinatorLayout 和折叠工具栏之前的屏幕截图。
Here 是我希望应用程序输出的类型。此示例在 viewpager 中的选项卡较少，但基本的折叠工具栏布局实现是相同的。这是应用程序的 Playstore 行，以防万一：play.google.com/store/apps/details?id=com.kkings.cinematics
这是我的 activity 的 xml，当前的 activity：
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<android.support.design.widget.AppBarLayout
android:id="@+id/tvDescAppBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:theme="@style/ThemeOverlay.AppCompact.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/tvDescCollapsingToolBar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
app:contentScrim="@color/chocolateBrown"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<RelativeLayout
android:id="@+id/tvDescTabLayout01"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@android:color/black"
android:paddingBottom="8dp">
<ImageView
android:id="@+id/tvBackgroundImage"
android:layout_width="match_parent"
android:layout_height="200dp"
android:adjustViewBounds="true" />
<ImageView
android:id="@+id/tvImageMain"
android:layout_width="120dp"
android:layout_height="150dp"
android:layout_alignParentTop="true"
android:layout_marginLeft="20dp"
android:layout_marginTop="100dp"
android:foregroundGravity="left" />
<TextView
android:id="@+id/tvDescHeading"
android:layout_width="140dp"
android:layout_height="wrap_content"
android:layout_below="@+id/tvBackgroundImage"
android:layout_marginLeft="8dp"
android:layout_marginTop="16dp"
android:layout_toRightOf="@id/tvImageMain"
android:textAppearance="@style/Base.TextAppearance.AppCompat.Large"
android:textColor="@android:color/white"
android:textStyle="bold|italic" />
<RatingBar
android:id="@+id/tvDescRating"
style="?android:attr/ratingBarStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_below="@id/tvBackgroundImage"
android:layout_marginRight="8dp"
android:layout_marginTop="30dp"
android:gravity="center_vertical"
android:numStars="5"
android:stepSize="0.5"
android:visibility="visible" />
<TextView
android:id="@+id/tvDescIdTag"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="@+id/tvDescReleaseDate"
android:layout_below="@+id/tvDescRating"
android:layout_marginBottom="8dp"
android:layout_toLeftOf="@+id/tvDescId"
android:text="ID: "
android:textColor="#D2D2D2"
android:textSize="15sp"
android:textStyle="italic|bold" />
<TextView
android:id="@+id/tvDescId"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignTop="@id/tvDescIdTag"
android:layout_below="@+id/tvDescRating"
android:layout_marginBottom="8dp"
android:layout_marginRight="16dp"
android:textColor="#D2D2D2"
android:textSize="15sp"
android:textStyle="bold|italic" />
<TextView
android:id="@+id/tvDescReleaseDate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/tvDescHeading"
android:layout_marginLeft="20dp"
android:layout_marginTop="8dp"
android:layout_toRightOf="@+id/tvImageMain"
android:textColor="#D6D6D6"
android:textSize="13sp"
android:textStyle="bold" />
</RelativeLayout>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/tvDescAppBarLayout">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<android.support.design.widget.TabLayout
android:id="@+id/tvDescTabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@android:color/darker_gray"
app:tabMode="fixed"
app:tabTextAppearance="@style/Base.TextAppearance.AppCompat.Medium"
app:tabTextColor="@android:color/black" />
<android.support.v4.view.ViewPager
android:id="@+id/tvDescViewPager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="@android:color/white" />
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
</RelativeLayout>
</android.support.design.widget.CoordinatorLayout>
这是 activity 产生的结果类型：
i.stack.imgur.com/hPruf.png
我没有对 java 进行任何更改。学分或任何其他 class 无法显示任何内容。我怀疑这是由于 recyclerView 和 nestedScroll View 之间的一些冲突造成的。
所以，无论如何，我看到在所有在线教程中，他们都在 collapsingToolbarLayout 中使用了一个工具栏。所以我尝试做同样的事情，这是新的 XML:
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<android.support.design.widget.AppBarLayout
android:id="@+id/tvDescAppBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:theme="@style/ThemeOverlay.AppCompact.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/tvDescCollapsingToolBar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
app:contentScrim="@color/chocolateBrown"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/transparentColor"
android:fitsSystemWindows="true"
app:layout_scrollFlags="scroll|enterAlways">
<RelativeLayout
android:id="@+id/tvDescTabLayout01"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@android:color/black"
android:paddingBottom="8dp">
<ImageView
android:id="@+id/tvBackgroundImage"
android:layout_width="match_parent"
android:layout_height="200dp"
android:adjustViewBounds="true" />
<ImageView
android:id="@+id/tvImageMain"
android:layout_width="120dp"
android:layout_height="150dp"
android:layout_alignParentTop="true"
android:layout_marginLeft="20dp"
android:layout_marginTop="100dp"
android:foregroundGravity="left" />
<TextView
android:id="@+id/tvDescHeading"
android:layout_width="140dp"
android:layout_height="wrap_content"
android:layout_below="@+id/tvBackgroundImage"
android:layout_marginLeft="8dp"
android:layout_marginTop="16dp"
android:layout_toRightOf="@id/tvImageMain"
android:textAppearance="@style/Base.TextAppearance.AppCompat.Large"
android:textColor="@android:color/white"
android:textStyle="bold|italic" />
<RatingBar
android:id="@+id/tvDescRating"
style="?android:attr/ratingBarStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_below="@id/tvBackgroundImage"
android:layout_marginRight="8dp"
android:layout_marginTop="30dp"
android:gravity="center_vertical"
android:numStars="5"
android:stepSize="0.5"
android:visibility="visible" />
<TextView
android:id="@+id/tvDescIdTag"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="@+id/tvDescReleaseDate"
android:layout_below="@+id/tvDescRating"
android:layout_marginBottom="8dp"
android:layout_toLeftOf="@+id/tvDescId"
android:text="ID: "
android:textColor="#D2D2D2"
android:textSize="15sp"
android:textStyle="italic|bold" />
<TextView
android:id="@+id/tvDescId"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignTop="@id/tvDescIdTag"
android:layout_below="@+id/tvDescRating"
android:layout_marginBottom="8dp"
android:layout_marginRight="16dp"
android:textColor="#D2D2D2"
android:textSize="15sp"
android:textStyle="bold|italic" />
<TextView
android:id="@+id/tvDescReleaseDate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/tvDescHeading"
android:layout_marginLeft="20dp"
android:layout_marginTop="8dp"
android:layout_toRightOf="@+id/tvImageMain"
android:textColor="#D6D6D6"
android:textSize="13sp"
android:textStyle="bold" />
</RelativeLayout>
</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="wrap_content"
android:layout_below="@+id/tvDescAppBarLayout">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<android.support.design.widget.TabLayout
android:id="@+id/tvDescTabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@android:color/darker_gray"
app:tabMode="fixed"
app:tabTextAppearance="@style/Base.TextAppearance.AppCompat.Medium"
app:tabTextColor="@android:color/black" />
<android.support.v4.view.ViewPager
android:id="@+id/tvDescViewPager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="@android:color/white" />
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
</RelativeLayout>
</android.support.design.widget.CoordinatorLayout>
这个工具栏让一切变得奇怪，这就是它的样子：
i.stack.imgur.com/PfqP9.png
此外，logcat 没有显示任何错误。
我似乎无法弄清楚我哪里出错了。我已经检查了 Whosebug 上的所有其他类似问题，none 的解决方案目前有效。
这是我提到的教程：
www.youtube.com/watch?v=ssh09JbQ3nc
我在这里做错了什么？
The point was in removing the first
RelativeLayoutwhich it wasn't necessary & adding theRelativeLayoutoutside of theToolbar.
现在应该可以工作了：
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/tvDescAppBarLayout">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<android.support.v4.view.ViewPager
android:id="@+id/tvDescViewPager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="@android:color/white" />
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
<android.support.design.widget.AppBarLayout
android:id="@+id/tvDescAppBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:theme="@style/ThemeOverlay.AppCompact.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/tvDescCollapsingToolBar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
app:contentScrim="@color/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
app:layout_scrollFlags="scroll|enterAlways" />
<RelativeLayout
android:id="@+id/tvDescTabLayout01"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingBottom="8dp">
<ImageView
android:id="@+id/tvBackgroundImage"
android:layout_width="match_parent"
android:layout_height="200dp"
android:adjustViewBounds="true"
android:background="@drawable/bg_intro" />
<ImageView
android:id="@+id/tvImageMain"
android:layout_width="120dp"
android:layout_height="150dp"
android:layout_alignParentTop="true"
android:layout_marginLeft="20dp"
android:layout_marginTop="100dp"
android:background="@drawable/bg"
android:foregroundGravity="left" />
<TextView
android:id="@+id/tvDescHeading"
android:layout_width="140dp"
android:layout_height="wrap_content"
android:layout_below="@+id/tvBackgroundImage"
android:layout_marginLeft="8dp"
android:layout_marginTop="16dp"
android:layout_toRightOf="@id/tvImageMain"
android:text="This is theheading"
android:textAppearance="@style/Base.TextAppearance.AppCompat.Large"
android:textColor="@android:color/white"
android:textStyle="bold|italic" />
<RatingBar
android:id="@+id/tvDescRating"
style="?android:attr/ratingBarStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_below="@id/tvBackgroundImage"
android:layout_marginRight="8dp"
android:layout_marginTop="30dp"
android:gravity="center_vertical"
android:numStars="5"
android:stepSize="0.5"
android:visibility="visible" />
<TextView
android:id="@+id/tvDescIdTag"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="@+id/tvDescReleaseDate"
android:layout_below="@+id/tvDescRating"
android:layout_marginBottom="8dp"
android:layout_toLeftOf="@+id/tvDescId"
android:text="ID: "
android:textColor="#D2D2D2"
android:textSize="15sp"
android:textStyle="italic|bold" />
<TextView
android:id="@+id/tvDescId"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignTop="@id/tvDescIdTag"
android:layout_below="@+id/tvDescRating"
android:layout_marginBottom="8dp"
android:layout_marginRight="16dp"
android:textColor="#D2D2D2"
android:textSize="15sp"
android:textStyle="bold|italic" />
<TextView
android:id="@+id/tvDescReleaseDate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/tvDescHeading"
android:layout_marginLeft="20dp"
android:layout_marginTop="8dp"
android:layout_toRightOf="@+id/tvImageMain"
android:textColor="#D6D6D6"
android:textSize="13sp"
android:textStyle="bold" />
</RelativeLayout>
</android.support.design.widget.CollapsingToolbarLayout>
<android.support.design.widget.TabLayout
android:id="@+id/tvDescTabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:background="@android:color/darker_gray"
app:tabMode="fixed"
app:tabTextAppearance="@style/Base.TextAppearance.AppCompat.Medium"
app:tabTextColor="@android:color/black" />
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>
结果：