Adicione visualizações abaixo da barra de ferramentas no CoordinatorLayout


176

Eu tenho o seguinte layout:

<android.support.design.widget.CoordinatorLayout
    android:id="@+id/main_content"
    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.support.design.widget.AppBarLayout
        android:id="@+id/appBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.ActionBar">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|enterAlways"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>

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

    <FrameLayout
        android:id="@+id/content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        />
</android.support.design.widget.CoordinatorLayout>

Eu adiciono Fragments ao FrameLayout, substituindo-os. Um dos meus Fragments é uma lista, que possui o seguinte layout:

<android.support.v7.widget.RecyclerView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/recyclerView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"/>

Meu problema aqui é que a barra de ferramentas é desenhada sobre a lista . Tentei resolver isso envolvendo o conteúdo do arquivo CoordinatorLayoutem umLinearLayout , que resolveu o excesso, mas dessa maneira o comportamento de rolagem da barra de aplicativos não funciona mais.

Qualquer ajuda é muito apreciada!

Respostas:


355

Pegue o atributo

app:layout_behavior="@string/appbar_scrolling_view_behavior"

desligue o RecyclerViewe coloque no FrameLayoutque você está tentando mostrar sob o Toolbar.

Descobri que uma coisa importante que o comportamento da exibição de rolagem faz é o layout do componente abaixo da barra de ferramentas. Como o FrameLayouttem um descendente que irá rolar ( RecyclerView), CoordinatorLayoutele obterá esses eventos de rolagem para mover o Toolbar.


Outra coisa a ter em atenção: esse comportamento de layout fará com que a FrameLayoutaltura seja dimensionada como se Toolbarjá estivesse rolada e, com a Toolbarexibição completa, a exibição inteira é simplesmente empurrada para baixo, de modo que a parte inferior da exibição fique abaixo da parte inferior da tela. CoordinatorLayout.

Isso foi uma surpresa para mim. Eu esperava que a exibição fosse redimensionada dinamicamente conforme a barra de ferramentas é rolada para cima e para baixo. Portanto, se você tiver um componente de rolagem com um componente fixo na parte inferior da sua visualização, não verá esse componente inferior até ter rolado completamente o Toolbar.

Então, quando eu queria ancorar um botão na parte inferior da interface do usuário, resolvi isso colocando o botão na parte inferior do CoordinatorLayout( android:layout_gravity="bottom") e adicionando uma margem inferior igual à altura do botão à vista abaixo da barra de ferramentas.


1
Muito obrigado, isso realmente funciona! Meu único problema depois disso, se a barra de ferramentas foi movida para fora, ela não retornou depois de substituir o Fragmentcontendo por uma lista por outra Fragment. Consegui mostrar manualmente a barra de ferramentas dessa maneira.
WonderCsabo

Uau. Eu sempre pensei que o layout do próprio Fragment substituísse completamente o "espaço reservado" do FrameLayout, mas vejo que esse não é o caso. Obrigado por esta resposta! Isto me ajudou bastante.
Aspirante Dev 08/07

@Surendar D verifique isso se você pode stackoverflow.com/questions/42968587/...
Mohamed Rihan

Agradável. Obrigado!
Razvan

86

Eu consegui corrigir isso adicionando:

android: layout_marginTop = "? android: attr / actionBarSize"

para o FrameLayout assim:

 <FrameLayout
        android:id="@+id/content"
        android:layout_marginTop="?android:attr/actionBarSize"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
       />

9
Em vez de adicionar o marginTop, adicione o aplicativo: layout_behavior = "@ string / appbar_scrolling_view_behavior"
Naveed Ahmad

3
A solução perfeita quando @ corda / appbar_scrolling_view_behavior não está disponível
Julius

Por favor, useandroid:layout_marginTop="?android:attr/actionBarSize"
Martin Pfeffer

6
Este é um bocado hacky, adicionando uma margem de que o tamanho poderia ser (supondo que você terá sempre uma barra de ferramentas que tamanho) vai quebrar em algum momento
Kenny

0

A partir do Android studio 3.4, você precisa colocar esta linha no layout que contém o RecyclerView.

app:layout_behavior="android.support.design.widget.AppBarLayout$ScrollingViewBehavior"

0

Para usar a barra de ferramentas superior em colapso ou usar ScrollFlags de sua própria escolha, podemos fazer o seguinte: No Material Design, livre-se do FrameLayout

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
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">

<androidx.coordinatorlayout.widget.CoordinatorLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleGravity="top"
            app:layout_scrollFlags="scroll|enterAlways">


        <androidx.appcompat.widget.Toolbar
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:layout_collapseMode="pin">

            <ImageView
                android:id="@+id/ic_back"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/ic_arrow_back" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="back"
                android:textSize="16sp"
                android:textStyle="bold" />

        </androidx.appcompat.widget.Toolbar>


        </com.google.android.material.appbar.CollapsingToolbarLayout>
    </com.google.android.material.appbar.AppBarLayout>

        <androidx.recyclerview.widget.RecyclerView
            android:id="@+id/post_details_recycler"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical"
            android:padding="5dp"
            app:layout_behavior="@string/appbar_scrolling_view_behavior"
            />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

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.