Nowy Interfejs Karty Google Now I Google+
Google Now I Google+ (Android) wykorzystują interfejs podobny do karty.
Zastanawiałem się, czy ktoś ma jakiś pomysł, jak ten interfejs Można replikować na Androidzie.
Obie mają dość ciekawe animacje do wyświetlania nowych kart też; wszelkie myśli byłyby świetne.
6 answers
Opublikowałem tutorial jak replikować / tworzyć układ stylu kart Google tutaj .
Kluczowe kroki
- Tworzenie niestandardowego układu
- Dodaj obserwatora do rysowania dzieci
- Animuj karty przemienne
Heres a code snippet
@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;
}
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-09-07 10:20:34
Spójrz na http://ryanharter.com/blog/2013/01/31/how-to-make-an-android-card-list/
Kopia przykładu:
/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>
Użyj go jako tła układu:
<?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>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-03-03 10:10:21
= = = = Start update 2014-09-29 = = = =
Użyj CardView z biblioteki zgodności Google (z Androidem 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>
Zobacz https://developer.android.com/preview/material/ui-widgets.html
= = = Koniec aktualizacji = = = =
(przynajmniej) dwie opcje:
Lub
Zobacz https://github.com/afollestad/Cards-UI/wiki/2.-Intro-Tutorial dla prostego wprowadzenia.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-09-29 08:38:20
Zrobiłem bardzo podobny Layout, który możecie obejrzeć tutaj https://github.com/Nammari/GooglePlusLayout a dla demo wideo tutaj http://youtu.be/jvfDuJz4fw4 więcej informacji na temat animacji dla dzieci znajdziesz tutaj http://nammari.tumblr.com/post/41893669349/goolge-plus-layout za post na blogu, który wyjaśni każdą rzecz .
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-01-16 00:24:48
Wygląd karty nie powinien być trudny. Potrzebujesz tylko widoku listy bez dzielników, a pozycje widoku listy powinny mieć margines.
Tak:
<?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>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-12-15 22:23:50
Mają tę samą potrzebę i zaczęli trochę badać. Patrzyłem na wyjście apktool, które udało mi się uzyskać z komunikatora.google.android.googlequicksearchbox apk. (brak źródeł tylko res xmls)
Ten układ (at_place_card.xml) służy do wyświetlania lokalizacji. Ma trzy linie tekstu i dwa przyciski akcji (szczegóły i checkin) po prawej stronie i obraz po lewej stronie.
Niestety, nie jestem w stanie uzyskać żadnych informacji stylu z apk, więc rozmiar czcionki, wymiary i kolory to tylko domysły.
<?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>
Aktualizacja: udało się uzyskać informacje o stylu również teraz. Jeśli jesteś zainteresowany tutaj jest plik zip z informacjami mam obecnie (niektóre pliki zasobów z Google now). https://dl.dropbox.com/u/4379928/android/googlenow2.zip
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-08-16 20:05:50