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不顯示任何錯誤。

我似乎無法弄清楚我要出錯的地方。我已經檢查了StackOverFlow上的所有其他類似問題，至今爲止這些解決方案都沒有奏效。

，這裏是教程，我提的是：

www.youtube.com/watch?v=ssh09JbQ3nc

我到底做錯了什麼？

來源

2017-04-17 Priyansh Bhatt

點在去除第一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>

結果：

來源

2017-04-18 07:48:00 Mohsen

Android的 - 材料設計庫：如何使用collapsingToolBar佈局

回答

相關問題