新的Google即时和Google+卡界面

Question

Google即时和Google +(Android)都使用类似卡片的界面.

我想知道是否有人知道如何在Android上复制此界面.

它们都有非常有趣的动画来展示新卡片; 任何想法都会很棒.

Answer 1

我已经发布了关于如何复制/创建谷歌卡片式布局的教程在这里.

关键步骤

1. 创建自定义布局
2. 为绘制孩子添加观察者
3. 动画交替卡片

下面是一段代码片段

@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

请查看http://ryanharter.com/blog/2013/01/31/how-to-make-an-android-card-list/

示例副本:

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

使用它作为布局的背景:

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

====开始更新2014-09-29 ====

使用Google兼容性库中的CardView(来自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>

请参阅https://developer.android.com/preview/material/ui-widgets.html

====结束更新====

(至少)两种选择:

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

要么

• https://github.com/afollestad/Cards-UI是用于显示卡片的UI库.

有关简单介绍,请参阅https://github.com/afollestad/Cards-UI/wiki/2.-Intro-Tutorial.

Answer 4

我做了一个非常相似的布局,你可以在这里查看https://github.com/Nammari/GooglePlusLayout 和这里 的视频演示http://youtu.be/jvfDuJz4fw4 ,了解适用于儿童的动画,了解更多详情这里 http://nammari.tumblr.com/post/41893669349/goolge-plus-layout 是一篇博文,阐明了每一件事.

Answer 5

卡的外观和感觉应该不难.你只需要一个没有分隔符的ListView,你的列表视图项应该有一个余量.

像这样:

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