首页 > 代码库 > 【安卓笔记】快速创建卡片式ListView

【安卓笔记】快速创建卡片式ListView

2024-08-04 19:32:38   212人阅读

首先来看我们要实现的效果：
ListView的每个item都像卡片一样摆在界面上，另外每个item下方有3d阴影效果。



需求明确之后，下面我们就来实现这一效果。

1.为每个item制作阴影以及圆角效果。
    drawable目录下创建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:bottom="2dp" 
        android:left="0dp"
        android:right="0dp"
        android:top="0dp"><!-- 距底部2dp，漏出上面那个item，使其可以显现出阴影 -->
        <shape android:shape="rectangle" >
            <solid android:color="@android:color/white" /><!-- item颜色 -->
            <corners android:radius="2dp" />
        </shape>
    </item>
</layer-list>

2.为item制作点击后的效果。
 drawable目录下创建card_state_pressed.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="#ca39883d" />
            <corners android:radius="2dp" />
        </shape>
    </item>
    <item
        android:bottom="2dp"
        android:left="0dp"
        android:right="0dp"
        android:top="0dp">
        <shape android:shape="rectangle" >
            <solid android:color="#ca4fbb5f" />
            <corners android:radius="2dp" />
        </shape>
    </item>
</layer-list>

3.定义一个selector。
     drawable目录下创建card_background_selector.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:drawable="@drawable/card_state_pressed" android:state_pressed="true" />
    <item android:drawable="@drawable/card_background" />
</selector>

4.定义item布局。
    layout目录下创建list_item_card.xml文件.
这里需要注意的是根布局为FrameLayout，并且需要给其加上左右的padding，因为这是卡片。另外LinearLayout需设置background，即为上面那个selector。
<?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"><!-- 为突出卡片效果，需设置左右padding,上下通过listView的divider设置 -->
	<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/card_background_selector"
		android:descendantFocusability="afterDescendants"><!-- 给每个item增加background -->
		<TextView
			android:id="@+id/line1"
			android:layout_width="wrap_content"
			android:layout_height="wrap_content"
			android:text="Text"/>
	</LinearLayout>
</FrameLayout>

5.创建主布局.
layout目录下新建activity_main.xml.
需要注意的是要设置listView的divider属性为@null,dividerHeight为两个卡片的距离。
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
	xmlns:android="http://schemas.android.com/apk/res/android"
	android:orientation="vertical"
	android:layout_width="match_parent"
	android:layout_height="match_parent"
	android:background="#e2e4fe"><!-- 此处需设置listView背景 -->
	<ListView
		android:id="@+id/card_listView"
		android:layout_width="match_parent"
		android:layout_height="match_parent"
		android:listSelector="@android:color/transparent"
		android:cacheColorHint="@android:color/transparent"
		android:divider="@null"
		android:dividerHeight="10dp" /><!-- 一定要将divider设置为@null,dividerHeight控制卡片上下距离 -->
</LinearLayout>

6.为listView填充数据.
public class MainActivity extends Activity
{
	private ListView listView;
	private static final String[] data = http://www.mamicode.com/{ "北京", "上海", "武汉", "广州", "西安", "南京", "合肥","上海", "武汉", "广州", "西安", "南京", "合肥" };>

经过上面的6步就实现了我们所需的效果啦！

项目地址：https://github.com/Rowandjj/CardStyleListView


【安卓笔记】快速创建卡片式ListView


联系
我们