摺疊與圖像，標籤工具欄和FAB

我在試圖實現工具欄，如下面的圖像的困難：摺疊與圖像，標籤工具欄和FAB

不過，我已經無法添加浮動操作按鈕一樣顯示在圖片。我正在使用Google設計支持庫。有任何想法嗎？

我當前的XML代碼：

<?xml version="1.0" encoding="utf-8"?> 
<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="match_parent" 
    android:layout_height="match_parent"> 

    <android.support.design.widget.AppBarLayout 
     android:id="@+id/appbar" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content"> 

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

      <FrameLayout 
       android:layout_width="match_parent" 
       android:layout_height="250dp" 
       app:layout_collapseMode="parallax" 
       app:layout_collapseParallaxMultiplier="0.7"> 

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

       <View 
        android:layout_width="match_parent" 
        android:layout_height="match_parent" 
        android:background="#20000000" /> 

      </FrameLayout> 


      <android.support.v7.widget.Toolbar 
       android:id="@+id/toolbar" 
       style="@style/Widget.PinList.ActionBar.Transparent" 
       android:layout_width="match_parent" 
       android:layout_height="?attr/actionBarSize" 
       app:layout_collapseMode="pin" /> 

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

     <android.support.design.widget.CollapsingToolbarLayout 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      app:layout_scrollFlags="scroll|enterAlways"> 

      <android.support.design.widget.TabLayout 
       android:id="@+id/tabs" 
       style="@style/PinListTabLayout" 
       android:layout_width="match_parent" 
       android:layout_height="60dp" 
       app:layout_collapseMode="pin" /> 

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

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

    <android.support.v4.view.ViewPager 
     android:id="@+id/viewPager" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:background="@color/background" 
     app:layout_behavior="@string/appbar_scrolling_view_behavior" /> 
</android.support.design.widget.CoordinatorLayout>

來源

2015-09-13 dmacan23

你爲什麼要使用兩個CollapsingToolbarLayout？我想你應該只有一個 – buzeeg

使用在這種情況下，TabLayout總是重疊的FrameLayout裏。我試過很多的組合只有一個CollapsingToolbarLayout，但他們沒有工作對我來說 – dmacan23

我已經找到了解決辦法。我認爲app:layout_anchorGravity只能引用類似的RelativeLayout的定位屬性的元素。但顯然，我錯了。我只在以前的xml中在ViewPager上添加了以上代碼：

<android.support.design.widget.FloatingActionButton 
    android:id="@+id/fab" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:layout_marginEnd="10dp" 
    android:layout_marginRight="10dp" 
    android:src="@drawable/ic_action_add" 
    app:layout_anchor="@id/collapsing_toolbar" 
    app:layout_anchorGravity="bottom|right|end" />

來源

2015-09-13 14:07:43 dmacan23

請參閱我的解決方案here。它適用於API 14-23。希望能幫助你

來源

2015-09-30 00:48:53

摺疊與圖像，標籤工具欄和FAB

回答

相關問題