如何编码实现卡片式的listView

一直很喜欢使用知乎日报，也一直很钟情于知乎日报的卡片式设计，不过基于某种原因，一直在项目中没怎么使用到，恰好今天在弄毕设的时候，想到确实可以再自己listView的美化下一些功夫，于是自然就想到了卡片式，，便着手研究了下，实现了这种效果。效果图如下：

首先先写好我们的布局，既然是listView，当然就少不了两个基本的布局啦，一个就是大家熟悉的listView（我这里使用的是开源的XlistVIew），另一个就是listView的item布局啦。

ListView.xml如下：

相应的其Item布局如下：

<FrameLayout xmlns:android=""android:layout_width="match_parent"android:layout_height="wrap_content"android:paddingLeft="5dp"android:paddingRight="5dp"android:descendantFocusability="beforeDescendants"><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="vertical"android:paddingBottom="8dp"android:paddingLeft="5dp"android:paddingRight="5dp"android:paddingTop="8dp"android:background="@drawable/item_card_background_seletor"android:descendantFocusability="afterDescendants" ><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="vertical" ><TextViewandroid:id="@+id/tv_title"android:layout_width="match_parent"android:layout_height="wrap_content"android:text="哀家就是这么美！火了！"android:textColor="@color/black"android:textSize="15sp" /></LinearLayout><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:layout_marginTop="5dp"android:orientation="horizontal" ><LinearLayoutandroid:layout_width="0dp"android:layout_height="match_parent"android:layout_weight="1"android:orientation="vertical" ><LinearLayoutandroid:layout_width="match_parent"android:layout_height="0dp"android:layout_weight="1"android:gravity="top"android:orientation="vertical" ><TextViewandroid:id="@+id/tv_content"android:layout_width="match_parent"android:layout_height="wrap_content"android:gravity="top"android:maxLines="2"android:text="今天在深圳地铁上发生的一件颇有争议的撕逼大战，内容火爆，引爆新一年流行网络流行语"android:textColor="@color/font_gray"android:textSize="12sp" /></LinearLayout><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:layout_gravity="bottom"android:orientation="horizontal" ><TextViewandroid:id="@+id/tv_date"android:layout_width="0dp"android:layout_height="match_parent"android:layout_weight="1"android:gravity="center_vertical|left"android:text="22小时前|100次阅读"android:textColor="@color/font_gray"android:textSize="12sp" /></LinearLayout></LinearLayout><ImageViewandroid:id="@+id/img_news"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="center_vertical"android:layout_marginRight="5dp"android:src="@drawable/default_image" /></LinearLayout></LinearLayout></FrameLayout>注意：这里要注意的是因为是卡片式的风格，最外层必须使用FrameLayout。

当然为了实现每个item的点击的效果以及实现更为卡片式的3D效果，在其底部实现阴影效果，此时我们加入了一个背景和点击时显示的背景，代码如下：

item_card_background_selector.xml:

<selector xmlns:android=""><item android:drawable="@drawable/item_card_state_pressed" android:state_focused="true"></item><item android:drawable="@drawable/item_card_state_pressed" android:state_pressed="true"></item><item android:drawable="@drawable/item_card_background"></item></selector>1.其中点击时的背景效果（文件放于drawable中）：

item_card_state_pressed.xml：

自己变得跟水晶一般透明，

相关文章：

你感兴趣的文章：

标签云：