Question

我是Android开发的新手，我正在尝试使用Google的材料设计库中的collapsingToolBar。我是这个整个折叠工具栏的新手，但我按照一些在线教程，根据我的需要制作了一个xml记住了这些建议。我有一个包含5个片段的viewPager的主要活动，现在我希望当用户滚动活动时，viewPager应该占据全屏，而活动的其余部分是折叠工具栏。

活动的其余部分有两个imageViews，一个评级栏和一些TextViews。我不确定所有这些是否与折叠的工具栏布局兼容，所以我正在尝试。

This就是我的意思。这是我尝试实现coordinatorLayout和折叠工具栏之前的截图。

Here是我想从应用中输出的输出类型。此示例在viewpager中具有较少的选项卡，但基本折叠工具栏布局实现是相同的。以下是该应用的Playstore行，以防万一：play.google.com/store/apps/details？id = com.kkings.cinematics

这是我的活动的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">

                    <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>

这是此活动产生的结果类型：

i.stack.imgur.com/hPruf.png

我还没有对java进行任何更改。学分或任何其他课程不能显示任何内容。我怀疑这是由于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不会显示任何错误。

我似乎无法弄清楚我哪里出错了。我已经检查了StackOverFlow上的所有其他类似问题，到目前为止还没有解决方案。

这是我提到的教程：

www.youtube.com/watch?v=ssh09JbQ3nc

我在这里做错了什么？

Answer 1

要点是删除第一个RelativeLayout 必要的＆amp;在RelativeLayout之外添加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 - Material Design Library：如何使用collapsingToolBar布局

1 个答案: