web-dev-qa-db-fra.com

Nouvelle interface de carte Google Now et Google+

Google Now et Google+ (Android) utilisent tous deux une interface de type carte.

enter image description here

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

Ils ont tous les deux des animations assez intéressantes pour afficher de nouvelles cartes aussi; toutes les pensées seraient géniales.

androidandroid-layoutgoogle-plusgoogle-now
59
HBG

J'ai publié un tutoriel sur la façon de reproduire/créer une disposition de style Google Cards ici .

Étapes clés

  1. Créer une mise en page personnalisée
  2. Ajouter un observateur pour dessiner des enfants
  3. Animer des cartes alternées

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

}
53
Shardul

Jetez un œil à 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>

Utilisez-le 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>
21
userM1433372

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

Utilisez CardView de la bibliothèque de compatibilité Google (depuis 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>

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

==== Fin de la mise à jour ====

(au moins) deux options:

ou

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

16
userM1433372

J'ai fait une mise en page très similaire que vous pouvez consulter ici https://github.com/Nammari/GooglePlusLayout et pour une démonstration vidéo ici http://youtu.be/jvfDuJz4fw4 = pour l'animation qui s'applique aux enfants, pour plus de détails, regardez ici http://nammari.tumblr.com/post/41893669349/goolge-plus-layout pour un article de blog qui clarifie tout.

enter image description here

10
confucius

L'apparence et la convivialité de la carte ne devraient pas être difficiles. Vous avez juste besoin d'un ListView sans séparateurs et vos éléments d'affichage de liste doivent avoir une marge.

Comme ça:

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

Ont le même besoin et ont commencé à enquêter un peu. J'ai regardé la sortie d'apktool que j'ai pu obtenir depuis l'apk com.google.Android.googlequicksearchbox. (pas de sources seulement les res xmls)

Cette disposition (at_place_card.xml) est utilisée pour afficher un emplacement. Il a trois lignes de texte et deux boutons d'actions (détails et enregistrement) à droite et une image à gauche.

Malheureusement, je ne suis pas en mesure d'obtenir des informations de style depuis l'apk, donc 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 également pu obtenir des informations sur le style. Si vous êtes intéressé, voici un fichier Zip avec les informations que j'ai actuellement (certains fichiers de ressources de google maintenant). https://dl.dropbox.com/u/4379928/Android/googlenow2.Zip

4
dparnas