android - tarjetas - quitar pantalla google now




Nueva interfaz de tarjeta Google Now y Google+ (4)

Google Now y Google+ (Android) hacen uso de una interfaz tipo tarjeta.

Me preguntaba si alguien tenía alguna idea de cómo se puede replicar esta interfaz en Android.

Ambos tienen animaciones bastante interesantes para mostrar nuevas tarjetas también; cualquier pensamiento sería genial


==== Comenzar actualización 2014-09-29 ====

Use CardView de la biblioteca de compatibilidad de Google (desde Android 2.1+):

<!-- A CardView that contains a TextView -->
<android.support.v7.widget.CardView
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:id="@+id/card_view"
    android:layout_gravity="center"
    android:layout_width="200dp"
    android:layout_height="200dp"
    card_view:cardCornerRadius="4dp">

    <TextView
        android:id="@+id/info_text"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</android.support.v7.widget.CardView>

Ver https://developer.android.com/preview/material/ui-widgets.html

==== Fin de actualización ====

(al menos) dos opciones:

o

Consulte https://github.com/afollestad/Cards-UI/wiki/2.-Intro-Tutorial para obtener una introducción simple.


Eche un vistazo a http://ryanharter.com/blog/2013/01/31/how-to-make-an-android-card-list/

Copia del ejemplo:

/res/drawable/bg_card.xml:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle"
            android:dither="true">

            <corners android:radius="2dp"/>

            <solid android:color="#ccc" />

        </shape>
    </item>

    <item android:bottom="2dp">
        <shape android:shape="rectangle"
            android:dither="true">

            <corners android:radius="2dp" />

            <solid android:color="@android:color/white" />

            <padding android:bottom="8dp"
                android:left="8dp"
                android:right="8dp"
                android:top="8dp" />
        </shape>
    </item>
</layer-list>

Úselo como fondo de su diseño:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="?android:attr/listPreferredItemHeight"
    android:padding="12dp">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent" 
        android:layout_marginLeft="6dp"
        android:layout_marginRight="6dp"
        android:layout_marginTop="4dp"
        android:layout_marginBottom="4dp"
        android:background="@drawable/bg_card">

        <!-- Card Contents go here -->

    </LinearLayout>

</FrameLayout>

He publicado un tutorial sobre cómo replicar / crear el diseño de estilo de las tarjetas de Google here .

Pasos clave

  1. Crea un diseño personalizado
  2. Agregar observador para dibujar niños
  3. Animar tarjetas alternas

Aquí hay un fragmento de código

@Override
public void onGlobalLayout() {
    getViewTreeObserver().removeGlobalOnLayoutListener(this);

    final int heightPx = getContext().getResources().getDisplayMetrics().heightPixels;

    boolean inversed = false;
    final int childCount = getChildCount();

    for (int i = 0; i < childCount; i++) {
        View child = getChildAt(i);

        int[] location = new int[2];

        child.getLocationOnScreen(location);

        if (location[1] > heightPx) {
            break;
        }

        if (!inversed) {
            child.startAnimation(AnimationUtils.loadAnimation(getContext(),
                    R.anim.slide_up_left));
        } else {
            child.startAnimation(AnimationUtils.loadAnimation(getContext(),
                    R.anim.slide_up_right));
        }

        inversed = !inversed;
    }

}





google-now