O que é CoordinatorLayout?

93

Acabei de dar uma olhada no aplicativo de demonstração da nova biblioteca de design de suporte para Android. É fornecido por Chris Banes no github . Através do aplicativo, CoordinatorLayouté usado fortemente. Além disso, muitas das classes de biblioteca de design apoio tais como FloatingActionButton, SnackBar, AppBarLayoutetc. se comporta de forma diferente quando dentro usado CoordinatorLayout.

Alguém pode, por favor, esclarecer o que é CoordinatorLayoute como é diferente de outros programas ViewGroupno Android, ou pelo menos fornecer o caminho correto para o aprendizado CoordinatorLayout.

Jimmy0251
fonte
5
android-developers.blogspot.com/2015/05/… Ele também tem uma descrição extensa, embora confusa, nos JavaDocs (atualmente não disponível na forma de link direto, mas você pode baixar um ZIP em developer.android.com/preview /download.html ).
CommonsWare
1
Qual é realmente a vantagem de usar CordinatorLayout? Que vantagem tem sobre os outros?
eRaisedToX

Respostas:

42

Aqui é o que você está procurando.

de docs

a biblioteca de design apresenta CoordinatorLayout, um layout que fornece um nível adicional de controle sobre eventos de toque entre visualizações filhas, algo do qual muitos dos componentes da biblioteca de design tiram proveito.

https://android-developers.googleblog.com/2015/05/android-design-support-library.html

neste link você verá os vídeos de demonstração de todas as visualizações mencionadas acima.

espero que isto ajude :)

Qadir Hussain
fonte
2
o link está quebrado.
Yogesh Seralia
39

O que é um CoordinatorLayout? Não se deixe enganar pelo nome extravagante, nada mais é do que um FrameLayout com esteróides

Para entender melhor o que a CoordinatorLayouté / faz, você deve primeiro entender / ter em mente o que significa Coordenar.

Se você pesquisar a palavra no Google

Coordenada

Isto é o que você recebe:

insira a descrição da imagem aqui

Acho que essas definições ajudam a descrever o que um CoordinatorLayout faz por conta própria e como as visualizações dentro dele se comportam.

Um CoordinatorLayout (um ViewGroup) traz os diferentes elementos (Visualizações filhas) de um (̶a̶ ̶c̶o̶m̶p̶l̶e̶x̶ ̶a̶c̶t̶i̶v̶i̶t̶y̶ ̶o̶r̶ ̶a̶n̶ ̶o̶r̶g̶a̶n̶i̶z̶a̶on a em uma relação harmoniosa ou eficiente)

Com a ajuda de um CoordinatorLayout, as visualizações filho trabalham juntas harmoniosamente para implementar comportamentos incríveis, como

arrasta, desliza, arremessa ou qualquer outro gesto.

As visualizações dentro de um CoordinatorLayout negociam com outras pessoas a fim de trabalharem juntas de forma eficaz, especificando esses comportamentos

Um CoordinatorLayout é um recurso super legal do Material Design que ajuda a criar layouts atraentes e harmonizados.

Tudo o que você precisa fazer é agrupar as visualizações filhas dentro do CoordinatorLayout.

<?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="com.byte64.coordinatorlayoutexample.ScollingActivity">

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

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



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

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

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

<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"
    app:srcCompat="@android:drawable/ic_dialog_email" />

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

e content_scrolling:

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.NestedScrollView     
 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"
 app:layout_behavior="@string/appbar_scrolling_view_behavior"
 tools:context="com.byte64.coordinatorlayoutexample.ScollingActivity"
 tools:showIn="@layout/activity_scolling">

 <TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_margin="@dimen/text_margin"
    android:text="@string/large_text" />

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

O que isso nos dá é um layout que pode ser rolado para recolher a barra de ferramentas e ocultar o FloatingActionButton

Abrir:

insira a descrição da imagem aqui

Fechadas:

insira a descrição da imagem aqui

Ojonugwa Jude Ochalifu
fonte
2
O layout relativo ou de restrição também não teria relação entre as visualizações? Se alguém se mover para cima, a visualização relacionada se moverá para cima. Por que o coordenador é melhor?
Cobra
1
@Snake 1. O CoordinatorLayout ajuda a organizar uma visualização sobre outra visualização, algo que nem um ConstraintLayout nem um RelativeLayout podem fazer. 2. Também ajuda a animar a transição de visualizações. Um bom exemplo é a transição da atividade / fragmento "Exibir contato" no aplicativo Whatsapp.
Felix Favor Chinemerem
13

Um ponto adicional a ser observado. Visto que OP perguntou especificamente

Além disso, muitas das classes de libabry de design de suporte, como FloatingActionButton, SnackBar, AppBarLayout etc., se comportam de maneira diferente quando usadas dentro do CoordinatorLayout.

E acho que é por causa disso.

CoordinatorLayout é um FrameLayout superpotente.

Botão FAB, SnackBar trabalha no conceito de FrameLayout, e como o próprio CoordinatorLayout tem funcionalidade de FrameLayout, ele pode fazer com que outras visualizações se comportem de maneira diferente !.

capt.swag
fonte
8

CoordinatorLayout é essencialmente o layout de quadro com muitos recursos que são óbvios pelo nome, ele automatiza a coordenação entre seus filhos e ajuda a construir belas vistas. Sua implementação pode ser vista no aplicativo Google Play Store. Como a barra de ferramentas se fecha e muda de cor.

O melhor do CoordinatorLayout é o comportamento que damos aos seus descendentes diretos ou indiretos. Você deve ter visto enquanto rola tudo que a IU entra em movimento. É muito provável que o comportamento esteja fazendo sua mágica.

Uzair
fonte
7

Para dar uma ideia rápida do que é útil na documentação do Android :

Use CoordinatorLayout para simplesmente controlar o comportamento relacional de suas visualizações,

Por exemplo, se você quiser que sua barra de ferramentas se feche ou se esconda. O Google tornou tudo muito fácil ao apresentar AppBarLayout e CollapsingToolbarLayout, que funcionam melhor em um CoordinatorLayout.

A outra situação mais usada é quando você deseja que um FloatingActionButton grude na parte inferior de seu CollapsingToolbar e se mova com ele, colocando-os sob um coordinatorLayout e use app:layout_anchor="@id/YourAppBarId"para a cola (!) E app:layout_anchorGravity="bottom|end"como posição será suficiente para você ver o trabalho de mágica!

Usando este layout como contexto, as visualizações filhas terão melhor colaboração e se comportarão de maneira inteligente, pois estarão cientes umas das outras por meio do contexto CoordinatorLayout, isso significa que seus Botões FloatingAction não serão mais sobrepostos por uma barra de lanche etc.

estes foram apenas um rápido resumo das partes mais úteis, portanto, se você quiser economizar mais tempo na animação de seu aplicativo, valerá a pena mergulhar um pouco mais fundo no assunto.

veja o modelo de atividade de visualização do Google Scrolling

AmiNadimi
fonte
1

Uma coisa que é importante notar é que CoordinatorLayout não tem nenhum entendimento inato de um trabalho FloatingActionButton ou AppBarLayout - ele apenas fornece uma API adicional na forma de um Coordinator.Behavior, que permite que as visualizações filho controlem melhor os eventos de toque e gestos bem como declarar dependências entre si e receber callbacks via onDependentViewChanged ().

As visualizações podem declarar um comportamento padrão usando a anotação CoordinatorLayout.DefaultBehavior (YourView.Behavior.class) ou configurá-lo em seus arquivos de layout com o app: layout_behavior = "com.example.app.YourView $ Behavior" atributo. Essa estrutura possibilita a integração de qualquer visualização com o CoordinatorLayout.

Disponível agora! A biblioteca de design já está disponível, portanto, certifique-se de atualizar o Android Support Repository no SDK Manager. Você pode então começar a usar a biblioteca de projetos com uma única nova dependência:

compile 'com.android.support:design:22.2.0' Observe que, como a biblioteca de design depende das Bibliotecas de suporte v4 e AppCompat, elas serão incluídas automaticamente quando você adicionar a dependência da biblioteca de design. Também cuidamos para que esses novos widgets possam ser usados ​​na visualização Design do Android Studio Layout Editor (localize-os em CustomView), oferecendo uma maneira mais fácil de visualizar alguns desses novos componentes.

A biblioteca de design, AppCompat e toda a biblioteca de suporte Android são ferramentas importantes para fornecer os blocos de construção necessários para construir um aplicativo Android moderno e atraente sem construir tudo do zero.

Qaim Raza
fonte
0

O CoordinatorLayouté um superpotente FrameLayout.

Por padrão, se você adicionar vários filhos a um FrameLayout, eles se sobreporão. A FrameLayoutdeve ser usado com mais freqüência para manter uma única visão filha. O principal apelo do CoordinatorLayouté sua capacidade de coordenar as animações e transições das visualizações dentro dele. Usando apenas XML, você pode descrever um layout em que um FAB se move para fora do caminho de um Snackbar de entrada, por exemplo, ou tem um FAB (ou qualquer outra visualização na verdade) que está aparentemente anexado a outro widget e se move na tela com o ferramenta.

Aqui está o tutorial da fonte principal .

Gk Mohammad Emon
fonte