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

Question

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

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

Answer 1

Вы можете создать пользовательскую возможность рисования и применить ее к каждому элементу списка.

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

вытяжке код (в вытяжке \ 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 элементов, как это:

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

Answer 2

Добавить разделитель для элемента 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

Answer 3

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

Answer 4

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

Answer 5

EDIT: Google предоставляет класс, который называется CardView. Я не проверял, но выглядит многообещающе.

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

Существует хороший учебник here и хороший пример этого here.

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

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> 

разреш/Drawable/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> 

Answer 6

возможно, вы можете попробовать это cardPlusUI

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

Answer 7

В «android developer» кратко упоминает в своем ответе, CardView класса может быть легко использован для создания представлений карты.

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

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

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