RecyclerView与CardView的使用(一)

简介: RecyclerView与CardView的使用(一)

对于博文标题的两个View,其并没有引入默认的SDK中,需要自己手动导入使用,下面将介绍导入的方式与使用的细节问题。


1.将RecyclerView与CardView导入Android Studio


对于Android Studio导入比较简单,在build.gradle(Module:app)中添加如下代码:


dependencies {
    compile fileTree(include: ['*.jar'], dir: 'libs')
    compile 'com.android.support:appcompat-v7:23.0.1'
    compile 'com.android.support:recyclerview-v7:21.0.0'
    compile 'com.android.support:cardview-v7:21.0.0'
}


红色标记为添加的代码,添加好后,我们就可以使用其控件。


2.单独使用RecyclerView


布局文件中导入其控件:

<android.support.v7.widget.RecyclerView
    android:id="@+id/lyj_recycler"
    android:scrollbars="vertical"
    android:layout_below="@+id/activity_main_toolbar"
    android:layout_width="match_parent"
    android:padding="5dp"
    android:layout_height="wrap_content"/>


都是一些基本的属性,与ListView并无不同。


因为谷歌实现RecyclerView是扩展ListView功能,使其功能更加的丰富,所以,使用RecylerView也需要一个适配器Adapter,RecyclerView适配器为RecyclerView.Adapter,代码基本格式如下:

public class LYJAdapter extends RecyclerView.Adapter<LYJAdapter.ViewHolder> {
    @Override
    public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        return null;
    }
    @Override
    public void onBindViewHolder(ViewHolder holder, int position) {
    }
    @Override
    public int getItemCount() {
        return 0;
    }
    class ViewHolder extends RecyclerView.ViewHolder {
        public ViewHolder(View view){
            super(view);
        }
    }
}


其适配器强制我们使用ViewHolder模式优化ListView。当然优点就应该强制使用。其使用方式与BaseAdapter大同小异。


下面我们来实现自身的适配器,代码如下:


public class MyAdapter extends RecyclerView.Adapter<MyAdapter.ViewHolder> {
    private List<MusicItem> data;
    public MyAdapter(List<MusicItem> data) {
        this.data = data;
    }
    @Override
    public MyAdapter.ViewHolder onCreateViewHolder(ViewGroup viewGroup, int i) {
        //绑定布局
        View itemLayoutView = LayoutInflater.from(viewGroup.getContext()).inflate(R.layout.cv_main, null);
        //创建ViewHolder
        ViewHolder viewHolder = new ViewHolder(itemLayoutView);
        return viewHolder;
    }
    @Override
    public void onBindViewHolder(MyAdapter.ViewHolder viewHolder, int i) {
        viewHolder.info.setText(data.get(i).getTitle());
        viewHolder.image.setImageResource(data.get(i).getResId());
    }
    @Override
    public int getItemCount() {
        return data.size();
    }
    public static class ViewHolder extends RecyclerView.ViewHolder {
        public TextView info;
        public ImageView image;
        public ViewHolder(View itemLayoutView) {
            super(itemLayoutView);
            info = (TextView) itemLayoutView.findViewById(R.id.lyj_txt);
            image=(ImageView)itemLayoutView.findViewById(R.id.lyj_image);
        }
    }
}


布局cv_main代码如下:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_margin="5dp">
    <ImageView
        android:id="@+id/lyj_image"
        android:layout_width="wrap_content"
        android:layout_centerInParent="true"
        android:layout_marginRight="5dp"
        android:layout_height="wrap_content" />
    <TextView
        android:id="@+id/lyj_txt"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/lyj_image"
        android:layout_gravity="center" />
</RelativeLayout>


RecyclerView的实体类如下:


public class MusicItem {
    private String title;
    private int resId;
    public String getTitle() {
        return title;
    }
    public void setTitle(String title) {
        this.title = title;
    }
    public int getResId() {
        return resId;
    }
    public void setResId(int resId) {
        this.resId = resId;
    }
}


其实RecyclerView的优点就是将ListView的items布局分离出来,好让我们实现如下三种效果。


㈠GridLayoutManager(网格布局)


下面的代码我们将Activity界面初始化分离出来:


public void initView() {
    initActionBar();
    String[] strTitle = {"慵懒慢时光,爵士中文", "【华语】曾经的你已杳无音信", "粤语歌中的华语镜像", "凡走过必留下痕迹", "摇滚Live也可以温柔到骨子里", "人生中的舍得与难舍"};
    int[] resId={R.drawable.one,R.drawable.two,R.drawable.three,R.drawable.four,R.drawable.five,R.drawable.six};
    for(int i=0;i<6;i++){
        MusicItem item=new MusicItem();
        item.setTitle(strTitle[i]);
        item.setResId(resId[i]);
        musicItems.add(item);
    }
    recyclerView = (RecyclerView) findViewById(R.id.lyj_recycler);
    RecyclerView.LayoutManager layout = new GridLayoutManager(this,3);//网格布局,每行为3
    recyclerView.setLayoutManager(layout);
    recyclerView.setHasFixedSize(true);//适配器内容改变,不会改变RecyclerView的大小
    adapter = new MyAdapter(musicItems);
    recyclerView.setAdapter(adapter);
}


对于设置ListView的适配器代码不需要过多解释,其他的代码都有注释。运行后界面如下(是不是有网易云音乐首首页选项列表的感觉):

34.png


㈡LinearLayoutManager(垂直布局、水平布局)


只需要更改上面代码中网格布局的那行代码,如下:


RecyclerView.LayoutManager layout=new LinearLayoutManager(this,LinearLayoutManager.HORIZONTAL,false);


参数1:上下文


参数2:水平还是垂直


参数3:为false表示数据按输入的顺序显示,为true表示数据逆向显示。


运行程序当得到如下界面:


35.png


当你将参数2更改成垂直,那么运行后的界面就如listView一样了。这里就不截图了。


㈢StaggeredGridLayoutManager(瀑布流布局)


如2(二)所示,也只需要更改一条代码即可:


StaggeredGridLayoutManager layout=new StaggeredGridLayoutManager(2,StaggeredGridLayoutManager.VERTICAL);


参数1:为每行几个元素。


参数2:为垂直瀑布还是水平瀑布


运行后界面如下:


36.png


这里不好看的原因是没有结合CardView一起使用,下面将介绍如何整合RecyclerView与CardView。

相关文章
|
API Android开发
CardView的那点事儿
CardView的那点事儿
121 0
|
搜索推荐 Java 开发工具
RecyclerView的那点事儿
RecyclerView的那点事儿
85 0
RecyclerView与CardView的使用(二)
RecyclerView与CardView的使用(二)
120 0
RecyclerView与CardView的使用(二)
SwipeRefreshLayout与RecyclerView的巧夺天工(二)
SwipeRefreshLayout与RecyclerView的巧夺天工(二)
75 0
SwipeRefreshLayout与RecyclerView的巧夺天工(二)
SwipeRefreshLayout与RecyclerView的巧夺天工(一)
SwipeRefreshLayout与RecyclerView的巧夺天工(一)
86 0
|
存储 缓存 Java
RecyclerView问题汇总
目录介绍 25.0.0.0 请说一下RecyclerView?adapter的作用是什么,几个方法是做什么用的?如何理解adapter订阅者模式? 25.0.0.1 ViewHolder的作用是什么?如何理解ViewHolder的复用?什么时候停止调用onCreateViewHolder? 25.
3062 0
|
Android开发
2-VVI-材料设计之CardView
零、前言 [1].CardView extends FrameLayout [2].一个带圆角和阴影的FrameLayout,FrameLayout怎么用,它就怎么用 [3].
1115 0