android recyclerview 实现 tab androidx.recyclerview.widget.recyclerview

转载

huatechinfo 2024-04-20 07:24:43

文章标签 android 控件 RecyclerView xml 文章分类 Android 移动开发

一、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滑动效果(纵向)

首先引用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滑动列表的效果如下所示：

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

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

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

效果如下：

四、RecyclerView网格布局效果

代码我就贴出来了，效果如下：

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

六、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方法即可。

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。