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