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

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.

Juste pour préciser - c'est plus le regard et la sensation de la vue des cartes je suis après. En fait, j'ai besoin de se comporter comme un ListView c'est à dire que je peux remplir l'écran avec des cartes de manière dynamique, mais j'aimerais que chaque ligne de la liste de ressembler à une carte. Si il y a un autre modèle que je pouvais adapter au lieu de cela, ce serait génial
Après des études de vidéo sur youtube, je pense que c'est quelque chose comme un listview avec deux points de vue, l'un pour les cartes fermées et l'autre pour l'ouvrir. Il y a aussi de l'animation entre les deux points de vue... je ne pense pas que nous y besoin de réinventer toutes les API pour obtenir un résultat semblable.
merci de regarder ma réponse ci-dessous

InformationsquelleAutor HBG | 2012-07-24

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

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

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

}

Ce qui est excellent. Merci beaucoup 🙂
Bon! Penser les liens ci-dessous serait utile. github.com/nadavfima/cardsui-for-android nhaarman.github.io/ListViewAnimations
J'ai besoin de mettre des points de vue de façon dynamique dans <com.shardul.nowlayout.NowLayout> </---> . Au lieu de ces textviews dans le tutoriel. Comment y parvenir? J'ai essayé addView(point de vue), mais 🙁
Pouvez-vous joindre le code d'animation trop pour, slide_up_right?

InformationsquelleAutor Shardul

Prendre un coup d'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 mise en page:

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

Vous devrez peut-être ajouter un champ remplissage de la première rect-élément.
Merci. Correction de l'exemple.

InformationsquelleAutor userM1433372

16

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

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

<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.
- Excellent travail , j'espère que ce n'est supporte toutes les version d'android afters 11
- Cardslib est génial, mais un minsdk de 14 fait qu'il est impossible pour moi. Cardsui a aussi un min de 15 et il n'est pas aussi bon à mon humble avis.
InformationsquelleAutor userM1433372
10

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 .
- +1.. vous rock mec
- Juste pour la curiosité, l'utilisation de cette mise en œuvre peut faire défilement lent dans une application qui utilise de grands ensembles de données en raison de l'utilisation de la mémoire? Il ne recycle pas vues comme ListView.
- vous devriez peut-être lire le post de blog et ne manquez pas la performance de la section de l'extrémité... merci pour votre commentaire
- L'amour, mais l'absence de recyclage il fait juste un no go pour moi
InformationsquelleAutor confucius

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>

Selon le commentaire de la grande poste, je pense que c'est plus sur l'animation des cartes, et de la manière dont la liste est construit que le contenu de la mise en page.
Merci pour votre réponse. J'ai été en mesure de reproduire le look - maintenant, je voudrais juste pour obtenir le sens global de trop!
vous pouvez regarder ma réponse

InformationsquelleAutor Maria Neumayer

Ont le même besoin, et ont commencé à enquêter un peu.
J'ai été à la recherche à la apktool sortie, j'ai été en mesure d'obtenir de la com.google.android.googlequicksearchbox apk. (pas seulement avec les sources de la res xmls)

Cette disposition (at_place_card.xml) est utilisé pour l'affichage d'un emplacement.
Il dispose de trois lignes de texte et deux boutons actions (détails et d'archivage) sur la droite et une image sur la gauche.

Malheureusement, je ne suis pas en mesure d'obtenir des informations de style de l'apk, de sorte que la taille de la police, les dimensions et les couleurs ne sont que des suppositions.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout android:orientation="horizontal" android:background="@drawable/card_background" android:layout_width="fill_parent" android:layout_height="wrap_content"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:thegoogle="http://schemas.android.com/apk/res/com.google.android.googlequicksearchbox">
<LinearLayout android:orientation="vertical" android:layout_width="0.0dip" android:layout_height="fill_parent" android:baselineAligned="false" android:layout_weight="1.0">
<FrameLayout android:layout_width="fill_parent" android:layout_height="wrap_content">
<LinearLayout android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="wrap_content" style="@style/CardTextBlock">
<TextView android:id="@id/entry_title" android:layout_width="wrap_content" android:layout_height="wrap_content" style="@style/CardTitle" />
<TextView android:id="@id/open_hours" android:visibility="gone" android:layout_width="wrap_content" android:layout_height="wrap_content" style="@style/CardText" />
<TextView android:textColor="@color/card_light_text" android:id="@id/known_for_terms" android:paddingBottom="4.0dip" android:visibility="gone" android:layout_width="wrap_content" android:layout_height="wrap_content" android:maxLines="4" style="@style/CardText" />
</LinearLayout>
<ImageButton android:layout_gravity="top|right|center" android:id="@id/card_menu_button" android:layout_width="@dimen/card_action_button_height" android:layout_height="@dimen/card_action_button_height" android:contentDescription="@string/accessibility_menu_button" style="@style/CardMenuButton" />
</FrameLayout>
<Space android:layout_width="fill_parent" android:layout_height="0.0dip" android:layout_weight="1.0" />
<Button android:id="@id/details_button" android:visibility="gone" android:layout_width="fill_parent" android:layout_height="@dimen/card_action_button_height" android:text="@string/more_details" android:drawableLeft="@drawable/ic_action_pin" style="@style/CardActionButtonWithIcon" />
<Button android:id="@id/checkin_button" android:layout_width="fill_parent" android:layout_height="@dimen/card_action_button_height" android:text="@string/check_in" android:drawableLeft="@drawable/ic_action_check_in" style="@style/CardActionButtonWithIcon" />
</LinearLayout>
<com.google.android.velvet.ui.CrossfadingWebImageView android:id="@id/place_photo" android:visibility="gone" android:layout_width="0.0dip" android:layout_height="fill_parent" android:scaleType="centerCrop" android:adjustViewBounds="true" android:baselineAligned="false" android:minHeight="@dimen/at_place_card_content_height" android:layout_weight="1.0" android:contentDescription="@string/at_place_card_image_desc" thegoogle:crossfadeDuration="@integer/image_crossfade_duration" />
</LinearLayout>

Mise à jour: a Été en mesure d'obtenir quelques informations de style aussi maintenant. Si vous êtes intéressé, voici un fichier zip avec les renseignements que j'ai actuellement (certains fichiers de ressources de google now).
https://dl.dropbox.com/u/4379928/android/googlenow2.zip

vérifier ma réponse ci-dessous

InformationsquelleAutor dparnas

Vous devez vous connecter pour publier un commentaire.