android - telefonicos - google contacts navegador

¿Cómo la aplicación de contactos de Android L colapsó su barra de herramientas?

Question

He intentado reproducir la forma en que la aplicación Contactos en la versión 5.0 contrae la barra de herramientas cuando se desplaza la vista de lista.

Galería de capturas de pantalla que demuestran la interacción deseada. Observe el colapso de la barra de herramientas en etapas, donde muestra buscar + último contacto, se desvanece el último contacto, colapsa el último contacto, colapsa la búsqueda, dejando solo las pestañas.

Hasta ahora, tengo una barra de herramientas situada sobre una vista de reciclador en LinearLayout, y la barra de herramientas se usa como una barra de acciones, no de forma independiente.

No puedo entender cómo interceptar el evento táctil en la vista del reciclador y hacer que encoja la barra de herramientas, y luego devolver el evento de desplazamiento a la vista del reciclador. Intenté poner todo en una vista de desplazamiento, pero luego la recicladora no pudo calcular su altura correctamente y no mostró contenido. Traté de sobreescribir el desplazamiento en el reciclador, y descubrí que solo me avisaría cuando comenzara un evento de desplazamiento y me proporcionaría la primera identificación de tarjeta visible.

La forma en que se ve bien, pero no puedo trabajar para mi vida, es esta:

getSupportActionBar().setHideOnContentScrollEnabled(true);

Que devuelve:

 Caused by: java.lang.UnsupportedOperationException: Hide on content scroll is not supported in this action bar configuration.

El uso de una barra de acciones tradicional, colocar una barra de herramientas debajo y establecer hideoncontentscrollenabled tampoco funcionó, el desplazamiento nunca desencadenó el método hide en la barra de acciones.

- editar - Pude obtener hideOnContentScrollEnabled trabajando en una vista de lista con una barra de acciones tradicional, pero el comportamiento no es el mismo que el de la aplicación de contactos. Claramente, este no es el método que usaron: simplemente activa .hide () en la barra de acciones cuando ocurre un evento fling en una vista de lista, que es notablemente diferente de la aplicación de contactos, que arrastra la barra de herramientas junto con el evento de desplazamiento. - / editar -

Así que abandoné esa ruta, y puse fill_parent en la altura de la vista card, y animé un colapso en la barra de herramientas. Pero ¿cómo lo disparo para que siga el evento táctil y luego devuelve el evento táctil a la vista de reciclador?

activity_main.xml

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    >

    <android.support.v7.widget.Toolbar
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:minHeight="?android:attr/actionBarSize"
        android:background="@color/colorPrimary"
        />

    <fragment android:name="me.myapplication.FragmentTab"
          android:id="@+id/tab_fragment"
          android:layout_width="match_parent"
          android:layout_height="wrap_content" />
</LinearLayout>

fragment_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center_horizontal"
    android:orientation="vertical"
    android:padding="8dp"
    android:background="#eeeeee"
    >

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

</LinearLayout>

styles.xml

...
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
...

MainActivity.java

Toolbar toolbar = (Toolbar)findViewById(R.id.toolbar);

// Disable the logo in the actionbar, as per material guidelines
toolbar.getMenu().clear();
toolbar.setTitle("My toolbar");
setSupportActionBar(toolbar);

Answer 1

A partir de junio de 2015, el efecto deseado se puede lograr a través de la llamada CollapsingToolbarLayout de la nueva biblioteca de soporte de diseño.

Basado en el código de muestra github.com/chrisbanes/cheesesquare , estoy pensando que:

• la vista de búsqueda card es hija de la barra de herramientas
• la visita cardview de llamada perdida pertenece a la barra de herramientas collapsingtool con el atributo collapseMode establecido en pin

<android.support.design.widget.AppBarLayout
    android:id="@+id/appbar"
    android:layout_width="match_parent"
    android:layout_height="112dp"
    android:fitsSystemWindows="true"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

    <android.support.design.widget.CollapsingToolbarLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:minHeight="?attr/actionBarSize"
        android:fitsSystemWindows="true"
        app:layout_scrollFlags="scroll|enterAlwaysCollapsed|enterAlways">

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

            <!-- Search layout -->
            <android.support.v7.widget.CardView   
            </android.support.v7.widget.CardView>

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

        <!-- Last call card view-->
        <android.support.v7.widget.CardView
            app:layout_collapseMode="pin">               
        </android.support.v7.widget.CardView>

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

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

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    app:layout_behavior="@string/appbar_scrolling_view_behavior">

    <android.support.design.widget.TabLayout
        android:id="@+id/tabs"
        android:layout_width="match_parent"
        android:layout_height="48dp"
        android:background="@color/primary_color"
        app:layout_scrollFlags="scroll"/>

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</LinearLayout>

Answer 2

Bueno, no tengo idea de cómo lo hacen, pero ... ¿por qué no echas un vistazo al código fuente? Afortunadamente para nosotros, la aplicación Contactos sigue siendo de código abierto en Android L (otros no tuvieron tanta suerte como Contactos, como Mail, que ya no funciona en L o Teclado, que dejaron de actualizar más desde el lanzamiento de su propietario Teclado de Google).

De todos modos, aquí está el código fuente que creo que deberías ver: https://github.com/android/platform_packages_apps_contacts/blob/master/src%2Fcom%2Fandroid%2Fcontacts%2Factivities%2FActionBarAdapter.java

Tenga en cuenta la update(boolean skipAnimation) del método update(boolean skipAnimation) en la línea 311, que llama a animateTabHeightChange(int start, int end) (línea 437).

Creo que toda la magia sucede allí ;-)

Answer 3

Encontré esta biblioteca que parece hacer lo que estás buscando: https://github.com/kmshack/Android-ParallaxHeaderViewPager y esta https://github.com/flavienlaurent/NotBoringActionBar

Puedes reproducir el video para ver el comportamiento: https://www.youtube.com/watch?v=sCP-b0a1x5Y

Puede que no sea la "nueva" forma estándar de hacerlo con ToolBar, pero podría darte una idea al inspeccionar el código. Parece adjuntar un OnScrollListener al contenido desplazable y luego desencadenar cambios en el tamaño de la barra.

Answer 4

La aplicación de contacto de Android no tiene una solución fácil de conectar y usar que pueda usar en su propia aplicación.

Hace una implementación completa, esencialmente haciéndolo de la misma manera que lo haría si estuviera implementándolo desde cero. Por contexto, antes de mirar el código, tenga en cuenta cómo se presentan las vistas:

https://github.com/android/platform_packages_apps_contacts/blob/lollipop-release/res/layout/quickcontact_activity.xml

El MultiShrinkScroller es un FrameLayout que intermedia el comportamiento de desplazamiento, pero lo principal está en LinearLayout, por lo que la reducción de la altura de las vistas más altas "desplazará" las vistas inferiores hacia arriba.

El archivo clave para la implementación es este:

https://github.com/android/platform_packages_apps_contacts/blob/lollipop-release/src/com/android/contacts/widget/MultiShrinkScroller.java

public void scrollTo(int x, int y) {
    final int delta = y - getScroll();
    boolean wasFullscreen = getScrollNeededToBeFullScreen() <= 0;
    if (delta > 0) {
        scrollUp(delta);
    } else {
        scrollDown(delta);
    }
    updatePhotoTintAndDropShadow();
    updateHeaderTextSizeAndMargin();
    //... other stuff
}

private void scrollUp(int delta) {

    // Collapse higher views first
    if (getTransparentViewHeight() != 0) {
        final int originalValue = getTransparentViewHeight();
        setTransparentViewHeight(getTransparentViewHeight() - delta);
        setTransparentViewHeight(Math.max(0, getTransparentViewHeight()));
        delta -= originalValue - getTransparentViewHeight();
    }

    // Shrink toolbar as needed
    final ViewGroup.LayoutParams toolbarLayoutParams
            = mToolbar.getLayoutParams();
    if (toolbarLayoutParams.height > getFullyCompressedHeaderHeight()) {
        final int originalValue = toolbarLayoutParams.height;
        toolbarLayoutParams.height -= delta;
        toolbarLayoutParams.height = Math.max(toolbarLayoutParams.height,
                getFullyCompressedHeaderHeight());
        mToolbar.setLayoutParams(toolbarLayoutParams);
        delta -= originalValue - toolbarLayoutParams.height;
    }

    // Finally, scroll content if nothing left to shrink
    mScrollView.scrollBy(0, delta);
}

updatePhotoTintAndDropShadow(); y updateHeaderTextSizeAndMargin(); maneje el cambio de tinte y texto a medida que se contrae para que se convierta en la apariencia de una barra de herramientas / barra de herramientas común.

Puede tomar el archivo MultiShrinkScroller y adaptarlo para su propio uso, pero probablemente haya implementaciones más fáciles hoy en día (incluidas las de la biblioteca de diseño de Android).

Answer 5

Para mí https://mzgreen.github.io/2015/06/23/How-to-hideshow-Toolbar-when-list-is-scrolling%28part3%29/ ha ayudado. Se encuentra un código fuente aquí: https://github.com/mzgreen/HideOnScrollExample/tree/master/app/src/main .

Una vista de reciclaje en su diseño debe verse así:

<android.support.v7.widget.RecyclerView
    android:id="@+id/recyclerView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_gravity="fill_vertical"
    app:layout_behavior="@string/appbar_scrolling_view_behavior" />

Tenga en cuenta que después de iniciar una aplicación, aparecen 2 barras de herramientas (barra de acciones y barra de herramientas). Entonces en tu activity.java deberías escribir así:

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    // Hide ActionBar.
    supportRequestWindowFeature(WindowCompat.FEATURE_ACTION_BAR);
    getSupportActionBar().hide();
    setContentView(R.layout.your_activity_layout);
    ...

La barra de herramientas se personaliza como se muestra aquí: https://.com/a/26548766/2914140 . Es decir, aparece sin título y otros elementos, por lo que puedes agregarlos en un diseño.

Answer 6

Todavía no investigué el código fuente, pero este tipo parece haber hecho la vida más fácil pero esclarecedora.

https://github.com/ksoichiro/Android-ObservableScrollView

EDITAR

Google acaba de lanzar Android Design Library . Por favor, eche un vistazo ya que contiene todos los efectos del colapso de barras de herramientas y mucho más.

Answer 7

¡No se requiere una biblioteca de terceros ahora! Android proporciona oficialmente la biblioteca. Puede colapsar la barra de herramientas y hacer muchos otros ajustes.

Mira este blog de android-developer

Y no olvide agregar esta dependencia en su archivo build.gradle .

compile ''com.android.support:design:22.2.0''