Android RecyclerView And CardView

Google I/O 2014大会发布Android L系统,还有Material Design全新的设计风格.而Material Design卡片式的设计.Google Play应用商店和G+ APP已经变成这种卡片式的风格.为了配合Material Design, Google特意在SDK中添加了RecyclerView 和 CardView,不过它添加在Support-V7库中,可能是为了兼容旧版本吧.Google官方已经说明白怎么用了,这里: https://developer.android.com/preview/material/get-started.html, 不过还不够完整.

下面就看看怎么使用RecyclerView 及 CardView展示卡片式的ListView.思路和ListView一模一样. 我使用的是Android Studio,用Eclipse的朋友...赶紧转到Android Studio来吧.

1, SDK更新到最新.API 20 及Build Tool 20.0.0

2,新建一个普通的工程,API Level>=15.

3,build.gradle中引入Support-V7.

dependencies {
    compile 'com.android.support:recyclerview-v7:+'
    compile 'com.android.support:cardview-v7:+'
}

如果只这样写会出现以下的错误:

Error:Execution failed for task ':app:processDebugManifest'.

> Manifest merger failed : uses-sdk:minSdkVersion 15 cannot be smaller than version L declared in library com.android.support:recyclerview-v7:21.0.0-rc1

这是因为导入了v7的21.0.0rc1,但是这个不支持API 15.有一个Hack的解决办法:在AndroidManifest.xml文件中写入:

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    package="robam.org.ltest">
<uses-sdk tools:node="replace" />
</manifest>

点击同步按钮,这时候就把V7的recyclerview和cardview导入了工程.

4, 接下来,Activity的布局文件,相当于ListView :

<android.support.v7.widget.RecyclerView
        android:id="@+id/my_recycler_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scrollbars="vertical" />

5,在接下来,写Item的布局文件, Item布局根节点是CardView,这样就会有卡片式的阴影效果.

<?xml version="1.0" encoding="utf-8"?>

<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_marginLeft="16dp"
    android:layout_marginRight="16dp"
    android:layout_marginTop="4dp"
    android:layout_marginBottom="4dp"
    app:cardCornerRadius="3dp">

    <TextView
        android:id="@+id/text"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingLeft="?android:listPreferredItemPaddingLeft"
        android:paddingRight="?android:listPreferredItemPaddingRight"
        android:paddingTop="16dp"
        android:paddingBottom="16dp"
        android:textColor="@android:color/holo_blue_light"
        tools:text="Item" />
</android.support.v7.widget.CardView>

6, 到写Activity的时候了.如下:

public class MainActivity extends Activity {

    public static final List<String> data;

    static {
        data = new ArrayList<String>();
        data.add("浮夸 - 陈奕迅");
        data.add("好久不见 - 陈奕迅");
        data.add("时间都去哪儿了 - 王铮亮");
        data.add("董小姐 - 宋冬野");
        data.add("爱如潮水 - 张信哲");
        data.add("给我一首歌的时间 - 周杰伦");
        data.add("天黑黑 - 孙燕姿");
        data.add("可惜不是你 - 梁静茹");
        data.add("太委屈 - 陶晶莹");
        data.add("用心良苦 - 张宇");
        data.add("说谎 - 林宥嘉");
        data.add("独家记忆 - 陈小春");
    }

    LinearLayoutManager layoutManager;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // Get RecyclerView
        RecyclerView recyclerView = (RecyclerView) findViewById(R.id.my_recycler_view);
        recyclerView.setHasFixedSize(true);
        layoutManager = new LinearLayoutManager(this);
        recyclerView.setLayoutManager(layoutManager);
        recyclerView.setAdapter(new MyAdapter(data));

    }


    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.main, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        return super.onOptionsItemSelected(item);
    }

    private static class MyAdapter extends RecyclerView.Adapter<MyAdapter.ViewHolder> {
        private List<String> data;

        public MyAdapter(List<String> data) {
            this.data = data;
        }

        @Override
        public ViewHolder onCreateViewHolder(ViewGroup viewGroup, int i) {
            // 加载Item的布局.布局中用到的真正的CardView.
            View view = LayoutInflater.from(viewGroup.getContext()).inflate(R.layout.item_robam_l, viewGroup, false);
            // ViewHolder参数一定要是Item的Root节点.
            return new ViewHolder(view);
        }

        @Override
        public void onBindViewHolder(ViewHolder viewHolder, int i) {
            viewHolder.text.setText(data.get(i));
        }

        @Override
        public int getItemCount() {
            return data.size();
        }

        static class ViewHolder extends RecyclerView.ViewHolder {
            TextView text;

            public ViewHolder(View itemView) {
                // super这个参数一定要注意,必须为Item的根节点.否则会出现莫名的FC.
                super(itemView);
                text = (TextView) itemView.findViewById(R.id.text);
            }
        }
    }
}

完成之后的效果就和ListView一模一样了.

上面的源代码戳这里:http://pan.baidu.com/s/1mgoN8uc

这个例子参考自: https://github.com/evant/recyclerview-sample/tree/master

另附上一篇英文教程: http://antonioleiva.com/recyclerview/

其实早有国外的大牛写了一个开源库已经实现了这种效果,而且还有很多Card的效果.慢慢探索吧.

https://github.com/gabrielemariotti/cardslib