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

Ответ 1

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

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

Выбираемый код (в 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" />

Ответ 2

EDIT: 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>

Ответ 3

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

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

Ответ 4

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

Ответ 5

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

Ответ 6

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

Ответ 7

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

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

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

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