Android新特性之CardView卡片效果圆角加阴影的简单使用

Android新特性之CardView的简单使用

在上篇文章中，我们学习了RecyclerView的简单使用，这边文章我们学习下Android 5.0的另一个新增加的控件CardView。首先讲解写CardView的基本使用，然后在结合RecyclerView使用CardView进行填充写个小实例。

环境配置

一、在Eclipse的环境中配置同上篇文章，引入android.support.v7包进行使用。参照文章：RecyclerView的简单使用。
二、在Android Studio中进行使用，我们需要只需要在Gradle中添加CardView包的依赖即可进行使用。

 

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

基本使用

CardView是一个新增加的UI控件，我们先在代码中定义一个CardView的变量，然后查看源码看看这是个什么玩意。话说Android Studio中查看源码特方便，比Eclipse强很多。源码先：

 

1. public class CardView extends FrameLayout implements CardViewDelegate {

2. ...

3. }

从源码看，CardView继承FrameLayout，所以CardView是一个ViewGroup，我们可以在里面添加一些控件进行布局。既然CardView继承FrameLayout，而且Android中早已有了FrameLayout布局，为什么还有使用CardView这个布局控件呢？我们先来看看官网对此类的注释

A FrameLayout with a rounded corner background and shadow.

这个FrameLayout特殊点就是有rounded corner（圆角）和shadow（阴影），这个就是它的特殊之处，回首往日，我们需要自定义shape文件进行实现圆角和阴影的设计，现在google的大牛已经把它设计为CardView的属性供我们设置进行使用。下面我们看看CardView新增了哪些属性：

• CardView_cardBackgroundColor 设置背景色
• CardView_cardCornerRadius 设置圆角大小
• CardView_cardElevation 设置z轴阴影
• CardView_cardMaxElevation 设置z轴最大高度值
• CardView_cardUseCompatPadding 是否使用CompadPadding
• CardView_cardPreventCornerOverlap 是否使用PreventCornerOverlap
• CardView_contentPadding 内容的padding
• CardView_contentPaddingLeft 内容的左padding
• CardView_contentPaddingTop 内容的上padding
• CardView_contentPaddingRight 内容的右padding
• CardView_contentPaddingBottom 内容的底padding

card_view:cardUseCompatPadding 设置内边距，V21+的版本和之前的版本仍旧具有一样的计算方式

card_view:cardPreventConrerOverlap 在V20和之前的版本中添加内边距，这个属性为了防止内容和边角的重叠

下面开始简单的进行使用：
1、普通使用效果

 

1. <android.support.v7.widget.CardView

2. android:layout_width="match_parent"

3. android:layout_height="wrap_content">

4. <TextView

5. android:layout_width="match_parent"

6. android:layout_height="70dp"

7. android:text="正常使用效果"

8. android:gravity="center_horizontal|center_vertical"

9. android:textColor="#000000"

10. android:textSize="20sp"

11. android:padding="10dp"

12. android:layout_margin="10dp"/>

13. </android.support.v7.widget.CardView>

效果图： 

2、增加背景色和圆角的效果，注意我们此时使用background属性是没效果的：

 

1. <android.support.v7.widget.CardView

2. android:layout_width="match_parent"

3. android:layout_height="wrap_content"

4. app:cardBackgroundColor="#669900"

5. app:cardCornerRadius="10dp">

6. ...

7. </android.support.v7.widget.CardView>

效果图： 

3、设置z轴阴影

1. <android.support.v7.widget.CardView

2. android:layout_width="match_parent"

3. android:layout_height="wrap_content"

4. app:cardBackgroundColor="#669900"

5. app:cardElevation="20dp"

6. app:cardCornerRadius="10dp">

7. ...

8. </android.support.v7.widget.CardView>

效果图： 

通过上面的演示，我们发现CardView的卡片布局效果很不错，如果用在ListView、RecyclerView中一定也有不错的效果，那么现在我们来使用下。

首先定义RecyclerView的item的布局：

 

1. <android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"

2. xmlns:app="http://schemas.android.com/apk/res-auto"

3. app:cardBackgroundColor="#80cbc4"

4. app:cardCornerRadius="10dp"

5. app:cardPreventCornerOverlap="true"

6. app:cardUseCompatPadding="true"

7. android:layout_width="match_parent"

8. android:layout_height="wrap_content">

9. <RelativeLayout

10. android:layout_width="match_parent"

11. android:layout_height="100dp"

12. android:padding="5dp">

13. <ImageView

14. android:id="@+id/picture"

15. android:layout_width="match_parent"

16. android:layout_height="match_parent"

17. android:layout_centerInParent="true"

18. android:scaleType="centerCrop" />

19. <TextView

20. android:clickable="true"

21. android:id="@+id/name"

22. android:layout_width="match_parent"

23. android:layout_height="match_parent"

24. android:layout_marginBottom="10dp"

25. android:layout_marginRight="10dp"

26. android:gravity="right|bottom"

27. android:textColor="@android:color/white"

28. android:textSize="24sp" />

29. </RelativeLayout>

30.  

31. </android.support.v7.widget.CardView>

然后定义一个交互的实体：

 

1. package com.example.dsw.cardviewdemo;

2.  

3. /**

4. * Created by dsw on 2015/9/30.

5. */

6. public class ImageInfor {

7. private String name;

8. private int imageId;

9.  

10. public ImageInfor(int imageId, String name) {

11. this.imageId = imageId;

12. this.name = name;

13. }

14.  

15. public int getImageId() {

16. return imageId;

17. }

18.  

19. public void setImageId(int imageId) {

20. this.imageId = imageId;

21. }

22.  

23. public String getName() {

24. return name;

25. }

26.  

27. public void setName(String name) {

28. this.name = name;

29. }

30. }

然后我们直接在MainActivity中进行处理。

 

1. public class MainActivity extends Activity {

2. private RecyclerView mRecyclerView;

3. @Override

4. protected void onCreate(Bundle savedInstanceState) {

5. super.onCreate(savedInstanceState);

6. setContentView(R.layout.activity_main);

7. mRecyclerView = (RecyclerView) findViewById(R.id.recycler_view);

8. List<ImageInfor> list = new ArrayList<>();

9. list.add(new ImageInfor(R.mipmap.caiyilin, "蔡依林"));

10. list.add(new ImageInfor(R.mipmap.ulinxinru, "林心如"));

11. list.add(new ImageInfor(R.mipmap.caiyilin,"蔡依林"));

12. list.add(new ImageInfor(R.mipmap.ulinxinru, "林心如"));

13. list.add(new ImageInfor(R.mipmap.caiyilin,"蔡依林"));

14. list.add(new ImageInfor(R.mipmap.ulinxinru, "林心如"));

15.  
16.  

17. RecyclerView.LayoutManager manager = new LinearLayoutManager(this);

18. mRecyclerView.setLayoutManager(manager);

19. mRecyclerView.setItemAnimator(new DefaultItemAnimator());

20. MyAdapter myAdapter = new MyAdapter(list);

21. mRecyclerView.setAdapter(myAdapter);

22. myAdapter.setOnItemClick(new OnItemClick(){

23. @Override

24. public void onItemClick(View view, int position) {

25. Toast.makeText(getApplication(),"点击了：" + position,Toast.LENGTH_SHORT).show();

26. }

27. });

28. }

29.  

30. class MyAdapter extends RecyclerView.Adapter<MyAdapter.MyViewHolder>{

31. private List<ImageInfor> list;

32. public MyAdapter(List<ImageInfor> list){

33. this.list = list;

34. }

35. @Override

36. public MyViewHolder onCreateViewHolder(ViewGroup viewGroup, int i) {

37. View view = LayoutInflater.from(viewGroup.getContext()).inflate(R.layout.carditem,viewGroup,false);

38. return new MyViewHolder(view);

39. }

40.  

41. @Override

42. public void onBindViewHolder(MyViewHolder myViewHolder, int i) {

43. myViewHolder.iv_backgroud.setBackgroundResource(list.get(i).getImageId());

44. myViewHolder.tv_title.setText(list.get(i).getName());

45. final int position = i;

46. myViewHolder.itemView.setOnClickListener(new View.OnClickListener() {

47. @Override

48. public void onClick(View view) {

49. if(onItemClick != null){

50. onItemClick.onItemClick(view,position);

51. }

52. }

53. });

54. }

55.  

56. @Override

57. public int getItemCount() {

58. return list.size();

59. }

60.  

61. class MyViewHolder extends RecyclerView.ViewHolder {

62. private ImageView iv_backgroud;

63. private TextView tv_title;

64. public MyViewHolder(View itemView) {

65. super(itemView);

66. iv_backgroud = (ImageView) itemView.findViewById(R.id.picture);

67. tv_title = (TextView) itemView.findViewById(R.id.name);

68. }

69. }

70.  

71. private OnItemClick onItemClick;

72.  

73. public void setOnItemClick(OnItemClick onItemClick) {

74. this.onItemClick = onItemClick;

75. }

76. }

77. }

 

使用就是RecyclerView的简单使用中的讲解，我们只是把itemview换成cardview。直接看效果图吧！