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