Sobrepor a visualização de rolagem com AppBarLayout


103

Quero implementar o padrão 'Espaço flexível com conteúdo sobreposto' a partir das técnicas de rolagem do Material design , como neste vídeo : Espaço flexível com conteúdo GIF sobreposto

Meu layout XML agora se parece com:

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

  <android.support.design.widget.AppBarLayout
      android:layout_width="match_parent"
      android:layout_height="192dp"
      android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

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

      <android.support.v7.widget.Toolbar
          android:layout_height="?attr/actionBarSize"
          android:layout_width="match_parent"
          app:layout_collapseMode="pin"/>
    </android.support.design.widget.CollapsingToolbarLayout>
  </android.support.design.widget.AppBarLayout>

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

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
      <....>
    </LinearLayout>
  </android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>

Existe uma maneira fácil de fazer isso usando a Biblioteca de projetos? Ou preciso criar um CoordinatorLayout.Behavior personalizado para fazer isso?


Estou procurando o oposto, uma imagem dentro de CollapsingToolbarLayout deve mostrar alguns dps a mais após a barra de ferramentas e abaixo do NestedScrollView em outra cor!
David,

Eu estava usando FrameLayout, RelativeLayout, mas sempre os fragmentos foram sobrepostos com actionBar. Usar um NestedScrollView como pai para todos os fragmentos foi a solução. Obrigado!
JCarlosR

Respostas:


148

Na verdade, sobrepor a visualização de rolagem com o AppBarLayout é um recurso incluído da Biblioteca de Suporte de Design do Android : você pode usar o app:behavior_overlapTopatributo em seu NestedScrollView(ou em qualquer Visualização usando ScrollingViewBehavior ) para definir a quantidade de sobreposição:

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

Observe que app:behavior_overlapTopsó funciona em visualizações que possuem o app:layout_behavior="@string/appbar_scrolling_view_behavior", pois é o comportamento que está usando o atributo (não a Visualização ou o ViewGroup pai, como os atributos geralmente se aplicam), daí o behavior_prefixo.

Ou defina-o programaticamente por meio de setOverlayTop () :

NestedScrollView scrollView = ...
CoordinatorLayout.LayoutParams params = 
    (CoordinatorLayout.LayoutParams) scrollView.getLayoutParams();
AppBarLayout.ScrollingViewBehavior behavior =
    (AppBarLayout.ScrollingViewBehavior) params.getBehavior();
behavior.setOverlayTop(128); // Note: in pixels

1
Isso está quase funcionando para mim, exceto que meu RecyclerView (no qual eu configurei layout_behaviore behavior_overlapTop) termina atrás de seu irmão AppBarLayout. Tentei mudar a ordem no XML, mas não parece ter nenhum efeito. Alguma ideia de qual poderia ser o problema?
Vicky Chijwani

1
Quando eu desabilito a rolagem (removendo atributos app: layout_scrollFlags) - o behavior_overlapTop não funciona - NestedScrollView vai para AppBarLayout. Você sabe como consertar isso?
Pavel Biryukov

@PavelBiryukov o que você fez para a API <21?
Vicky Chijwani

1
Olá, não funciona para mim. Eu receboerror no resource identifier found for attribute behavior_overlayTop
Jack Lynx

1
@Lynx - confuso o suficiente, é behavior_overlapTopmas setOverlayTop()- sobreposição vs sobreposição. Certifique-se de que está usando o correto!
ianhanniballake

21

Além da resposta aceita , chame setTitleEnabled (false) em seu CollapsingToolbarLayout para fazer o título ficar fixo na parte superior como no exemplo.

Como isso:

CollapsingToolbarLayout.setTitleEnabled(false);

ou adicionando-o em xml assim:

app:titleEnabled="false"

Caso contrário, o título pode desaparecer por trás do conteúdo sobreposto, a menos, é claro, que esse seja o comportamento que você deseja.


2
Você pode colocar um extendedTitleMarginBottom grande o suficiente no CollapsingToolbarLayout para evitar a sobreposição do título quando expandido.
WindRider de
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.