RecycleView的使用总结

转载 http://blog.csdn.net/lmj623565791/article/details/45059587; 
本文出自:【张鸿洋的博客】

 

概述

RecyclerView出现已经有一段时间了,相信大家肯定不陌生了,大家可以通过导入support-v7对其进行使用。 
据官方的介绍,该控件用于在有限的窗口中展示大量数据集,其实这样功能的控件我们并不陌生,例如:ListView、GridView。

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

    • 你想要控制其显示的方式,请通过布局管理器LayoutManager
    • 你想要控制Item间的间隔(可绘制),请通过ItemDecoration
    • 你想要控制Item增删的动画,请通过ItemAnimator
    • 你想要控制点击、长按事件,请自己写(擦,这点尼玛。

    • 和普通的ListView的适配器不同,要自己实现RecycleView.Adapter<ViewHolder>

 

基本使用

鉴于我们对于ListView的使用特别的熟悉,对比下RecyclerView的使用代码:

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));

操作的步骤:

1.基本和常见的控件一样,可以对比ListView的事件去写,现在先去操作写作的步骤,实现公司项目中类似的左右可以拖动的效果,并且实现可以点击的事件,

直接看代码:

先上MainActivity的布局:

<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"
    android:background="@color/backgroud_white">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/id_recyclerview"
        android:layout_width="match_parent"
        android:layout_height="86dp"/>

</RelativeLayout>

  这里限制了整个RecycleView的高度仅仅为86dp

 

再去写适配器:

直接上代码:

package com.fightzhao.recyclerdemo.ui.adapter;

import android.content.Context;
import android.graphics.Paint;
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 com.fightzhao.recyclerdemo.R;
import com.fightzhao.recyclerdemo.dao.Product;
import com.fightzhao.recyclerdemo.utils.Units;
import com.fightzhao.recyclerdemo.utils.ViewUtils;

import java.util.ArrayList;
import java.util.List;

/**
 * Created by fightzhao on 15-9-29.
 */
public class ProductRecyclerAdapter extends RecyclerView.Adapter<ProductRecyclerAdapter.ViewHolder> {
    private final List<Product> data;
    private Context context;
    private OnItemClickLitener onItemClickLitener;

    // 点击事件的接口设置
    public interface OnItemClickLitener {
        void onItemClick(View view, int position);

        void onItemLongClick(View view, int position);
    }
    public void setOnItemClickLitener(OnItemClickLitener mOnItemClickLitener) {
        this.onItemClickLitener = mOnItemClickLitener;
    }

    public ProductRecyclerAdapter(Context context, List<Product> data) {
        this.context = context;
        this.data = data == null ? new ArrayList<Product>() : new ArrayList<Product>(data);
    }

    @Override
    public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        ViewHolder holder = new ViewHolder(LayoutInflater.from(context).inflate(R.layout.item_product_grid, parent,false));
        return holder;
    }

    @Override
    public void onBindViewHolder(final ViewHolder holder, final int position) {
        Product product = data.get(position);
//        if (product != null) {
//            holder.name.setText(product.getName());
//            holder.price.setText(Units.wrapPrice(product.getPrice()));
//            holder.oldPrice.setText(Units.wrapPrice(product.getOldPrice()));
//            holder.shopName.setText(product.getShopName());
//            holder.shopDistance.setText(product.getShopDistance());
//
//            ViewUtils.setGone(holder.discountingBadge, !product.isDiscounting());
//        } else {
//            holder.name.setText(null);
//            holder.price.setText(null);
//            holder.oldPrice.setText(null);
//            ViewUtils.setGone( holder.discountingBadge, true);
//        }
        holder.bind(product);
        if (onItemClickLitener != null) {
            holder.itemView.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    onItemClickLitener.onItemClick(holder.itemView, position);
                }
            });
            holder.itemView.setOnLongClickListener(new View.OnLongClickListener() {
                @Override
                public boolean onLongClick(View v) {
                    //int pos = holder.getLayoutPosition();
                    onItemClickLitener.onItemLongClick(holder.itemView, position);
                    return false;
                }
            });
        }

    }


    @Override
    public int getItemCount() {
        return data.size();
    }

    public class ViewHolder extends RecyclerView.ViewHolder {
        final TextView name;
        final TextView price;
        final TextView oldPrice;
        final ImageView homeDeliveryBadge;
        final ImageView discountingBadge;
        final TextView shopName;
        final TextView shopDistance;

        public ViewHolder(View view) {
            super(view);
            name = (TextView) view.findViewById(R.id.product_name);
            price = (TextView) view.findViewById(R.id.product_price);
            oldPrice = (TextView) view.findViewById(R.id.product_old_price);
            homeDeliveryBadge = (ImageView) view.findViewById(R.id.product_home_delivery_badge);
            discountingBadge = (ImageView) view.findViewById(R.id.product_discounting_badge);
            shopName = (TextView) view.findViewById(R.id.product_shop_name);
            shopDistance = (TextView) view.findViewById(R.id.product_shop_distance);
            oldPrice.setPaintFlags(oldPrice.getPaintFlags() | Paint.STRIKE_THRU_TEXT_FLAG);
        }


        /**
         * 给每个商品绑定数据
         *
         * @param product
         */
        public void bind(Product product) {
            if (product != null) {
                name.setText(product.getName());
                price.setText(Units.wrapPrice(product.getPrice()));
                oldPrice.setText(Units.wrapPrice(product.getOldPrice()));
                ViewUtils.setGone(discountingBadge, !product.isDiscounting());
                shopName.setText(product.getShopName());
                shopDistance.setText(product.getShopDistance());
            } else {
                name.setText(null);
                price.setText(null);
                oldPrice.setText(null);
                ViewUtils.setGone(discountingBadge, true);
            }
        }
    }

}

子布局:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="144dp"
    android:layout_height="86dp"
    android:gravity="center_vertical"
    android:background="@mipmap/dg_ad_product_grid_item_background"
    android:paddingLeft="10dp"
    android:paddingRight="10dp">

    <LinearLayout
        android:id="@+id/product_badge_container"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true">

        <ImageView
            android:id="@+id/product_discounting_badge"
            android:layout_width="@dimen/dg_badge_icon_width"
            android:layout_height="@dimen/dg_badge_icon_height"
            android:layout_marginLeft="2dp"
            android:src="@mipmap/dg_ic_badge_discounting" />

        <ImageView
            android:id="@+id/product_home_delivery_badge"
            android:layout_width="@dimen/dg_badge_icon_width"
            android:layout_height="@dimen/dg_badge_icon_height"
            android:layout_marginLeft="2dp"
            android:src="@mipmap/dg_ic_badge_home_delivery" />
    </LinearLayout>

    <TextView
        android:id="@+id/product_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_toLeftOf="@id/product_badge_container"
        android:ellipsize="end"
        android:maxLines="1"
        android:textColor="@color/dg_colorAccent"
        android:textSize="13dp" />

    <TextView
        android:id="@+id/product_price"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/product_name"
        android:layout_centerHorizontal="true"
        android:maxLines="1"
        android:textColor="@color/dg_colorAccent"
        android:textSize="22dp" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignTop="@+id/product_price"
        android:layout_toLeftOf="@+id/product_price"
        android:layout_marginTop="4dp"
        android:textColor="@color/dg_colorAccent"
        android:textSize="13dp"
        android:text="@string/dg_product_price_rmb" />

    <TextView
        android:id="@+id/product_old_price"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignRight="@id/product_price"
        android:layout_below="@id/product_price"
        android:layout_centerHorizontal="true"
        android:layout_marginRight="-12dp"
        android:layout_marginTop="-6dp"
        android:ellipsize="end"
        android:maxLines="1"
        android:textColor="#3D3D3D"
        android:textSize="14dp" />

    <TextView
        android:id="@+id/product_shop_distance"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_below="@id/product_old_price"
        android:layout_marginTop="-4dp"
        android:textColor="#3D3D3D"
        android:textSize="11dp" />

    <TextView
        android:id="@+id/product_shop_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@id/product_shop_distance"
        android:layout_alignParentLeft="true"
        android:layout_toLeftOf="@id/product_shop_distance"
        android:maxLines="1"
        android:ellipsize="end"
        android:textColor="#3D3D3D"
        android:textSize="11dp" />
</RelativeLayout>

  使用:

按照前面一开始的四个步骤就可以了.

 

package com.fightzhao.recyclerdemo;

import android.content.Intent;
import android.os.Bundle;
import android.support.v7.app.ActionBarActivity;
import android.support.v7.widget.DefaultItemAnimator;
import android.support.v7.widget.GridLayoutManager;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.support.v7.widget.StaggeredGridLayoutManager;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.Toast;

import com.fightzhao.recyclerdemo.dao.Product;
import com.fightzhao.recyclerdemo.ui.adapter.ProductRecyclerAdapter;

import java.util.ArrayList;
import java.util.List;

public class HomeActivity extends ActionBarActivity {

    private RecyclerView mRecyclerView;
    private List<String> mDatas;
    private HomeAdapter mAdapter;

    // 产品
    private List<Product> productDatas;
    private ProductRecyclerAdapter productRecyclerAdapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_single_recyclerview);

        initData();

        mRecyclerView = (RecyclerView) findViewById(R.id.id_recyclerview);
//        mAdapter = new HomeAdapter(this, mDatas);

//        mRecyclerView.setLayoutManager(new StaggeredGridLayoutManager(4,
//                StaggeredGridLayoutManager.VERTICAL));
//        mRecyclerView.setAdapter(mAdapter);
        productRecyclerAdapter = new ProductRecyclerAdapter(this,productDatas);
        mRecyclerView.setLayoutManager(new StaggeredGridLayoutManager(1,
                StaggeredGridLayoutManager.HORIZONTAL));
        mRecyclerView.setAdapter(productRecyclerAdapter);


//        mRecyclerView.addItemDecoration(new DividerGridItemDecoration(this));
        // 设置item动画
        mRecyclerView.setItemAnimator(new DefaultItemAnimator());

//        initEvent();
        productRecyclerAdapter.setOnItemClickLitener(new ProductRecyclerAdapter.OnItemClickLitener() {
            @Override
            public void onItemClick(View view, int position) {
                Toast.makeText(getApplicationContext(),"点击了"+position,Toast.LENGTH_SHORT).show();
            }

            @Override
            public void onItemLongClick(View view, int position) {
                Toast.makeText(getApplicationContext(),"长按了",Toast.LENGTH_SHORT).show();
            }
        });

    }

//    private void initEvent() {
//        mAdapter.setOnItemClickLitener(new HomeAdapter.OnItemClickLitener() {
//            @Override
//            public void onItemClick(View view, int position) {
//                Toast.makeText(HomeActivity.this, position + " click",
//                        Toast.LENGTH_SHORT).show();
//            }
//
//            @Override
//            public void onItemLongClick(View view, int position) {
//                Toast.makeText(HomeActivity.this, position + " long click",
//                        Toast.LENGTH_SHORT).show();
//            }
//        });
//    }

    protected void initData() {
        mDatas = new ArrayList<String>();
        for (int i = 'A'; i < 'z'; i++) {
            mDatas.add("" + (char) i);
        }
        productDatas = new ArrayList<Product>();
        productDatas.add(new Product(true,"耳机","神州数码","5",100.00,120.09));
        productDatas.add(new Product(false,"笔记本","中关村","15",200.23,220.78));
        productDatas.add(new Product(true,"相机","腾讯","25",300,320));
        productDatas.add(new Product(true,"苹果手机","腾讯","25",300,320));
        productDatas.add(new Product(true,"红米1","腾讯","25",300,320));
        productDatas.add(new Product(true,"小米Note","腾讯","25",300,320));
        productDatas.add(new Product(true,"魅族","腾讯","25",300,320));
        productDatas.add(new Product(true,"相机","腾讯","25",300,320));
        productDatas.add(new Product(true,"相机","腾讯","25",300,320));

    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.main, menu);
        return super.onCreateOptionsMenu(menu);
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()) {
            case R.id.id_action_add:
                mAdapter.addData(1);
                break;
            case R.id.id_action_delete:
                mAdapter.removeData(1);
                break;
            case R.id.id_action_gridview:
                mRecyclerView.setLayoutManager(new GridLayoutManager(this, 4));
                break;
            case R.id.id_action_listview:
                mRecyclerView.setLayoutManager(new LinearLayoutManager(this));
                break;
            case R.id.id_action_horizontalGridView:
                mRecyclerView.setLayoutManager(new StaggeredGridLayoutManager(1,
                        StaggeredGridLayoutManager.HORIZONTAL));
                break;

            case R.id.id_action_staggeredgridview:
                Intent intent = new Intent(this, StaggeredGridLayoutActivity.class);
                startActivity(intent);
                break;
        }
        return true;
    }
}

还有剩下的item点击事件,以及点击某个item消失等等上下来再去总结!!!

 

 

现在对点击事件的总结:

可以在Adapter中设置接口去回调.:比如这里:

class HomeAdapter extends RecyclerView.Adapter<HomeAdapter.MyViewHolder> {

    private List<String> mDatas;
    private LayoutInflater mInflater;
    private OnItemClickLitener mOnItemClickLitener;

    public interface OnItemClickLitener {
        void onItemClick(View view, int position);

        void onItemLongClick(View view, int position);
    }

    public void setOnItemClickLitener(OnItemClickLitener mOnItemClickLitener) {
        this.mOnItemClickLitener = mOnItemClickLitener;
    }


    public HomeAdapter(Context context, List<String> datas) {
        mInflater = LayoutInflater.from(context);
        mDatas = datas;
    }

    @Override
    public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        MyViewHolder holder = new MyViewHolder(mInflater.inflate(
                R.layout.item_home, parent, false));
        return holder;
    }

    @Override
    public void onBindViewHolder(final MyViewHolder holder, final int position) {
        holder.tv.setText(mDatas.get(position));

        // 如果设置了回调,则设置点击事件
        if (mOnItemClickLitener != null) {
            holder.itemView.setOnClickListener(new OnClickListener() {
                @Override
                public void onClick(View v) {

                    mOnItemClickLitener.onItemClick(holder.itemView, position);

                }
            });
            holder.itemView.setOnLongClickListener(new OnLongClickListener() {
                @Override
                public boolean onLongClick(View v) {
                    //int pos = holder.getLayoutPosition();
                    mOnItemClickLitener.onItemLongClick(holder.itemView, position);
                    removeData(position);
                    return false;
                }
            });
        }
    }

  要是实现对UI的更改:思路就是对集合进行增删,之后通知UI改变:

    public void addData(int position) {
        mDatas.add(position, "Insert One");
        notifyItemInserted(position);
    }


    public void removeData(int position) {
        mDatas.remove(position);
        notifyItemRemoved(position);
    }

  

 

posted @ 2015-09-29 20:13  fightzhao  阅读(1556)  评论(0编辑  收藏  举报