Android的 - 材料设计库：如何使用collapsingToolBar布局

问题描述：

我是新来的Android开发，并试图在谷歌的材料设计库collapsingToolBar工作。我是这个整体崩溃工具栏的新手，但是我遵循了一些在线教程，根据我的需要制作了一个xml，并牢记这些建议。我有一个viewPager包含5个片段的主要活动，现在我希望viewPager应该占用全屏幕，当用户滚动活动，其余的活动是折叠工具栏。Android的 - 材料设计库：如何使用collapsingToolBar布局

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

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

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

这里是我的活动的xml，当前的（有崩溃toolar）：

<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中使用了一个工具栏。所以，我试图做同样的同样的事情，hereis新的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不显示任何错误。

我似乎无法弄清楚我要出错的地方。我已经检查了*上的所有其他类似问题，至今为止这些解决方案都没有奏效。

，这里是教程，我提的是：

www.youtube.com/watch?v=ssh09JbQ3nc

我到底做错了什么？

答

点在去除第一RelativeLayout它不是必要 &加入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的 - 材料设计库：如何使用collapsingToolBar布局

相关推荐