Làm thế nào để tạo AppBarLayout mà chồng chéo nội dung của CoordinatorLayout

Question

Khi sử dụng một CoordinatorLayout với AppBarLayout về một số hoạt động Tôi cần nội dung được dưới các AppBarLayout, ví dụ: Thanh công cụ được sử dụng một số màu trong suốt và chồng lên nội dung. Theo mặc định, CoordinatorLayout + AppBarLayout sắp xếp mọi thứ để thanh công cụ và nội dung cuộn nằm cạnh nhau, không bị chồng chéo.

hướng dẫn nhà phát triển Android có tài liệu về here này và nó trông như thế này (nhưng những lá cờ dường như không làm việc với Thanh công cụ và appcompat - Tôi cố gắng):

Vì vậy, tôi cần cái gì đó trông giống như trên hình ảnh ở trên, nhưng với tất cả các tính năng cuộn được cung cấp bởi CoordinatorLayout + AppBarLayout. Và không cần sử dụng CollapsingToolbarLayout - chỉ đơn giản này.

Bất kỳ gợi ý nào về cách đạt được điều này? Đây là bố cục hoạt động của tôi.

<android.support.design.widget.CoordinatorLayout 
    android:id="@+id/top_content_frame" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent"> 
    <android.support.design.widget.AppBarLayout 
     android:background="@android:color/transparent" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     > 
     <include layout="@layout/main_toolbar"/> 
    </android.support.design.widget.AppBarLayout> 
    <FrameLayout 
     android:id="@+id/content" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     app:layout_behavior="@string/appbar_scrolling_view_behavior" 
     > 
     <!-- to be filled by content fragment --> 
    </FrameLayout> 
    <android.support.design.widget.FloatingActionButton 
     style="@style/FabStyle" 
     android:id="@+id/fab_button" 
     android:src="@drawable/bt_filters" 
     /> 
</android.support.design.widget.CoordinatorLayout> 

Answer 1

Tôi đã thử giải pháp này, nó hoạt động.

minh bạch: thêm nền để AppBarLayout, và đặt cuộn xem trong cách bố trí trước AppBarLayout

<android.support.design.widget.AppBarLayout 
android:id="@+id/app_bar_layout" 
android:layout_width="match_parent" 
android:layout_height="wrap_content" 
android:background="#00000000" > 

nội dung định vị: mở rộng AppBarLayout.ScrollingViewBehavior bởi mới AppbBarTransparentScrollingViewBehavior trọng onDependentViewChanged() và sửa đổi updateOffset()-offset = 0

@Override 
public boolean onDependentViewChanged(CoordinatorLayout parent, View child, 
     View dependency) { 
    updateOffset(parent, child, dependency); 
    return false; 
} 

private boolean updateOffset(CoordinatorLayout parent, View child, 
     View dependency) { 
    final CoordinatorLayout.Behavior behavior = ((CoordinatorLayout.LayoutParams) dependency 
      .getLayoutParams()).getBehavior(); 
    if (behavior instanceof Behavior) { 
     // Offset the child so that it is below the app-bar (with any 
     // overlap) 
     final int offset = 0; // CHANGED TO 0 
     setTopAndBottomOffset(offset); 
     return true; 
    } 
    return false; 
} 

mới nội dung của hành vi: set hành vi trên di chuyển xem

<android.support.v4.view.ViewPager 
android:id="@+id/view_pager" 
android:layout_width="match_parent" 
android:layout_height="match_parent" 
layout_behavior="AppbBarTransparentScrollingViewBehavior" /> 

kết quả: với một ImageView bên trong một NestedScrollView như di chuyển xem

Answer 2

Nếu bạn loại bỏ các dòng

app:layout_behavior="@string/appbar_scrolling_view_behavior" 

từ FrameLayout, nội dung sẽ được chồng chéo bởi Toolbar. Hy vọng rằng sẽ giúp.

EDIT: Oh bạn đề cập rằng bạn cần các tính năng cuộn, vì vậy đây thực sự không phải là giải pháp.

Answer 3

Ở đây tôi đã cố gắng để cung cấp cho hình ảnh Bối cảnh chính đến windowBackground và Nền ToolBar/ActionBar dưới dạng Minh bạch. Bên dưới Kiểu tôi đã chỉ định trong tệp kê khai. Thay đổi nền cửa sổ có thể được thực hiện theo yêu cầu. Style trong Menifest

<style name="AppThemeSliderToolbar" parent="Theme.AppCompat.Light.NoActionBar"> 
     <item name="android:windowBackground">@drawable/t_img</item> 
     <item name="colorPrimary">#ff5b45</item> 
     <item name="colorPrimaryDark">#FF5722</item> 
    </style> 

Layout với AppBar với nền bán trong suốt

<RelativeLayout 
     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:background="#50000000" 

      > 
      <!--Change Opacity background as per required ..android:background="#50000000"--> 
      <android.support.v7.widget.Toolbar 
       android:id="@+id/toolbar" 
       android:layout_width="match_parent" 
       android:layout_height="?attr/actionBarSize" 
       app:layout_scrollFlags="scroll|enterAlways" /> 
     </android.support.design.widget.AppBarLayout> 

     <FrameLayout 
      android:id="@+id/frgmentcontainer" 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" 
      android:layout_below="@+id/appbar"></FrameLayout> 


    </RelativeLayout> 

    <android.support.design.widget.FloatingActionButton 
     android:id="@+id/fab" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_gravity="bottom|right" 
     android:layout_marginBottom="20dp" 
     android:layout_marginRight="20dp" 
     android:src="@android:drawable/ic_dialog_email" 
     app:fabSize="normal" /> 
</android.support.design.widget.CoordinatorLayout> 

CẬP NHẬT

Theo thảo luận của chúng tôi về nhận xét CollapsingToolbarLayout với đoạn.

<?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" 
    xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" 
    android:layout_height="match_parent" android:fitsSystemWindows="true" 
    tools:context=".ScrollingActivity"> 

    <android.support.design.widget.AppBarLayout android:id="@+id/app_bar" 
     android:fitsSystemWindows="true" android:layout_height="@dimen/app_bar_height" android:background="#00FFFFFF" 
     android:layout_width="match_parent" android:theme="@style/AppTheme.AppBarOverlay"> 

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

      <android.support.v7.widget.Toolbar android:id="@+id/toolbar" 
       android:layout_height="?attr/actionBarSize" android:layout_width="match_parent" 
       app:layout_collapseMode="pin" app:popupTheme="@style/AppTheme.PopupOverlay" /> 

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

    <include layout="@layout/content_scrolling" /> 

    <android.support.design.widget.FloatingActionButton android:id="@+id/fab" 
     android:layout_width="wrap_content" android:layout_height="wrap_content" 
     android:layout_margin="@dimen/fab_margin" app:layout_anchor="@id/app_bar" 
     app:layout_anchorGravity="bottom|end" android:src="@android:drawable/ic_dialog_email" /> 

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

content_scrolling.xml

<?xml version="1.0" encoding="utf-8"?> 
<android.support.v4.widget.NestedScrollView 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:tools="http://schemas.android.com/tools" 
    xmlns:app="http://schemas.android.com/apk/res-auto" 
    app:layout_behavior="@string/appbar_scrolling_view_behavior" 
    tools:showIn="@layout/activity_scrolling" android:layout_width="match_parent" 
    android:layout_height="match_parent" tools:context=".ScrollingActivity"> 
    <FrameLayout android:id="@+id/framcontainer" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent"></FrameLayout> 

</android.support.v4.widget.NestedScrollView> 

Phong cách Given to Hoạt động trong Manifest.

<style name="AppThemeSliderToolbar" parent="Theme.AppCompat.Light.NoActionBar"> 
     <item name="android:windowBackground">@drawable/t_img</item> 
     <item name="android:windowContentOverlay">@null</item> 
     <item name="windowActionBarOverlay">true</item> 
     <item name="colorPrimary">@android:color/transparent</item> 
    </style> 

ScrollingActivity

public class ScrollingActivity extends AppCompatActivity { 

    @Override 
    protected void onCreate(Bundle savedInstanceState) { 
     super.onCreate(savedInstanceState); 
     setContentView(R.layout.activity_scrolling); 
     Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar); 
     setSupportActionBar(toolbar); 

     FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab); 
     fab.setOnClickListener(new View.OnClickListener() { 
      @Override 
      public void onClick(View view) { 
       Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG) 
         .setAction("Action", null).show(); 
      } 
     }); 
     getSupportFragmentManager().beginTransaction(). 
       replace(R.id.framcontainer, new HomeFragment(), "Home").commit(); 
    } 

} 

Home2

public class Home2 extends Fragment { 
    @Nullable 
    @Override 
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { 
     return inflater.inflate(R.layout.home_2, container, false); 
    } 
} 

HomeFragment

public class HomeFragment extends Fragment { 
    @Nullable 
    @Override 
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { 
     return inflater.inflate(R.layout.homefragment, container, false); 
    } 

    @Override 
    public void onViewCreated(View view, @Nullable Bundle savedInstanceState) { 
     super.onViewCreated(view, savedInstanceState); 
     view.findViewById(R.id.txt).setOnClickListener(new View.OnClickListener() { 
      @Override 
      public void onClick(View v) { 
       getActivity().getSupportFragmentManager().beginTransaction() 
         .replace(R.id.framcontainer, new Home2(), "Home2").addToBackStack("Home2").commit(); 
      } 
     }); 
    } 
} 

url ảnh chụp màn hình. hình ảnh Ambeding tránh tôi đã trao url

Trước khi cập nhật Ans http://i.stack.imgur.com/5cVOw.jpg
HomeFragment Từ Ans Cập nhật>http://i.stack.imgur.com/UF8LW.jpg
Home2 Từ Ans cập nhật http://i.stack.imgur.com/cD480.jpg