Android5.x 新控件之RecyclerView使用总结

一、RecyclerView控件的简单介绍

RecyclerView出现快一年多了,相信大家肯定不陌生了,大家可以通过导入support-v7对其进行使用。 

据官方的介绍,该控件用于在有限的窗口中展示大量数据集,其实这样功能的控件我们并不陌生,例如:ListView、GridView。

那么有了ListView、GridView为什么还需要RecyclerView这样的控件呢?整体上看RecyclerView架构,提供了一种插拔式的体验,高度的解耦,异常的灵活,通过设置它提供的不同LayoutManager,ItemDecoration , ItemAnimator实现令人瞠目的效果。

  你想要控制其显示的方式,请通过布局管理器LayoutManager

  你想要控制Item间的间隔(可绘制),请通过ItemDecoration

  你想要控制Item增删的动画,请通过ItemAnimator

  你想要控制点击、长按事件,请自己写。

RecyclerView.LayoutManager,这是一个抽象类,好在系统提供了3个实现类:

LinearLayoutManager 线型管理器,支持横向、纵向。

GridLayoutManager 网格布局管理器

StaggeredGridLayoutManager 瀑布流式布局管理器

 二、RecyclerView实现listView滑动效果(纵向)

我的开发环境是使用AS1.5,首先引用Support v7包,在AS里很好配置,直接在build.gradle文件下添加如下配置:

<span style="font-size:18px;">compile fileTree(dir: 'libs', include: ['*.jar'])
testCompile 'junit:junit:4.12'
compile 'com.android.support:appcompat-v7:22.2.1'
compile 'com.android.support:design:22.2.1'
compile 'com.android.support:recyclerview-v7:22.+'     //添加这两个控件</span>

MainActiivity xml布局文件如下:

<span style="font-size:18px;"><?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout 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:fitsSystemWindows="true"
    tools:context="com.example.com.recyclerviewdemo.MainActivity">

    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/relavelayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <android.support.design.widget.AppBarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/appabr"
            android:theme="@style/AppTheme.AppBarOverlay">

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:background="?attr/colorPrimary"
                app:popupTheme="@style/AppTheme.PopupOverlay" />

        </android.support.design.widget.AppBarLayout>

        <android.support.v7.widget.RecyclerView
            android:id="@+id/recycler_view"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_below="@id/appabr"
        </android.support.v7.widget.RecyclerView>
    </RelativeLayout>
</android.support.design.widget.CoordinatorLayout>
RecyclerView容器里面的布局文件我就展示了一个图片数据,布局如下:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <ImageView
        android:id="@+id/recycler_imageview"
        android:layout_width="wrap_content"
        android:layout_centerVertical="true"
        android:layout_margin="5dp"
        android:layout_height="wrap_content" />

</RelativeLayout></span>

接下来看如何使用RecyclerView

<span style="font-size:18px;">// 拿到RecyclerView
mRecyclerView = (RecyclerView) findViewById(R.id.recyler);
// 设置布局显示方式
//LinearLayoutManager 线性布局     GridLayoutManager:网格布局    StaggeredGridLayoutManager:流式布局
//第一个参数 Context ,
// 第二个参数:布局方向LinearLayout.VERTICAL垂直和LinearLayout.HORIZONTAL水平,
//第三个参数:表示是否从最后的Item数据开始显示,ture表示是,false就是正常显示—从开头显示。
mRecyclerView.setLayoutManager(new LinearLayoutManager(this));
// 设置添加或者删除item的动画效果
//setItemAnimator()方法的作用是设置当前RecyclerView容器有子Item改变时(添加item或者删除item)导致
// 整个布局的动画效果。一般我们new 一个系统默认的动画出来就好了。
mRecyclerView.setItemAnimator(new DefaultItemAnimator());
// 设置固定大小
mRecyclerView.setHasFixedSize(true);
// 初始化自定义的适配器
myAdapter = new MyAdapter(this);
// 为mRecyclerView设置适配器
mRecyclerView.setAdapter(myAdapter);</span>

通过观察RecyclerView的setAdapter需要的是一个RecyclerAdapter的一个适配器,所有创建一个这样的适配器,代码如下所示:

<span style="font-size:18px;">/**
 * Created by Administrator on 2016/3/20.
 */
public class RecycleListAdapter extends RecyclerView.Adapter<RecycleListAdapter.MyHolder> {

    //这是上下文对象
    public Context context;
    //这是RecyclerView图片数据
    int icons[] = {R.drawable.g1, R.drawable.g2, R.drawable.g3, R.drawable.g4, R.drawable.g5, R.drawable.g6, R.drawable.g7, R.drawable.g9,
            R.drawable.g10, R.drawable.g11, R.drawable.g12, R.drawable.g13, R.drawable.g14, R.drawable.g15, R.drawable.g16, R.drawable.g17, R.drawable.g18, R.drawable.g19,
            R.drawable.g20, R.drawable.g21, R.drawable.g22, R.drawable.g23, R.drawable.g24, R.drawable.g25, R.drawable.g26, R.drawable.g27, R.drawable.g28, R.drawable.g29,};

    public RecycleListAdapter(Context context) {
        this.context = context;
    }


    //返回一个RecyclerView所需要的View对象(加载xml布局)
    @Override
    public RecycleListAdapter.MyHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        //动态加载布局
        View view = LayoutInflater.from(context).inflate(R.layout.recycler_item, null);
        return new MyHolder(view);
    }


    //填充数据
    @Override
    public void onBindViewHolder(RecycleListAdapter.MyHolder holder, int position) {
        //imageView.setImageResource(icons[position]);
        holder.imageView.setImageDrawable(context.getResources().getDrawable(icons[position % 10]));
    }

    //返回要展示的数据个数
    @Override
    public int getItemCount() {
        //我这里暂时定1000
        return 1000;
    }


    //自定义ViewHolder(查找xml中的控件)
    public class MyHolder extends RecyclerView.ViewHolder {
        private ImageView imageView;
        public MyHolder(View v) {
            super(v);
            imageView = (ImageView) v.findViewById(R.id.recycler_imageview);
        }
    }
}</span>


最终类似ListView滑动列表的效果如下所示:

blob.png


三、RecyclerView实现listView滑动效果(横向)

其实Recycler横向滑动代码与上述基本差不多,不过需要修改LinearLayoutManager的布局显示,代码如下:

//设置 layoutManager
LinearLayoutManager layoutManager = new LinearLayoutManager(this, LinearLayoutManager.HORIZONTAL, false);
recyclerView.setLayoutManager(layoutManager);
//设置adapter
recyclerView.setAdapter(adapter);

效果如下:

blob.png

四、RecyclerView网格布局效果

代码我就贴出来了,效果如下:

blob.png

五、RecyclerView横向纵向瀑布流效果

blob.png


六、RecyclerView实现点击效果

细心的你会发现,很遗憾的是RecyclerView没有提供setItemOnClickListener点击监听方法。那么我们要监听每个

ItemView的点击事件怎么办呢?没关系!我们来看看代码中怎么实现吧!

//定义一个接口变量
private OnItemClickListener listener;

@Override
public void onBindViewHolder(final ViewHolder viewHolder, final int i) {
    // 给ViewHolder设置元素
    final Actor p = actors.get(i);
    viewHolder.mTextView.setText(p.name);
    viewHolder.mImageView.setImageDrawable(mContext.getDrawable(p.getImageResourceId(mContext)));

    /**
     * 接口回调,设置事件监听
     */
    viewHolder.itemView.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            if (null != listener)
                listener.onItemClick(i, p);
        }
    });
}
/**
 * 内部接口回调方法  定义一个接口变量方法
 */
public interface OnItemClickListener {
    void onItemClick(int position, Object object);
}

/**
 * 设置监听方法 (最后暴露给外面的调用者,定义一个设置Listener的方法)
 *
 * @param listener
 */
public void setOnItemClickListener(OnItemClickListener listener) {
    this.listener = listener;
}

在RecyclerView的适配器类中定义了一个OnItemClickListener接口,然后在onBindViewHolder方法中设置每个holder.itemView的点击事件,外面调用setOnItemClickListener方法即可。


上述源码下载地址:https://github.com/githubw2015/RecycleeViewdemo

https://github.com/githubw2015/RecyclerView 


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值