Nouveau Google Now et Google+ de la carte d'interface

Question

Google Now et Google+ (Android) à la fois faire usage d'une carte-comme l'interface.

Je me demandais si quelqu'un avait la moindre idée de la façon dont cette interface peut être répliqué sur Android.

Elles ont toutes les deux très intéressantes, des animations pour afficher les nouvelles cartes trop; toute pensée serait génial.

Answer 1

J'ai posté un tutoriel sur la façon de reproduire / créer des Cartes Google style de mise en page ici.

Étapes clés

1. Créer une mise en page personnalisée
2. Ajouter observateur pour attirer les enfants
3. Animer une alternance de cartes

Voici un extrait de code

@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;
    }

}

Answer 2

Jetez un oeil à http://ryanharter.com/blog/2013/01/31/how-to-make-an-android-card-list/

Copie de l'exemple:

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

L'utiliser comme arrière-plan de votre présentation:

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

Answer 3

==== Démarrer la mise à jour 2014-09-29 ====

Utiliser le CardView de Google bibliothèque de Compatibilité (à partir d'Android 2.1 et+):

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

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

==== Mise à jour ====

(au moins) deux options:

• https://github.com/gabrielemariotti/cardslib

ou

• https://github.com/afollestad/Cards-UI est une bibliothèque d'INTERFACE utilisateur pour montrer les Cartes.

Voir https://github.com/afollestad/Cards-UI/wiki/2.-Intro-Tutorial pour une simple introduction.

Answer 4

J'ai fait une très similaires de Mise en page, vous pouvez la regarder ici https://github.com/Nammari/GooglePlusLayout et pour une vidéo de démonstration ici http://youtu.be/jvfDuJz4fw4 pour l'animation appliquée pour les enfants , pour plus de détails, voir ici http://nammari.tumblr.com/post/41893669349/goolge-plus-layout pour un blog que de clarifier chaque chose .

Answer 5

La carte de regard et la sensation de ne pas être dur. Vous avez juste besoin d'une liste sans diviseurs et votre liste afficher les éléments doivent avoir une marge.

Comme ceci:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_margin="16dp"
    android:layout_height="wrap_content"
    android:background="@android:color/background_light">

     <TextView
             android:layout_width="fill_parent"
             android:layout_height="wrap_content"
             android:paddingTop="16dp"
             android:paddingRight="16dp"
             android:paddingLeft="16dp"
             android:text="Title"
             android:textSize="18dp"
             android:textColor="@android:color/primary_text_holo_light"
             />

     <TextView
             android:layout_width="fill_parent"
             android:layout_height="wrap_content"
             android:paddingRight="16dp"
             android:paddingLeft="16dp"
             android:text="Subtitle"
             android:textSize="14dp"
             android:textColor="@android:color/primary_text_holo_light"
             />

     <ImageView android:layout_marginTop="16dp" 
              android:layout_marginBottom="16dp" 
              android:layout_width="fill_parent"
              android:layout_height="wrap_content"
              android:background="@drawable/background"/> 
</LinearLayout>