如何创建与CoordinatorLayout的内容重叠的AppBarLayout [英] How to create AppBarLayout which overlaps content of CoordinatorLayout

问题描述

在某些活动中将 CoordinatorLayout 与 AppBarLayout 一起使用时，我需要将内容置于下 AppBarLayout，即工具栏使用某种透明颜色并覆盖内容。默认情况下， CoordinatorLayout + AppBarLayout 进行排列，以使工具栏和滚动内容彼此相邻，没有任何重叠。

Android开发人员指南包含有关

因此，我需要上图所示的内容，但要使用 CoordinatorLayout + AppBarLayout 。并且不需要使用 CollapsingToolbarLayout -只是这个简单的例子。

关于如何实现此目标的任何提示？
这是我的活动布局。

 < 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 
应用程序： layout_behavior = @ string / appbar_scrolling_view_behavior 
> 
<！-由内容片段填充-> 
< / FrameLayout> 
< android.support.design.widget.FloatingActionButton 
 style = @ style / FabStyle 
 android：id = @ + id / fab_button 
 android：src =  @ drawable / bt_filters 
 /> 
< /android.support.design.widget.CoordinatorLayout> 
  

解决方案

我尝试了此解决方案，它有效。

透明度：
向AppBarLayout添加了背景，并在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> 
  

内容定位：扩展的AppBarLayout.ScrollingViewBehavior由新的AppbBarTransparentScrollingViewBehavior覆盖了 onDependentViewChanged（）并将 updateOffset（）修改为 offset = 0

  @Override 
公共布尔值onDependentViewChanged（CoordinatorLayout父级，查看子级，
查看依赖项）{
 updateOffset（父，子，依赖项）; 
返回false； 
} 
 
私有布尔值updateOffset（CoordinatorLayout父级，查看子级，
查看依赖项）{
最终的CoordinatorLayout.Behavior行为=（（（CoordinatorLayout.LayoutParams）依赖项
 .getLayoutParams（））。getBehavior（）; 
 if（behavior instanceof Behavior）{
 //偏移子项，使其在应用栏下方（任何
 //重叠）
 final int offset = 0; //更改为0 
 setTopAndBottomOffset（offset）; 
返回true； 
} 
返回false； 
} 
  

新内容的行为：在滚动视图上设置行为

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

结果：在NestedScrollView内部具有ImageView作为滚动视图

When using a CoordinatorLayout with AppBarLayout on some activities I need the content to be under the AppBarLayout, i.e. the Toolbar is using some transparent color and overlays the content. By default CoordinatorLayout + AppBarLayout arrange things so that toolbar and scrolling content are next to eachother, without any overlapping.

Android developer guides have the documentation on this here and it looks like this (but those flags do not seem to work with Toolbar and appcompat - I tried):

So I need something that looks like on image above, but with all the scrolling goodies provided by CoordinatorLayout + AppBarLayout. And there's no need to use CollapsingToolbarLayout - just this simple one.

Any hints on how to achieve this? Here's my activity layout.

<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>

解决方案

I tried this solution, it works.

transparency : added background to AppBarLayout, and placed scrolling view in layout before 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" >

content positioning : extended AppBarLayout.ScrollingViewBehavior by new AppbBarTransparentScrollingViewBehavior overriding onDependentViewChanged() and modifying updateOffset() to 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;
}

new content's behavior : set behavior on scrolling view

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

result : with an ImageView inside a NestedScrollView as scrolling view

这篇关于如何创建与CoordinatorLayout的内容重叠的AppBarLayout的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！