Как создать интерфейс Google + карты в виде списка?

Question

Как создать интерфейс Google + карты в виде списка?

Я хочу создать listView карточек, но после прочтения этой записи в блоге goolge-plus-layout, я - это жизнеспособное решение для списка чего угодно. Часть анимации кажется слишком интенсивной, чтобы загружать ее, скажем, из списка с более чем 40 элементами одновременно.

Есть ли лучший способ добиться пользовательского интерфейса карты в listView?

27

android android-listview android-cards

Источник

user105167 10 июл '13 в 12:51

7 ответов

Другие вопросы по тегам android android-listview android-cards

user636988 10 июл '13 в 12:58 2013-07-10 12:58 · Answer 1 · 2013-07-10 12:58

Вы можете создать собственный чертеж и применить его к каждому из элементов списка.

Я использую этот для карт в моем пользовательском интерфейсе. Я не думаю, что при таком подходе возникают серьезные проблемы с производительностью.

Код для рисования (в drawable\big_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" >
            <solid android:color="@color/second_grey" />
        </shape>
    </item>
    <item
        android:bottom="10dp"
        android:left="10dp"
        android:right="10dp"
        android:top="10dp">
        <shape android:shape="rectangle" >
            <corners android:radius="3dp" />

            <solid android:color="@color/card_shadow" />
        </shape>
    </item>
    <item
        android:bottom="12dp"
        android:left="10dp"
        android:right="10dp"
        android:top="10dp">
        <shape android:shape="rectangle" >
            <corners android:radius="3dp" />

            <solid android:color="@color/card_white" />
        </shape>
    </item>


</layer-list>

Я применяю фон к своим элементам списка, как это:

<ListView
    android:id="@+id/apps_fragment_list"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:listSelector="@drawable/big_card" />

Если вы хотите добавить это в качестве фона для любого представления (не просто списка), вы просто сделаете пользовательский элемент фона этого вида прорисовываемым:

<TextView
        android:id="@+id/any_view"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/big_card" />

user878126 10 апр '14 в 19:22 2014-04-10 19:22 · Answer 2 · 2014-04-10 19:22

РЕДАКТИРОВАТЬ: Google предоставляет хороший класс под названием CardView. Я не проверял, но это выглядит многообещающе.

Вот предыдущий способ, который также отлично работает (это то, что я написал до редактирования):

Здесь есть хороший учебник и хороший пример.

Короче говоря, это файлы, которые вы можете создать:

определение listView:

android:divider="@null"
android:dividerHeight="10dp"
android:listSelector="@android:color/transparent" 
android:cacheColorHint="@android:color/transparent"
android:headerDividersEnabled="true"
android:footerDividersEnabled="true"

также это:

m_list.addHeaderView(new View(this));
m_list.addFooterView(new View(this));

Рез / рисуем /selector_card_background.xml

<?xml version="1.0" encoding="utf-8"?>

<selector xmlns:android="http://schemas.android.com/apk/res/android">
   <item
      android:state_pressed="true"
      android:drawable="@drawable/layer_card_background_selected" />

   <item android:drawable="@drawable/layer_card_background" />
</selector>

элемент listView:

разреш / макет /list_item_card.xml

<?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="wrap_content"
   android:paddingLeft="15dp"
   android:paddingRight="15dp"
   android:descendantFocusability="beforeDescendants">

   <LinearLayout
      android:orientation="vertical"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:paddingLeft="15dp"
      android:paddingTop="15dp"
      android:paddingBottom="15dp"
      android:paddingRight="15dp"
      android:background="@drawable/selector_card_background"
      android:descendantFocusability="afterDescendants">

      <TextView
         android:id="@+id/text1"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"/>

      <TextView
         android:id="@+id/text2"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"/>

      <TextView
         android:id="@+id/text3"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"/>
   </LinearLayout>
</FrameLayout>

Рез / рисуем /layer_card_background_selected.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <solid android:color="#CABBBBBB"/>
            <corners android:radius="2dp" />
        </shape>
    </item>

    <item
        android:left="0dp"
        android:right="0dp"
        android:top="0dp"
        android:bottom="2dp">
        <shape android:shape="rectangle">
            <solid android:color="#CCCCCC"/>
            <corners android:radius="2dp" />
        </shape>
    </item>
</layer-list>

Рез / рисуем /layer_card_background.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <solid android:color="#CABBBBBB"/>
            <corners android:radius="2dp" />
        </shape>
    </item>

    <item
        android:left="0dp"
        android:right="0dp"
        android:top="0dp"
        android:bottom="2dp">
        <shape android:shape="rectangle">
            <solid android:color="@android:color/white"/>
            <corners android:radius="2dp" />
        </shape>
    </item>
</layer-list>

user553779 06 авг '14 в 04:51 2014-08-06 04:51 · Answer 3 · 2014-08-06 04:51

Может быть, вы можете попробовать эту карту PlusUI

Я использовал это для некоторых моих проектов

4

Источник

user553779 06 авг '14 в 04:51

user2550504 14 фев '14 в 12:26 2014-02-14 12:26 · Answer 4 · 2014-02-14 12:26

Если вам нужен только ListView, имитирующий внешний вид карт, вы можете использовать 9-патч в качестве фона для элементов списка, чтобы они выглядели как карты. Вы можете найти 9-патч и некоторые другие советы и объяснения здесь: http://www.tiemenschut.com/simply-get-cards-ui-look/

2

Источник

user2550504 14 фев '14 в 12:26

user1090238 24 окт '13 в 20:02 2013-10-24 20:02 · Answer 5 · 2013-10-24 20:02

Добавьте разделитель для элемента ListView и отступов:

 android:divider="@android:color/transparent"
    android:dividerHeight="1dip"

Добавьте RelativeLayout в свой LinearLayout для ListItem с некоторыми необходимыми отступами:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="100dp"
    android:orientation="vertical"
    android:padding="3dp" >

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"

        android:background="@drawable/rowshadow" >

        <TextView
            android:id="@+id/title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
...

Добавить фон к элементу списка, например:

<?xml version="1.0" encoding="utf-8"?>
   <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
     <item >
        <shape 
          android:shape="rectangle">
              <solid android:color="@android:color/darker_gray" />
              <corners android:radius="0dp"/>
        </shape>
     </item>
     <item android:right="1dp" android:left="1dp" android:bottom="2dp">
        <shape 
          android:shape="rectangle">
              <solid android:color="@android:color/white"/>
              <corners android:radius="0dp"/>
        </shape>
     </item>
   </layer-list>

Используйте https://github.com/elcrion/demo.cardlistview в качестве примера. Это как-то близко к стилю Google

user235635 28 дек '14 в 13:49 2014-12-28 13:49 · Answer 6 · 2014-12-28 13:49

Как кратко упоминает " разработчик Android" в своем ответе, класс CardView можно использовать для простого создания представлений карт.

Просто оберните свои виджеты пользовательского интерфейса в элемент CardView, и вы готовы к работе. См. Краткое введение в виджет CardView по адресу https://developer.android.com/training/material/lists-cards.html.

Классу CardView требуется библиотека поддержки v7, не забудьте добавить зависимости в ваш файл.gradle!

compile 'com.android.support:cardview-v7:21.0.+'

user1304940 16 янв '14 в 11:26 2014-01-16 11:26 · Answer 7 · 2014-01-16 11:26

Существует библиотека, которая помогает создавать карты пользовательского интерфейса в Android https://github.com/gabrielemariotti/cardslib

1

Источник

user1304940 16 янв '14 в 11:26