新的Google即時和Google+卡界面

Question

Google即時和Google+（Android）均使用類似卡片的界面。

我想知道如果任何人有任何想法如何這個接口可以在Android上被複制。

他們都有相當有趣的動畫顯示新的卡也;任何想法都會很棒。

Answer 1

我已經發布了關於如何複製教程/創建谷歌卡片式佈局here。

關鍵步驟

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

有同樣的需要，並已開始調查一下。 我一直在看我已經能夠從com.google.android.googlequicksearchbox apk獲得的apktool輸出。 （沒有資源只有res xmls）

此佈局（at_place_card.xml）用於顯示位置。 右側有三個文本行和兩個動作按鈕（詳細信息和簽入），左側有圖像。

不幸的是，我無法從apk獲取任何樣式信息，所以字體大小，尺寸和顏色只是猜測。

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

更新：現在也能夠得到一些樣式信息。如果你感興趣的話，這裏是一個帶有我目前信息的zip文件（現在有一些來自google的資源文件）。 https://dl.dropbox.com/u/4379928/android/googlenow2.zip

Answer 3

卡的外觀不應該很難。你只需要一個沒有分隔符的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> 

Answer 4

我做了一個佈局非常相似你可以看看這裏 https://github.com/Nammari/GooglePlusLayout 和視頻演示在這裏http://youtu.be/jvfDuJz4fw4 爲獲得適用於兒童，瞭解更多詳情動畫看這裏 http://nammari.tumblr.com/post/41893669349/goolge-plus-layout 的博客貼子，明確每一件事情。

/RES /繪製/ bg_c​​ard：

Answer 5

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

複製的例子看看。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 6

====開始更新2014年9月29日====

使用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的簡單介紹。