前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Android:手把手带你全面学习常见的RecylerView!

Android:手把手带你全面学习常见的RecylerView!

作者头像
Carson.Ho
发布2019-10-25 10:37:33
7900
发布2019-10-25 10:37:33
举报
文章被收录于专栏:Android知识分享Android知识分享

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。undefined本文链接:https://blog.csdn.net/carson_ho/article/details/100970555

前言

  • RecylerViewAndroid开发中十分常见
  • 今天,我将为大家带来RecylerView的全面介绍,包括其定义、特点、具体使用等,希望你们会喜欢。

1. 简介

  • 定义Google用于代替ListView的滑动组件
  • 特点:功能更强大、支持定制样式更丰富、扩展性更高

2. 与ListView对比

2.1 优点

代码语言:javascript
复制
mRecyclerView = findView(R.id.id_recyclerview);
//设置布局管理器
mRecyclerView.setLayoutManager(layout);
//设置adapter
mRecyclerView.setAdapter(adapter)
//设置Item增加、移除动画
mRecyclerView.setItemAnimator(new DefaultItemAnimator());
//添加分割线
mRecyclerView.addItemDecoration(new DividerItemDecoration(
                getActivity(), DividerItemDecoration.HORIZONTAL_LIST));
  • 问:相比较于ListView,RecyclerView基本需要上面一系列步骤进行设置,而ListView可能只需要去设置一个adapter就能正常使用。那么为什么会添加这么多的步骤呢?
  • 答:从名字上看RecyclerView,即回收循环视图,也就是说RecyclerView只管回收与复用View,其他的你可以自己去设置,可以看出其高度的解耦,给予你充分的定制自由

2.2 缺点

RecyclerView实现控制点击、长按事件较为麻烦,需要自己写

3. 应用场景

列表页展示界面(需扩展、需支持动画、频繁更新 & 局部刷新)

4. 基础概念

4.1 RecyclerView.Adapter

和ListView一样,RecyclerView一样需要适配器,而且这个适配器强制要求了我们必须要用Viewholder,让性能得到优化,而且getView方法不需自己写,我们只需要写好Viewholder,View的复用已经封装好了。

4.2 LayoutManager

布局管理器,设置为LinearLayoutManager、GridLayoutManager、StaggeredGridLayoutManager可以轻易地实现ListView,GridView以及流式布局的列表效果。

还可管理滚动 & 循环利用

4.3 ItemAnimator

这个类可以实现增删动画,而且不想设置的话它的默认效果已经很好了。

5. 使用步骤

  1. 定义主xml布局
  2. 根据需要定义RecyclerView每行所实现的xml布局
  3. 定义一个Adapter类继承RecyclerView.Adapter,重写里面的方法。
  4. 定义一个HashMap构成的列表,将数据以键值对的方式存放在里面。
  5. 构造Adapter对象,设置适配器。
  6. 将RecyclerView绑定到Adapter上。

6. 具体实例

  • 将按照上述步骤进行具体实例展示
  • 个人推荐先下载Demo源码再对着下面分析看,效果会更好:Demo的源码下

步骤1. 定义主xml布局

activity_main.xml

代码语言:javascript
复制
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="${relativePackage}.${activityClass}" >


    <android.support.v7.widget.RecyclerView
        android:id="@+id/my_recycler_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scrollbars="horizontal"
        /><!--设置一个RecyclerView-->

</RelativeLayout>

在AndroidStudio1.5使用support-v7包:

  • 右键文件目录的app目录进入Moudle Setting
  • 在Dependencies里面加入
代码语言:javascript
复制
compile 'com.android.support:recyclerview-v7:23.1.1'

步骤2. 根据需要定义RecyclerView每行所实现的xml布局(item布局)

list_cell.xml

代码语言:javascript
复制
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">
<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <ImageView
        android:layout_alignParentRight="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/ItemImage"/>
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="New Text"
        android:id="@+id/Itemtitle" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="New Text"
        android:id="@+id/Itemtext"
        android:layout_below="@+id/Itemtitle"/>
</RelativeLayout>
</LinearLayout>

步骤3. 定义一个Adapter类继承 RecyclerView.Adapter,重写里面的方法。

MyAdapter.java

代码语言:javascript
复制
package scut.receiverview;

import android.content.Context;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;

import java.util.ArrayList;
import java.util.HashMap;

/**
 * Created by yany on 2016/4/11.
 */
public class MyAdapter extends RecyclerView.Adapter {
    private LayoutInflater inflater;
    private ArrayList<HashMap<String, Object>> listItem;
    private MyItemClickListener myItemClickListener;

    public MyAdapter(Context context, ArrayList<HashMap<String, Object>> listItem) {
        inflater = LayoutInflater.from(context);
        this.listItem = listItem;
    }//构造函数,传入数据


    //定义Viewholder
    class Viewholder extends RecyclerView.ViewHolder  {
        private TextView Title, Text;
        private ImageView ima;

        public Viewholder(View root) {
            super(root);
            Title = (TextView) root.findViewById(R.id.Itemtitle);
            Text = (TextView) root.findViewById(R.id.Itemtext);
            ima = (ImageView) root.findViewById(R.id.ItemImage);
            root.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    if (myItemClickListener != null)
                        myItemClickListener .onItemClick(v,getPosition());
                }

            }//监听到点击就回调MainActivity的onItemClick函数
            );

        }

        public TextView getTitle() {
            return Title;
        }

        public TextView getText() {
            return Text;
        }

        public ImageView getIma() {
            return ima;
        }


    }

        @Override
        public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
            return new Viewholder(inflater.inflate(R.layout.list_cell, null));
        }//在这里把ViewHolder绑定Item的布局

        @Override
        public void onBindViewHolder(RecyclerView.ViewHolder holder, final int position) {
            Viewholder vh = (Viewholder) holder;
            vh.Title.setText((String) listItem.get(position).get("ItemTitle"));
            vh.Text.setText((String) listItem.get(position).get("ItemText"));
            vh.ima.setImageResource((Integer) listItem.get(position).get("ItemImage"));
        }//在这里绑定数据到ViewHolder里面

        @Override
        public int getItemCount() {
            return listItem.size();
        }//返回Item数目

        public void setOnItemClickListener(MyItemClickListener listener){
        myItemClickListener = listener;
        }//绑定MainActivity传进来的点击监听器
}

实现点击事件:

  1. 在Viewholder里面设置了点击事件监听器
  2. 通过调用OnItemClickListener的接口方法回调MainActivity里的方法。

MyItemClickListener.java接口:用来实现点击事件

代码语言:javascript
复制
package scut.receiverview;

import android.view.View;


public interface MyItemClickListener {
    public void onItemClick(View view,int postion);
}

步骤4:在MainActicity.java里:

  • 定义一个HashMap构成的列表,将数据以键值对的方式存放在里面。
  • 构造Adapter对象,设置适配器
  • 将RecyclerView绑定到Adapter上

MainActicity.java

代码语言:javascript
复制
package scut.receiverview;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.view.View;
import android.widget.Toast;

import java.util.ArrayList;
import java.util.HashMap;

public class MainActivity extends AppCompatActivity implements MyItemClickListener {
    private RecyclerView Rv;
    private ArrayList<HashMap<String,Object>> listItem;
    private MyAdapter myAdapter;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initData();
        initView();

    }

    public void initData(){
        listItem = new ArrayList<HashMap<String, Object>>();/*在数组中存放数据*/
        for (int i = 0; i < 100; i++) {
            HashMap<String, Object> map = new HashMap<String, Object>();
            map.put("ItemTitle", "第" + i + "行");
            map.put("ItemText", "这是第" + i + "行");
            map.put("ItemImage",R.mipmap.ic_launcher);
            listItem.add(map);
        }
    }
    public void initView(){

Rv = (RecyclerView) findViewById(R.id.my_recycler_view);
        //使用线性布局
        LinearLayoutManager layoutManager = new LinearLayoutManager(this);
        Rv.setLayoutManager(layoutManager);
        Rv.setHasFixedSize(true);
        Rv.addItemDecoration(new DividerItemDecoration(this, layoutManager.getOrientation()));//用类设置分割线
//Rv.addItemDecoration(new DividerItemDecoration(this, R.drawable.list_divider)); //用已有图片设置分割线

      //为ListView绑定适配器
      myAdapter = new MyAdapter(this,listItem);
      myAdapter.setOnItemClickListener(this);
      Rv.setAdapter(myAdapter);  

     
        

    }

    @Override
    public void onItemClick(View view, int postion) {//点击事件的回调函数
        System.out.println("点击了第"+postion+"行");
        Toast.makeText(this, (String)listItem.get(postion).get("ItemText"), Toast.LENGTH_SHORT).show();
    }

}

5. 最后是一个步骤是实现分割线ItemDecoration

如果自己画了分割线就可以直接添上去,不需要写这个类

DividerItemDecoration.java:

代码语言:javascript
复制
package scut.receiverview;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Rect;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.util.TypedValue;
import android.view.View;


public class DividerItemDecoration extends RecyclerView.ItemDecoration {
    /*
      * RecyclerView的布局方向,默认先赋值
      * 为纵向布局
      * RecyclerView 布局可横向,也可纵向
      * 横向和纵向对应的分割想画法不一样
      * */
    private int mOrientation = LinearLayoutManager.VERTICAL ;

    /**
     * item之间分割线的size,默认为1
     */
    private int mItemSize = 1 ;

    /**
     * 绘制item分割线的画笔,和设置其属性
     * 来绘制个性分割线
     */
    private Paint mPaint ;

    /**
     * 构造方法传入布局方向,不可不传
     * @param context
     * @param orientation
     */
    public DividerItemDecoration(Context context,int orientation) {
        this.mOrientation = orientation;
        if(orientation != LinearLayoutManager.VERTICAL && orientation != LinearLayoutManager.HORIZONTAL){
            throw new IllegalArgumentException("请传入正确的参数") ;
        }
        mItemSize = (int) TypedValue.applyDimension(mItemSize, TypedValue.COMPLEX_UNIT_DIP,context.getResources().getDisplayMetrics());
        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG) ;
        mPaint.setColor(Color.BLUE);
         /*设置填充*/
        mPaint.setStyle(Paint.Style.FILL);
    }

    @Override
    public void onDraw(Canvas c, RecyclerView parent, RecyclerView.State state) {
        if(mOrientation == LinearLayoutManager.VERTICAL){
            drawVertical(c,parent) ;
        }else {
            drawHorizontal(c,parent) ;
        }
    }

    /**
     * 绘制纵向 item 分割线
     * @param canvas
     * @param parent
     */
    private void drawVertical(Canvas canvas,RecyclerView parent){
        final int left = parent.getPaddingLeft() ;
        final int right = parent.getMeasuredWidth() - parent.getPaddingRight() ;
        final int childSize = parent.getChildCount() ;
        for(int i = 0 ; i < childSize ; i ++){
            final View child = parent.getChildAt( i ) ;
            RecyclerView.LayoutParams layoutParams = (RecyclerView.LayoutParams) child.getLayoutParams();
            final int top = child.getBottom() + layoutParams.bottomMargin ;
            final int bottom = top + mItemSize ;
            canvas.drawRect(left,top,right,bottom,mPaint);
        }
    }

    /**
     * 绘制横向 item 分割线
     * @param canvas
     * @param parent
     */
    private void drawHorizontal(Canvas canvas,RecyclerView parent){
        final int top = parent.getPaddingTop() ;
        final int bottom = parent.getMeasuredHeight() - parent.getPaddingBottom() ;
        final int childSize = parent.getChildCount() ;
        for(int i = 0 ; i < childSize ; i ++){
            final View child = parent.getChildAt( i ) ;
            RecyclerView.LayoutParams layoutParams = (RecyclerView.LayoutParams) child.getLayoutParams();
            final int left = child.getRight() + layoutParams.rightMargin ;
            final int right = left + mItemSize ;
            canvas.drawRect(left,top,right,bottom,mPaint);
        }
    }

    /**
     * 设置item分割线的size
     * @param outRect
     * @param view
     * @param parent
     * @param state
     */
    @Override
    public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
        if(mOrientation == LinearLayoutManager.VERTICAL){
            outRect.set(0,0,0,mItemSize);
        }else {
            outRect.set(0,0,mItemSize,0);
        }
    }
}

效果输出图

7. 总结

  • 本文全面介绍了RecylerView,包括其定义、特点、具体使用等。
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2019-09-18 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 前言
  • 1. 简介
  • 2. 与ListView对比
    • 2.1 优点
      • 2.2 缺点
      • 3. 应用场景
      • 4. 基础概念
        • 4.1 RecyclerView.Adapter
          • 4.2 LayoutManager
            • 4.3 ItemAnimator
            • 5. 使用步骤
            • 6. 具体实例
              • 效果输出图
              • 7. 总结
              领券
              问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档