android - recyclerview - ¿Qué es CoordinatorLayout?

com.android.support:appcompat-v7 last version

Question

Acabo de echar un vistazo a la aplicación de demostración de la nueva biblioteca de diseño de soporte de Android. Es proporcionado por Chris Banes en github . A través de la aplicación, CoordinatorLayout se usa mucho. Además, muchas de las clases de biblioteca de diseño de soporte, como FloatingActionButton , SnackBar , AppBarLayout , etc. se comportan de manera diferente cuando se usan dentro de CoordinatorLayout .

¿Alguien puede arrojar algunas luces sobre lo que es CoordinatorLayout y cómo es diferente de otros ViewGroup s en Android, o al menos proporcionar la ruta correcta hacia el aprendizaje CoordinatorLayout .

Answer 1

¿Qué es un diseño coordinador? No dejes que el nombre elegante te engañe, no es más que un FrameLayout con esteroides

Para comprender mejor lo que es / hace un CoordinatorLayout , primero debe comprender / tener en cuenta lo que significa Coordinar.

Si buscas en Google la palabra

Coordinar

Esto es lo que obtienes:

Creo que estas definiciones ayudan a describir lo que hace un CoordinatorLayout por sí solo y cómo se comportan las vistas dentro de él.

Un CoordinatorLayout (un ViewGroup) trae los diferentes elementos (Vistas secundarias) de una (̶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̶t̶i̶o̶n̶̶̶̶̶̶̶̶̶̶̶̶̶

Con la ayuda de un CoordinatorLayout, las vistas de los niños trabajan juntas de manera armoniosa para implementar comportamientos increíbles como

arrastres, golpes, lanzamientos o cualquier otro gesto.

Vistas dentro de un CoordinatorLayout negocian con otros para trabajar juntos de manera efectiva especificando estos Behaviors

Un CoordinatorLayout es una característica genial del diseño de materiales que ayuda a crear diseños atractivos y armonizados.

Todo lo que tiene que hacer es ajustar las vistas de su hijo dentro de 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>

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

Lo que esto nos da es un diseño que se puede desplazar para contraer la barra de herramientas y ocultar el botón de acción flotante

Abierto:

Cerrado:

Answer 2

Aquí está lo que estás buscando.

de los documentos

la biblioteca de diseño presenta CoordinatorLayout , un diseño que proporciona un nivel adicional de control sobre los eventos táctiles entre las vistas secundarias, algo que aprovechan muchos de los componentes de la biblioteca de diseño.

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

en este enlace verá los videos de demostración de todas las vistas mencionadas anteriormente.

espero que esto ayude :)

Answer 3

Para dar una instantánea rápida de lo que es útil en la documentación de Android :

Use CoordinatorLayout para simplemente controlar el comportamiento relacional de sus vistas,

Por ejemplo, si desea que su ToolBar se colapse u oculte. Google lo hizo realmente fácil al introducir AppBarLayout & CollapsingToolbarLayout, que funcionan mejor bajo CoordinatorLayout.

La otra situación más utilizada es cuando desea que un FloatingActionButton se pegue en la parte inferior de su CollapsingToolbar y se mueva con él, colocándolos bajo un coordinatorLayout y use app:layout_anchor="@id/YourAppBarId" para el pegamento (!) Y app:layout_anchorGravity="bottom|end" ya que la posición será suficiente para que veas el trabajo mágico.

Al usar este diseño como contexto, las vistas secundarias tendrán una mejor colaboración y se comportarán de manera inteligente porque se conocerán entre sí a través del contexto CoordinatorLayout, esto significa que sus Botones de acción flotante ya no se superpondrán con una barra de snack, etc.

estos fueron solo un resumen rápido de las partes más útiles, por lo que si desea ahorrar más tiempo en la animación de su aplicación, valdrá la pena profundizar un poco más en el tema.

ver la plantilla de actividad de la vista de desplazamiento de Google

Answer 4

Un punto adicional a tener en cuenta. Desde que OP preguntó específicamente

Además, muchas de las clases libabry de diseño de soporte como FloatingActionButton, SnackBar, AppBarLayout, etc. se comportan de manera diferente cuando se usan dentro de CoordinatorLayout.

Y supongo que es por esto.

CoordinatorLayout es un FrameLayout súper potente.

Botón FAB, SnackBar funciona en el concepto de FrameLayout, y dado que CoordinatorLayout tiene la funcionalidad de FrameLayout, puede hacer que otras vistas se comporten de manera diferente.

Answer 5

Una cosa que es importante tener en cuenta es que CoordinatorLayout no tiene una comprensión innata de un trabajo FloatingActionButton o AppBarLayout: solo proporciona una API adicional en forma de Coordinator.Behavior, que permite que las vistas infantiles controlen mejor los eventos táctiles y los gestos así como declarar dependencias entre sí y recibir devoluciones de llamada a través de onDependentViewChanged ().

Las vistas pueden declarar un comportamiento predeterminado mediante el uso de la anotación CoordinatorLayout.DefaultBehavior (YourView.Behavior.class), o establecerlo en sus archivos de diseño con la aplicación: layout_behavior = "com.example.app.YourView $ Behavior". Este marco hace posible que cualquier vista se integre con CoordinatorLayout.

¡Disponible ahora! La biblioteca de diseño ya está disponible, así que asegúrese de actualizar el repositorio de soporte de Android en el SDK Manager. Luego puede comenzar a usar la biblioteca de diseño con una única dependencia nueva:

compile ''com.android.support:design:22.2.0'' Tenga en cuenta que, dado que la biblioteca de diseño depende de las bibliotecas de soporte de Support v4 y AppCompat, se incluirán automáticamente cuando agregue la dependencia de la biblioteca de diseño. También nos aseguramos de que estos nuevos widgets se puedan usar en la vista de diseño del editor de diseño de Android Studio (encuéntrelos en CustomView), lo que le brinda una forma más fácil de obtener una vista previa de algunos de estos nuevos componentes.

La biblioteca de diseño, AppCompat y toda la biblioteca de soporte de Android son herramientas importantes para proporcionar los bloques de construcción necesarios para crear una aplicación de Android moderna y de excelente aspecto sin crear todo desde cero.

Answer 6

CoordinatorLayout es esencialmente el diseño del marco con muchas capacidades que es obvio por el nombre, automatiza la coordinación entre sus hijos y ayuda a construir hermosas vistas. Su implementación se puede ver en la aplicación Google Play Store. Cómo la barra de herramientas colapsa y cambia de color.

Lo mejor de CoordinatorLayout es el comportamiento que damos a sus descendientes directos o indirectos. Debe haber visto mientras se desplaza toda la IU se pone en movimiento. Es muy probable que el comportamiento esté haciendo su magia.