Lisview下item添加阴影效果

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

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

1.为每个item制作阴影以及圆角效果。

    drawable目录下创建card_background.xml

[java] view plain copy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <layer-list xmlns:android="http://schemas.android.com/apk/res/android" >  
3.     <!-- 一个层叠效果,通过阴影表现出立体效果 -->  
4.     <item><!-- 阴影效果 -->  
5.         <shape android:shape="rectangle" >  
6.             <solid android:color="#CABBBBBB" /><!-- 阴影的颜色 -->  
7.             <corners android:radius="2dp" /><!-- 圆角 -->  
8.         </shape>  
9.     </item>  
10.     <item  
11.         android:bottom="2dp"   
12.         android:left="0dp"  
13.         android:right="0dp"  
14.         android:top="0dp"><!-- 距底部2dp，漏出上面那个item，使其可以显现出阴影 -->  
15.         <shape android:shape="rectangle" >  
16.             <solid android:color="@android:color/white" /><!-- item颜色 -->  
17.             <corners android:radius="2dp" />  
18.         </shape>  
19.     </item>  
20. </layer-list>  

2.为item制作点击后的效果。

 drawable目录下创建card_state_pressed.xml

[java] view plain copy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <layer-list xmlns:android="http://schemas.android.com/apk/res/android" >  
3.     <item>  
4.         <shape android:shape="rectangle" >  
5.             <solid android:color="#ca39883d" />  
6.             <corners android:radius="2dp" />  
7.         </shape>  
8.     </item>  
9.     <item  
10.         android:bottom="2dp"  
11.         android:left="0dp"  
12.         android:right="0dp"  
13.         android:top="0dp">  
14.         <shape android:shape="rectangle" >  
15.             <solid android:color="#ca4fbb5f" />  
16.             <corners android:radius="2dp" />  
17.         </shape>  
18.     </item>  
19. </layer-list>  

3.定义一个selector。

     drawable目录下创建card_background_selector.xm

[java] view plain copy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <selector xmlns:android="http://schemas.android.com/apk/res/android" >  
3.     <item android:drawable="@drawable/card_state_pressed" android:state_pressed="true" />  
4.     <item android:drawable="@drawable/card_background" />  
5. </selector>  

4.定义item布局。

    layout目录下创建list_item_card.xml文件.

这里需要注意的是根布局为FrameLayout，并且需要给其加上左右的padding，因为这是卡片。另外LinearLayout需设置background，即为上面那个selector。

[java] view plain copy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <FrameLayout  
3.     xmlns:android="http://schemas.android.com/apk/res/android"  
4.     android:layout_width="match_parent"  
5.     android:layout_height="wrap_content"  
6.     android:paddingLeft="15dp"  
7.     android:paddingRight="15dp"  
8.     android:descendantFocusability="beforeDescendants"><!-- 为突出卡片效果，需设置左右padding,上下通过listView的divider设置 -->  
9.     <LinearLayout  
10.         android:orientation="vertical"  
11.         android:layout_width="match_parent"  
12.         android:layout_height="wrap_content"  
13.         android:paddingLeft="15dp"  
14.         android:paddingTop="15dp"  
15.         android:paddingBottom="15dp"  
16.         android:paddingRight="15dp"  
17.         android:background="@drawable/card_background_selector"  
18.         android:descendantFocusability="afterDescendants"><!-- 给每个item增加background -->  
19.         <TextView  
20.             android:id="@+id/line1"  
21.             android:layout_width="wrap_content"  
22.             android:layout_height="wrap_content"  
23.             android:text="Text"/>  
24.     </LinearLayout>  
25. </FrameLayout>  

5.创建主布局.

layout目录下新建activity_main.xml.

需要注意的是要设置listView的divider属性为@null,dividerHeight为两个卡片的距离。

[java] view plain copy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <LinearLayout  
3.     xmlns:android="http://schemas.android.com/apk/res/android"  
4.     android:orientation="vertical"  
5.     android:layout_width="match_parent"  
6.     android:layout_height="match_parent"  
7.     android:background="#e2e4fe"><!-- 此处需设置listView背景 -->  
8.     <ListView  
9.         android:id="@+id/card_listView"  
10.         android:layout_width="match_parent"  
11.         android:layout_height="match_parent"  
12.         android:listSelector="@android:color/transparent"  
13.         android:cacheColorHint="@android:color/transparent"  
14.         android:divider="@null"  
15.         android:dividerHeight="10dp" /><!-- 一定要将divider设置为@null,dividerHeight控制卡片上下距离 -->  
16. </LinearLayout>  

6.为listView填充数据.

[java] view plain copy

1. public class MainActivity extends Activity  
2. {  
3.     private ListView listView;  
4.     private static final String[] data = { "北京", "上海", "武汉", "广州", "西安", "南京", "合肥","上海", "武汉", "广州", "西安", "南京", "合肥" };  
5.     @Override  
6.     public void onCreate(Bundle savedInstanceState)  
7.     {  
8.         super.onCreate(savedInstanceState);  
9.         setContentView(R.layout.activity_main);  
10.         listView = (ListView) findViewById(R.id.card_listView);  
11.         /*添加头和尾*/  
12.         listView.addHeaderView(new View(this));  
13.         listView.addFooterView(new View(this));  
14.         listView.setAdapter(new ArrayAdapter<String>(this, R.layout.list_item_card, R.id.line1, data));  
15.                   
16.     }  
17. }