如何在摺疊工具欄佈局下添加viewpager和tablayout

Question

我在stackoverflow中嘗試了此問題的所有解決方案，但沒有任何幫助。所有的 首先，我要實現的佈局像這樣的或類似的是：

並根據stackoverflow像this 我能夠實現這個佈局一些問題：

與該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:id="@+id/main_content" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:fitsSystemWindows="true"> 

    <android.support.design.widget.AppBarLayout 
     android:id="@+id/MyAppbar" 
     android:layout_width="match_parent" 
     android:layout_height="256dp" 
     android:fitsSystemWindows="true"> 

     <android.support.design.widget.CollapsingToolbarLayout 
      android:id="@+id/collapse_toolbar" 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" 
      android:background="@android:color/transparent" 
      android:fitsSystemWindows="true" 
      app:contentScrim="?attr/colorPrimary" 
      app:layout_scrollFlags="scroll|exitUntilCollapsed"> 

      <ImageView 
       android:id="@+id/bgheader" 
       android:layout_width="match_parent" 
       android:layout_height="match_parent" 
       android:background="@drawable/aks" 
       android:fitsSystemWindows="true" 
       android:scaleType="centerCrop" 
       app:layout_collapseMode="parallax" /> 

      <android.support.v7.widget.Toolbar 
       android:id="@+id/MyToolbar" 
       android:layout_width="match_parent" 
       android:layout_height="?attr/actionBarSize" 
       android:theme="@style/ThemeOverlay.AppCompat.Dark" 
       app:layout_collapseMode="pin" /> 

      <com.majid.whiteboard.utils.CustomTabLayout 
       android:id="@+id/tab_layout_detail_activity" 
       android:layout_width="match_parent" 
       android:layout_height="wrap_content" 
       android:background="@color/colorPrimary" 
       app:paddingEnd="20dp" 
       app:paddingStart="20dp" 
       app:tabGravity="fill" 
       app:tabIndicatorColor="@color/silver" 
       app:tabIndicatorHeight="4dp" 
       app:tabMode="fixed" 
       app:tabSelectedTextColor="@color/grid_text_color" 
       app:tabTextColor="@color/grid_text_color" /> 

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

    <android.support.v4.view.ViewPager 
     android:id="@+id/view_pager_detail_activity" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     app:layout_behavior="@string/appbar_scrolling_view_behavior"/> 

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

每一件事情是確定的，但現在我有兩個問題：

1.Tablayout轉到屏幕的頂部，但我要崩潰的工具欄下添加此

2.我只能摺疊工具欄只在摺疊區域（意味着只在圖片和頂部），它不能在屏幕上的其他地方工作。

Answer 1

我修改了你的代碼...試試這個。

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:app="http://schemas.android.com/apk/res-auto" 
    android:id="@+id/main_content" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:fitsSystemWindows="false"> 

    <android.support.design.widget.AppBarLayout 
     android:id="@+id/MyAppbar" 
     android:layout_width="match_parent" 
     android:layout_height="256dp" 
     android:fitsSystemWindows="true" 
     android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"> 

     <android.support.design.widget.CollapsingToolbarLayout 
      android:id="@+id/collapse_toolbar" 
      android:layout_width="match_parent" 
      android:layout_height="250dp" 
      android:fitsSystemWindows="true" 
      android:minHeight="@dimen/hundred_dp" 
      app:contentScrim="?attr/colorPrimary" 
      app:layout_scrollFlags="scroll|exitUntilCollapsed"> 

      <ImageView 
       android:id="@+id/bgheader" 
       android:layout_width="match_parent" 
       android:layout_height="match_parent" 
       android:background="@drawable/aks" 
       android:fitsSystemWindows="true" 
       android:scaleType="centerCrop" 
       app:layout_collapseMode="parallax" /> 

      <android.support.v7.widget.Toolbar 
       android:id="@+id/MyToolbar" 
       android:layout_width="match_parent" 
       android:layout_height="90dp" 
       android:layout_below="@+id/dashboard_txt_des" 
       android:gravity="top" 
       android:minHeight="?attr/actionBarSize" 
       app:layout_collapseMode="pin" 
       app:popupTheme="@style/ThemeOverlay.AppCompat.Light" 
       app:titleMarginTop="@dimen/fifteen_dp" 
       app:titleTextAppearance="@style/Toolbar.TitleText" /> 


      <android.support.design.widget.TabLayout 
       android:id="@+id/tabs" 
       android:layout_width="match_parent" 
       android:layout_height="50dp" 
       android:layout_below="@+id/toolbar" 
       android:layout_gravity="bottom" 
       android:background="@color/colorPrimary" 
       app:tabIndicatorColor="@color/orange" /> 

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

    <android.support.v4.view.ViewPager 
     android:id="@+id/view_pager_detail_activity" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     app:layout_behavior="@string/appbar_scrolling_view_behavior" /> 

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

Answer 2

這裏是我在我的應用程序對於粘性toolbar永遠與viewpager和TabLayout。

<LinearLayout 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:background="@color/background2" 
    android:orientation="vertical"> 

    <include 
     android:id="@id/toolbar" 
     layout="@layout/toolbar" /> 

    <android.support.design.widget.CoordinatorLayout 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/app_bar_layout" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:background="@color/background2" 
      android:fitsSystemWindows="true"> 

      <android.support.design.widget.CollapsingToolbarLayout 
       android:id="@+id/collapsing_toolbar" 
       android:layout_width="match_parent" 
       android:layout_height="match_parent" 
       android:fitsSystemWindows="true" 
       app:contentScrim="?attr/actionModeSplitBackground" 
       app:layout_scrollFlags="scroll|exitUntilCollapsed|snap"> 

       <LinearLayout 
        android:layout_width="match_parent" 
        android:layout_height="wrap_content" 
        android:orientation="vertical"> 

        <LinearLayout 
         android:layout_width="match_parent" 
         android:layout_height="wrap_content" 
         android:background="@drawable/plain_rectangle" 
         android:orientation="vertical"> 

         <RelativeLayout 
          android:id="@+id/profile_header" 
          android:layout_width="match_parent" 
          android:layout_height="wrap_content" 
          android:layout_marginTop="@dimen/half_padding"> 

          <com.COMPANY.APP.app.custom.RoundedNetworkImageView 
           android:id="@+id/user_dp" 
           android:layout_width="@dimen/follow_logo" 
           android:layout_height="@dimen/follow_logo" 
           android:layout_centerHorizontal="true" 
           app:default_image_resource="@drawable/new_user_display" /> 

          <ImageView 
           android:id="@+id/btn_edit" 
           android:layout_width="wrap_content" 
           android:layout_height="wrap_content" 
           android:layout_alignParentRight="true" 
           android:layout_alignParentTop="true" 
           android:padding="@dimen/more_padding" 
           android:src="@drawable/black_edit_icon" /> 
         </RelativeLayout> 

         <com.COMPANY.APP.app.custom.FontTextView 
          android:id="@+id/lbl_user" 
          android:layout_width="wrap_content" 
          android:layout_height="wrap_content" 
          android:layout_gravity="center" 
          android:paddingBottom="@dimen/standard_padding" 
          android:paddingTop="@dimen/standard_padding" 
          android:text="-" 
          android:textColor="@color/toolbar" 
          android:textSize="@dimen/user_name_font" 
          app:customFont="@string/font_regular" /> 

         <com.COMPANY.APP.app.custom.FontTextView 
          android:id="@+id/lbl_desc" 
          android:layout_width="wrap_content" 
          android:layout_height="wrap_content" 
          android:layout_gravity="center" 
          android:layout_marginLeft="@dimen/more_padding" 
          android:layout_marginRight="@dimen/more_padding" 
          android:paddingBottom="@dimen/standard_padding" 
          android:paddingTop="@dimen/standard_padding" 
          android:text="-" 
          android:textSize="@dimen/user_description_font" 
          app:customFont="@string/font_regular" /> 

         <com.COMPANY.APP.app.custom.CustomCheckbox 
          android:id="@+id/chk_following" 
          android:layout_width="wrap_content" 
          android:layout_height="wrap_content" 
          android:layout_gravity="center_horizontal" 
          android:layout_marginBottom="@dimen/followin_button_padding" 
          android:layout_marginTop="@dimen/standard_padding" 
          android:background="@drawable/rectangle_green_selector" 
          android:button="@null" 
          android:checked="false" 
          android:drawableLeft="@drawable/follow_green_inner_selector" 
          android:drawablePadding="10dp" 
          android:gravity="center" 
          android:paddingLeft="@dimen/follow_button_padding" 
          android:paddingRight="@dimen/follow_button_padding" 
          android:text="Follow" 
          android:textColor="@drawable/green_color_selector" 
          android:textSize="@dimen/following_button_font" 
          app:customFont="@string/font_regular" /> 
        </LinearLayout> 

        <LinearLayout 
         android:layout_width="match_parent" 
         android:layout_height="50dp" 
         android:layout_marginBottom="2dp" 
         android:orientation="horizontal" 
         android:paddingTop="2dp" 
         android:weightSum="3"> 

         <RelativeLayout 
          android:id="@+id/wishlist_layout" 
          android:layout_width="0dp" 
          android:layout_height="match_parent" 
          android:layout_marginRight="1dp" 
          android:layout_weight="1" 
          android:background="@color/background"> 

          <LinearLayout 
           android:layout_width="match_parent" 
           android:layout_height="wrap_content" 
           android:layout_centerInParent="true" 
           android:orientation="vertical"> 

           <com.COMPANY.APP.app.custom.FontTextView 
            android:id="@+id/lbl_wishlist_count" 
            android:layout_width="match_parent" 
            android:layout_height="wrap_content" 
            android:gravity="center_horizontal" 
            android:text="-" 
            android:textColor="@color/toolbar" 
            android:textSize="@dimen/font_14" /> 

           <com.COMPANY.APP.app.custom.FontTextView 
            android:layout_width="match_parent" 
            android:layout_height="wrap_content" 
            android:gravity="center_horizontal" 
            android:text="Wishlist" 
            android:textColor="@color/toolbar" 
            android:textSize="@dimen/font_10" /> 
          </LinearLayout> 

          <View 
           android:layout_width="match_parent" 
           android:layout_height="4dp" 
           android:layout_alignParentBottom="true" 
           android:background="@color/button" /> 
         </RelativeLayout> 

         <LinearLayout 
          android:id="@+id/following_layout" 
          android:layout_width="0dp" 
          android:layout_height="match_parent" 
          android:layout_marginRight="1dp" 
          android:layout_weight="1" 
          android:background="@color/background" 
          android:gravity="center_vertical" 
          android:orientation="vertical"> 

          <com.COMPANY.APP.app.custom.FontTextView 
           android:id="@+id/lbl_following_count" 
           android:layout_width="match_parent" 
           android:layout_height="wrap_content" 
           android:gravity="center_horizontal" 
           android:text="-" 
           android:textColor="@color/toolbar" 
           android:textSize="@dimen/font_14" /> 

          <com.COMPANY.APP.app.custom.FontTextView 
           android:layout_width="match_parent" 
           android:layout_height="wrap_content" 
           android:gravity="center_horizontal" 
           android:text="Following" 
           android:textColor="@color/toolbar" 
           android:textSize="@dimen/font_10" /> 

         </LinearLayout> 

         <LinearLayout 
          android:id="@+id/follower_layout" 
          android:layout_width="0dp" 
          android:layout_height="match_parent" 
          android:layout_marginRight="1dp" 
          android:layout_weight="1" 
          android:background="@color/background" 
          android:gravity="center_vertical" 
          android:orientation="vertical"> 

          <com.COMPANY.APP.app.custom.FontTextView 
           android:id="@+id/lbl_follower_count" 
           android:layout_width="match_parent" 
           android:layout_height="wrap_content" 
           android:layout_marginLeft="1dp" 
           android:layout_marginRight="1dp" 
           android:gravity="center_horizontal" 
           android:text="-" 
           android:textColor="@color/toolbar" 
           android:textSize="@dimen/font_14" /> 

          <com.COMPANY.APP.app.custom.FontTextView 
           android:layout_width="match_parent" 
           android:layout_height="wrap_content" 
           android:gravity="center_horizontal" 
           android:text="Followers" 
           android:textColor="@color/toolbar" 
           android:textSize="@dimen/font_10" /> 
         </LinearLayout> 
        </LinearLayout> 
       </LinearLayout> 

       <android.support.v7.widget.Toolbar 
        android:id="@+id/toolbar2" 
        android:layout_width="match_parent" 
        android:layout_height="?attr/actionBarSize" 
        android:title="Collapsing Toolbar" 
        app:layout_collapseMode="pin"> 

        <com.COMPANY.APP.app.custom.RoundedNetworkImageView 
         android:id="@+id/img_profile_top" 
         android:layout_width="40dp" 
         android:layout_height="40dp" 
         android:layout_alignParentLeft="true" 
         android:layout_centerVertical="true" 
         android:layout_gravity="center_vertical|left" 
         android:layout_marginRight="20dp" 
         android:alpha="0" 
         app:default_image_resource="@drawable/new_user_display" /> 

        <com.COMPANY.APP.app.custom.ImageCheckbox 
         android:id="@+id/user_follow_top" 
         android:layout_width="45dp" 
         android:layout_height="30dp" 
         android:layout_alignParentRight="true" 
         android:layout_centerVertical="true" 
         android:layout_gravity="center_vertical|right" 
         android:layout_marginRight="20dp" 
         android:alpha="0" 
         android:src="@drawable/follow_icon_checkbox_drawable" /> 
       </android.support.v7.widget.Toolbar> 

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

     <RelativeLayout 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      app:layout_behavior="@string/appbar_scrolling_view_behavior"> 

      <android.support.design.widget.TabLayout 
       android:id="@+id/tab_layout" 
       android:layout_width="match_parent" 
       android:layout_height="@dimen/standard_height" 
       android:layout_alignParentTop="true" 
       android:background="@drawable/plain_rectangle" 
       android:elevation="2dp" 
       app:tabBackground="@color/background" 
       app:tabIndicatorColor="@color/button" 
       app:tabIndicatorHeight="3dp" 
       app:tabMode="fixed" 
       app:tabSelectedTextColor="@color/toolbar" 
       app:tabTextAppearance="@style/APPTabText" 
       app:tabTextColor="@color/disable_text" /> 

      <com.COMPANY.APP.app.custom.CustomViewPager 
       android:id="@+id/view_pager" 
       android:layout_width="match_parent" 
       android:layout_height="wrap_content" 
       android:layout_below="@+id/tab_layout" /> 
     </RelativeLayout> 

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

</LinearLayout> 

並在Activity我used-

CollapsingToolbarLayout collapsingToolbarLayout = (CollapsingToolbarLayout)findViewById(R.id.collapsing_toolbar); 
ImageCheckbox user_follow_top = (ImageCheckbox)findViewById(R.id.user_follow_top); 
RoundedNetworkImageView imgProfile = (RoundedNetworkImageView) findViewById(R.id.user_dp); 
RoundedNetworkImageView getImgProfileTop = (RoundedNetworkImageView)findViewById(R.id.img_profile_top); 

AppBarLayout.OnOffsetChangedListener mListener = new AppBarLayout.OnOffsetChangedListener() { 
         @Override 
         public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) { 
          if(collapsingToolbarLayout.getHeight() + verticalOffset < 1.5 * ViewCompat.getMinimumHeight(collapsingToolbarLayout)) { 
           getImgProfileTop.animate().alpha(1).setDuration(400); 
           user_follow_top.animate().alpha(1).setDuration(400); 
           collapsingToolbarLayout.setTitle(username); 
          } else { 
           getImgProfileTop.animate().alpha(0).setDuration(400); 
           user_follow_top.animate().alpha(0).setDuration(400); 
           collapsingToolbarLayout.setTitle(""); 
          } 
         } 
        }; 
AppBarLayout appBarLayout = (AppBarLayout)findViewById(R.id.app_bar_layout); 
appBarLayout.addOnOffsetChangedListener(mListener); 

這是輸出 -

無需滾動

滾動