새로운 Google Now 및 Google+ 카드 인터페이스

새로운 Google Now 및 Google+ 카드 인터페이스

---

Google Now와 Google+ (Android)는 모두 카드와 같은 인터페이스를 사용합니다.

이 인터페이스를 Android에서 복제 할 수있는 방법을 아는 사람이 있는지 궁금합니다.

둘 다 새 카드를 표시하는 데 매우 흥미로운 애니메이션이 있습니다. 어떤 생각이라도 좋을 것입니다.

---

여기에 Google 카드 스타일 레이아웃을 복제 / 생성하는 방법에 대한 자습서를 게시했습니다 .

주요 단계

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

}

---

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>

---

==== 업데이트 시작 2014-09-29 ====

Google 호환성 라이브러리 (Android 2.1 이상)에서 CardView를 사용합니다.

<!-- 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 을 참조 하십시오 .

---

https://github.com/Nammari/GooglePlusLayout 에서 볼 수있는 매우 유사한 레이아웃을 만들었고, 여기 에서 비디오 데모를 볼 수 있습니다. http://youtu.be/jvfDuJz4fw4 에서 어린이에게 적용되는 애니메이션에 대한 자세한 내용을 보려면 여기 http://nammari.tumblr.com/post/41893669349/goolge-plus-layout 에서 모든 것을 명확히하는 블로그 게시물을 확인 하세요 .

---

The card look and feel shouldn't be hard. You just need a ListView without dividers and your list view items should have a margin.

Like this:

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

---

Have the same need, and have started investigating a bit. I've been looking at the apktool output I've been able to get from the com.google.android.googlequicksearchbox apk. (no sources only the res xmls)

This layout (at_place_card.xml) is used for displaying a location. It has three text lines and two actions buttons (details and checkin) on the right and an image on the left.

Unfortunately, I am not able to get any style information out from the apk, so the font size, dimensions and colors are just guesses.

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

참고 URL : https://stackoverflow.com/questions/11639991/new-google-now-and-google-card-interface