Android listView 替换技术 RecyclerView And CardView

使用RecyclerView 及 CardView展示卡片式的ListView.思路和ListView一模一样.

我们使用的是Android Studio

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


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


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


[java] view plaincopy在CODE上查看代码片派生到我的代码片
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文件中写入:


[java] view plaincopy在CODE上查看代码片派生到我的代码片
<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 :

[html] view plaincopy在CODE上查看代码片派生到我的代码片
<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,这样就会有卡片式的阴影效果.



[html] view plaincopy在CODE上查看代码片派生到我的代码片
<?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的时候了.如下:


[java] view plaincopy在CODE上查看代码片派生到我的代码片
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


转自：http://blog.csdn.net/yuliyige/article/details/36905189