当前位置： 代码迷 >> Android >> Android L——RecyclerView,CardView的导入跟使用
  详细解决方案

Android L——RecyclerView,CardView的导入跟使用

热度：176   发布时间：2016-04-27 23:29:16.0
Android L——RecyclerView,CardView的导入和使用

本文主要介绍Android L新增加的两个UI控件RecyclerView，CardView的导入和使用。

RecyclerView：ListView的升级版，它提供了更好的性能而且更容易使用。该控件是一个可以装载大量的视图集合，并且可以非常效率的进行回收和滚动。当你list中的元素经常动态改变时可以使用RecyclerView控件。它提供了如下两个功能：

1、为每个条目位置提供了layout管理器（RecyclerView.setLayoutManager）

2、为每个条目设置了操作动画（RecyclerView.setItemAnimator）

CardView：Google提供的一个卡片式视图组件。CardView继承自FrameLayout，允许你在Card视图中显示信息， CardView也可以设置阴影和圆角。（其实现在很多应用都自定义了Card视图，Google这回将Card视图作为基本控件，可以拿来直接使用了。）

本例就是一个使用RecyclerView来展示多个CardView的一个小例子，先看下效果图：

效果图

导入RecyclerView,CardView

由于RecyclerView,CardView是放在support library v7包中，所以我们想要使用就必须要导包。

下面就介绍下在Eclipse和Android Studio中是如何导入这两个包的。

Eclipse：

第一步：通过SDK manager下载/更新Android Support Libraries（5.0版本最新为21） 

下载/更新Android Support Libraries

第二步：导入CardView和RecyclerView项目（都在support v7中）

1、在Eclipse中点击Import，导入Android项目

2、导入CardView和RecycleView，路径为your sdk path\extras\android\support\v7\cardview（RecycleView则为相同目录下的recyclerview）

3、导入时记得将工程copy到本地并建议重命名，这样方便以后管理例如：

重命名

第三步：设置Library

1、将两个工程设置为Library

2、在主工程中引入这两个Library例如：

在主工程中引入Library

通过这三步就可以将这两个包导入进来了。

Android Studio

Android Stuido相对于Eclipse简单的多。

第一步：首先要确保已经将Android Support Libraries升级到最新。

第二步：打开项目中的build.gradle文件，在dependencies中添加如下代码。

?
1
2
3
4
dependencies {
    compile 'com.android.support:recyclerview-v7:21.+'
    compile 'com.android.support:cardview-v7:21.+'
}

第三步：重新Build一下工程，Build完成后就会发现这两个包就已经导入进来了。

重新Build工程

代码介绍：

主题：

首先这个黑色基调的主题是使用了Material.Dark.ActionBar样式。

设置方法：修改values-v21文件夹下styles.xml文件：

?
1
2
3
4
<resources>  
    <style name="AppTheme" parent="android:ThemeOverlay.Material.Dark.ActionBar">  
    </style>  
</resources>

布局文件：

recycler_view.xml（RecyclerView布局文件）:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
<?xml version="1.0" encoding="utf-8"?>  
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"  
    xmlns:tools="http://schemas.android.com/tools"  
    android:layout_width="match_parent"  
    android:layout_height="match_parent"  
    tools:context=".MyActivity">  
   
    <android.support.v7.widget.RecyclerView  
        android:id="@+id/list"  
        android:layout_width="match_parent"  
        android:layout_height="match_parent"  
        tools:context=".MyActivity" />  
</FrameLayout>

FrameLayout里包含了RecyclerView控件。

card_view.xml（CardView布局文件）：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"  
    xmlns:card_view="http://schemas.android.com/apk/res-auto"  
    android:layout_width="match_parent"  
    android:layout_height="match_parent"  
    android:layout_margin="5dp"  
    android:orientation="horizontal"  
    card_view:cardBackgroundColor="@color/cardview_dark_background"  
    card_view:cardCornerRadius="5dp" >  
   
    <RelativeLayout  
        android:layout_width="match_parent"  
        android:layout_height="100dp"  
        android:padding="5dp" >  
   
        <ImageView  
            android:id="@+id/pic"  
            android:layout_width="match_parent"  
            android:layout_height="match_parent"  
            android:layout_centerInParent="true"  
            android:scaleType="centerCrop" />  
   
        <TextView  
            android:clickable="true"  
            android:id="@+id/name"  
            android:layout_width="match_parent"  
            android:layout_height="match_parent"  
            android:layout_marginBottom="10dp"  
            android:layout_marginRight="10dp"  
            android:gravity="right|bottom"  
            android:textColor="@android:color/white"  
            android:textSize="24sp" />  
    </RelativeLayout>  
   
</android.support.v7.widget.CardView>

CardView视图中包含了一个ImageView和一个TextView分别显示图片和文字信息。

唯一需要介绍的就是在布局文件中使用了，如下两个属性：

?
1
2
card_view:cardBackgroundColor="@color/cardview_dark_background"  
   card_view:cardCornerRadius="5dp"

他俩的作用分别是设置CardView的背景颜色和外围的圆角大小（注意要使用card_view命名空间）

代码：

Actor类（封装数据的Model类）：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
public class Actor
{
    String name;
 
    String picName;
 
    public Actor(String name, String picName)
    {
        this.name = name;
        this.picName = picName;
    }
 
    public int getImageResourceId( Context context )
    {
        try
        {
            return context.getResources().getIdentifier(this.picName, "drawable", context.getPackageName());
 
        }
        catch (Exception e)
        {
            e.printStackTrace();
            return -1;
        }
    }
}

封装了演员的名字和图片名，getImageResourceId()方法的作用就是根据图片命找到系统资源。

MyActivity(程序主控制Activity)

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
public class MyActivity
    extends Activity
{
 
    private RecyclerView mRecyclerView;
 
    private MyAdapter myAdapter;
 
    private Listactors = new ArrayList();
 
    private String[] names = { "朱茵", "张柏芝", "张敏", "巩俐", "黄圣依", "赵薇", "莫文蔚", "如花" };
 
    private String[] pics = { "p1", "p2", "p3", "p4", "p5", "p6", "p7", "p8" };
 
    @Override
    protected void onCreate( Bundle savedInstanceState )
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.recycler_view);
 
        actors.add(new Actor("朱茵", "p1"));
        getActionBar().setTitle("那些年我们追的星女郎");
 
        // 拿到RecyclerView
        mRecyclerView = (RecyclerView) findViewById(R.id.list);
        // 设置LinearLayoutManager
        mRecyclerView.setLayoutManager(new LinearLayoutManager(this));
        // 设置ItemAnimator
        mRecyclerView.setItemAnimator(new DefaultItemAnimator());
        // 设置固定大小
        mRecyclerView.setHasFixedSize(true);
        // 初始化自定义的适配器
        myAdapter = new MyAdapter(this, actors);
        // 为mRecyclerView设置适配器
        mRecyclerView.setAdapter(myAdapter);
 
    }
 
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.menu, menu);
        return true;
    }
 
    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch(item.getItemId()) {
            // 当点击actionbar上的添加按钮时，向adapter中添加一个新数据并通知刷新
            case R.id.action_add:
                if (myAdapter.getItemCount() != names.length) {
                    actors.add(new Actor(names[myAdapter.getItemCount()], pics[myAdapter.getItemCount()]));
                    mRecyclerView.scrollToPosition(myAdapter.getItemCount() - 1);
                    myAdapter.notifyDataSetChanged();
                }
                return true;
            // 当点击actionbar上的删除按钮时，向adapter中移除最后一个数据并通知刷新
            case R.id.action_remove:
                if (myAdapter.getItemCount() != 0) {
                    actors.remove(myAdapter.getItemCount()-1);
                    mRecyclerView.scrollToPosition(myAdapter.getItemCount() - 1);
                    myAdapter.notifyDataSetChanged();
                }
                return true;
        }
        return super.onOptionsItemSelected(item);
    }
 
}

MyAdapter（自定义适配器类）

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
public class MyAdapter
    extends RecyclerView.Adapter{
 
    private Listactors;
 
    private Context mContext;
 
    public MyAdapter( Context context , Listactors)
    {
        this.mContext = context;
        this.actors = actors;
    }
 
    @Override
    public ViewHolder onCreateViewHolder( ViewGroup viewGroup, int i )
    {
        // 给ViewHolder设置布局文件
        View v = LayoutInflater.from(viewGroup.getContext()).inflate(R.layout.card_view, viewGroup, false);
        return new ViewHolder(v);
    }
 
    @Override
    public void onBindViewHolder( ViewHolder viewHolder, int i )
    {
        // 给ViewHolder设置元素
        Actor p = actors.get(i);
        viewHolder.mTextView.setText(p.name);
        viewHolder.mImageView.setImageDrawable(mContext.getDrawable(p.getImageResourceId(mContext)));
    }
 
    @Override
    public int getItemCount()
    {
        // 返回数据总数
        return actors == null ? 0 : actors.size();
    }
 
    // 重写的自定义ViewHolder
    public static class ViewHolder
        extends RecyclerView.ViewHolder
    {
        public TextView mTextView;
 
        public ImageView mImageView;
 
        public ViewHolder( View v )
        {
            super(v);
            mTextView = (TextView) v.findViewById(R.id.name);
            mImageView = (ImageView) v.findViewById(R.id.pic);
        }
    }
}

以上所有代码就介绍完了，可以总结为以下两点：

RecyclerView：

理解为之前的ListView，不过需要设置LinearLayoutManager和ItemAnimator两个新属性。

RecyclerView.Adapter：

理解为默认自带和基于ViewHolder的新的适配器，只不过回调方法稍有不同，但本质都是一样的。

推荐阅读：

19个实用的Android开发工具

Android四大组件详解

版权声明：本文为博主原创文章，未经博主允许不得转载。

1楼ones123654昨天 10:23
来一篇偏技术点的，希望能对大家有些许帮助
  相关解决方案

代码迷 - 您身边的软件异常，代码异常，编程异常助手（发现，解决，分享）
Copyright © 2009-2013 DAIMAMI.COM. All rights reserved.