如何使AppBarLayout背景透明

Question

我试图做一个类似于在Play商店中搜索片段：

我AppBarLayout有CardView在里面，背景设置为透明：

<android.support.design.widget.CoordinatorLayout 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:fitsSystemWindows="true"> 

    <android.support.design.widget.AppBarLayout 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:background="@android:color/transparent" 
     android:theme="@style/ThemeOverlay.AppCompat.ActionBar" 
     app:elevation="0dp"> 

     <!-- CardView --> 

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

    <android.support.v4.widget.NestedScrollView 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:scrollbars="vertical" 
     app:layout_behavior="@string/appbar_scrolling_view_behavior"> 

     <!-- Main content --> 

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

但你可以看到，有CardView，以便它后面的内容背后却隐藏着一个坚实的背景：

我怎样才能让AppBarLayout的背景透明，这样后面的内容是可见的？

Answer 1

同样的问题发生在我身上，此时它与AppBarLayout的透明度无关。但AppBarLayout推动之下本身的NestedScrollView衰落时的内容。

您可以通过

1. 移动你的NestedScrollView解决这件事背后的AppBarLayout和
2. 加空格元素，你NestedScrollView与所述AppBar的大小

步骤1可以通过添加这可以容易地实现的onCreate()

mNestedScroll.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() { 
    @Override 
    public void onGlobalLayout() { 
     mNestedScroll.getViewTreeObserver().removeOnGlobalLayoutListener(this); 

     final int appBarHeight = mAppBar.getHeight(); 
     mNestedScroll.setTranslationY(-appBarHeight); 
     mNestedScroll.getLayoutParams().height = mNestedScroll.getHeight() + appBarHeight; 
    } 
}); 

对于步骤2你需要与appBar的高度间隔添加一个空视图您NestedScrollView。注意：在我的方法中，我使用了RecyclerView而不是NestedScrollView，所以我不得不向我的RecyclerView添加一个带有appBarHeight的空ViewHolder。所以这个片段没有经过测试，但它应该为你做的伎俩：

<View 
    android:layout_width="match_parent" 
    android:layout_height="?attr/actionBarSize"/> 

Answer 2

尝试将CardView放入一个尺寸为match_parent的FrameLayout中，以便CardView在其周围有空间。我并不是100％相信它会起作用，但值得尝试。

Answer 3

我尝试了很多代码，或多或少的给我找你想要的东西。这是一个替代的解决方案，但你需要改变AppBarLayout一个简单的观点...看看这个：

<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:id="@+id/annonce.main.coordinator" 
android:layout_width="match_parent" 
android:layout_height="match_parent" 
tools:ignore="RtlHardcoded"> 

<android.support.v7.widget.RecyclerView 
    android:id="@+id/rv" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent"/> 

<!-- here you put your search bar, can be any view !--> 
<android.support.v7.widget.CardView 
    android:id="@+id/searchbar" 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    app:cardElevation="4dp" 
    app:cardUseCompatPadding="true" 
    app:layout_behavior="[package].RecyclerSearchBehavior"> 

    <EditText 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:layout_gravity="center" 
     android:hint="Pesquise aqui" 
     android:minHeight="58dp"/> 

</android.support.v7.widget.CardView> 

注：这是一个CoordinatorLayout内。 创建视图是使用搜索栏，你的类型的行为：

public class RecyclerSearchBehavior extends CoordinatorLayout.Behavior<CardView> { 
//Initial height and location 
private int mViewHeight; 
private int[] mViewStartLocation; 


public RecyclerSearchBehavior(Context context, AttributeSet attrs) { 
} 

@Override 
public boolean layoutDependsOn(CoordinatorLayout parent, final CardView child, View dependency) { 
    //the first function called. The initial variables settings. 
    //getting height 
    mViewHeight = child.getHeight(); 
    //getting location on screen 
    mViewStartLocation = new int[2]; 
    child.getLocationOnScreen(mViewStartLocation); 
    //if the dependecy is your recycler 
    if (dependency instanceof RecyclerView) 
     //add scroll listener 
     ((RecyclerView) dependency).addOnScrollListener(new RecyclerView.OnScrollListener() { 
      @Override 
      public void onScrollStateChanged(RecyclerView recyclerView, int newState) { 
       super.onScrollStateChanged(recyclerView, newState); 
      } 
      //here the magic happens 
      @Override 
      public void onScrolled(RecyclerView recyclerView, int dx, int dy) { 
       super.onScrolled(recyclerView, dx, dy); 
       //animate function 
       animate(child, dy); 
      } 
     }); 
    return dependency instanceof RecyclerView; 
} 

private void animate(CardView child, int dy) { 
    //the initial position of your search bar is 0, because it is on top, so... 
    if (child.getY() <= 0) 
     //dy is an integer that shows you if user scrolls up or down 
     if (dy >= 0) { 
      //move to top is a negative value, so *-1 
      //if that is < than height, scrools up 
      if ((child.getY() * -1) <= (mViewHeight)) 
       child.setTranslationY(child.getY() - dy * 0.1f); 
     } else { 
      //if the position of search bar is < than zero, scrolls down 
      if (child.getY() < 0) 
       child.setTranslationY(child.getY() - dy * 0.1f); 
      //else, put the view on 0y 
      else child.setY(0); 
     } 
    //else, put the view on 0y again. this function is called after any user      
    //touches... so everything happens fast and with numbers different than 
    //1 
    else child.setY(0); 
} 

}

而完成的。你的“搜索栏”就在这里。

这里唯一的问题是，您需要为您的Recycler上的第一个项目添加填充，或者将第一个项目作为透明视图添加填充。