精通RecyclerView:打造ListView、GridView、瀑布流;學會添加分割線、 添加刪除動畫 、Item點擊事件

轉載請註明出處:http://blog.csdn.net/linglongxin24/article/details/53126706
本文出自【DylanAndroid的博客】


精通RecyclerView:打造ListView、GridView、瀑布流;學會添加分割線、 添加刪除動畫 、Item點擊事件

在上一篇Android用RecyclerView練手仿美團分類界面寫了RecyclerView的基本用法,
今天想想,在這裏重新學習一下RecyclerView的完整用法。包括如何打造一個普通的ListView和橫向的ListView、普通的GridView和橫向的GridView、如何添加分割線、
還有就是添加和刪除的動畫、以及如何設置Item的OnClick事件監聽。這裏包含了各種用法,也算是一個入門的用法,已經掌握的高手請略過。

先看總體效果圖

效果圖

一.RecyclerView介紹

RecyclerView 是Android 5.0版本中新出現的東西,用來替代ListView和GridView的。

二.RecyclerView架構

RecyclerView使用佈局管理器LayoutManager和適配器Adapter的適配器模式去實現架構,不關心數據的來源。耦合性非常的底,用戶可以根據自己的用戶界面去實現相應的效果

三.RecyclerView的優點

  • 1.RecyclerView內部已經強制使用VIewHolder,優化了對Item中View的複用。

  • 2.提供了一個較爲靈活的佈局管理類,LayoutManager,用來控制RecyclerView是線性展示還是垂直展示,以及可以設置成瀑布流。並且提供了ItemDecoration這個類,來靈活的讓用戶來設置分割線。

  • 3.用ItemAnimator可以對item進行佈局的刪減動畫效果。

四.RecyclerView實現三部曲

  • 第一步:設置佈局管理器

    用來確定每一個item如何進行排列擺放:

    • LinearLayoutManager 相當於ListView的效果
    • GridLayoutManager相當於GridView的效果
    • StaggeredGridLayoutManager 瀑布流
  • 第二步:添加分割線

    我們用到了網上流傳的萬能分割線DividerItemDecoration和DividerGridItemDecoration,首先在style.xml裏面定義分割線圖片:

    1.先在drawable中新建divider.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >
    <solid android:color="@color/colorAccent"/>
    <size android:height="1dp"
        android:width="1dp"/>
</shape>
    2.然後在style.xml中設置android:listDivider
        <item name="android:listDivider">@drawable/divider</item>
  • 第三步:設置適配器
package cn.bluemobi.dylan.recyclerviewdemo2;

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.List;

/**
 * RecyclerView的適配器
 * Created by yuandl on 2016-11-01.
 */

public class RvAdapter extends RecyclerView.Adapter<RvAdapter.MyViewHolder> {
    private Context context;
    private List<Integer> datas;

    /**
     * item的點擊事件的長按事件接口
     */
    private OnItemClickListener onItemClickListener;
    /**
     * 瀑布流時的item隨機高度
     */
    private List<Integer> heights = new ArrayList<>();

    /**
     * 不同的類型設置item不同的高度
     *
     * @param type
     */

    private int type = 0;

    public RvAdapter(Context context, List<Integer> datas) {
        this.context = context;
        this.datas = datas;
        for (int i : datas) {
            int height = (int) (Math.random() * 100 + 300);
            heights.add(height);
        }
    }

    public void setType(int type) {
        this.type = type;
    }

    /**
     * 設置點擊事件
     *
     * @param onItemClickListener
     */
    public void setOnItemClickListener(OnItemClickListener onItemClickListener) {
        this.onItemClickListener = onItemClickListener;
    }

    @Override
    public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View contentView = LayoutInflater.from(context).inflate(R.layout.item, parent, false);
        MyViewHolder viewHolder = new MyViewHolder(contentView);
        return viewHolder;
    }

    @Override
    public void onBindViewHolder(MyViewHolder holder, final int position) {
        RecyclerView.LayoutParams layoutParams;
        if (type == 0) {
            layoutParams = new RecyclerView.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT);
        } else if (type == 1) {
            layoutParams = new RecyclerView.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
        } else {
            layoutParams = new RecyclerView.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, heights.get(position));
            layoutParams.setMargins(2, 2, 2, 2);
        }
        holder.itemView.setLayoutParams(layoutParams);
        holder.imageView.setImageResource(datas.get(position));
        holder.tv.setText("分類" + position);
        /**設置item點擊監聽**/
        holder.itemView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                if (onItemClickListener != null) {
                    onItemClickListener.onItemClickListener(position, datas.get(position));
                }
            }
        });

    }

    @Override
    public int getItemCount() {
        return datas == null ? 0 : datas.size();
    }

    /**
     * 用於緩存的ViewHolder
     */
    public class MyViewHolder extends RecyclerView.ViewHolder {
        private ImageView imageView;
        public TextView tv;

        public MyViewHolder(View itemView) {
            super(itemView);
            imageView = (ImageView) itemView.findViewById(R.id.iv);
            tv = (TextView) itemView.findViewById(R.id.tv);
        }
    }

    /**
     * 設置item監聽的接口
     */
    public interface OnItemClickListener {
        void onItemClickListener(int position, Integer data);

    }
}

五.打造各種效果

  • 1.豎向的ListView
    rv.setBackgroundColor(Color.TRANSPARENT);
    rv.setLayoutManager(new LinearLayoutManager(this, LinearLayoutManager.VERTICAL, false));
    rvAdapter.setType(0);
    rv.removeItemDecoration(itemDecoration);
    rv.setLayoutParams(new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.MATCH_PARENT, RelativeLayout.LayoutParams.MATCH_PARENT));
    itemDecoration = new DividerItemDecoration(this, DividerItemDecoration.VERTICAL_LIST);
    rv.addItemDecoration(itemDecoration);

效果圖

  • 2.橫向的ListView
   rvAdapter.setType(1);
   rv.removeItemDecoration(itemDecoration);
   rv.setLayoutParams(new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.MATCH_PARENT, RelativeLayout.LayoutParams.WRAP_CONTENT));
   rv.setLayoutManager(new LinearLayoutManager(this, LinearLayoutManager.HORIZONTAL, false));
   itemDecoration = new DividerItemDecoration(this, DividerItemDecoration.HORIZONTAL_LIST);
   rv.addItemDecoration(itemDecoration);

效果圖

  • 3.豎向的GridView
   rvAdapter.setType(1);
   rv.setBackgroundColor(Color.TRANSPARENT);
   rv.removeItemDecoration(itemDecoration);
   rv.setLayoutParams(new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.MATCH_PARENT, RelativeLayout.LayoutParams.MATCH_PARENT));
   rv.setLayoutManager(new GridLayoutManager(this, 5));
   itemDecoration = new DividerGridItemDecoration(this);
   rv.addItemDecoration(itemDecoration);

效果圖

  • 4.橫向的GridView
    rvAdapter.setType(1);
    rv.setBackgroundColor(Color.TRANSPARENT);
    rv.setLayoutParams(new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.MATCH_PARENT, RelativeLayout.LayoutParams.WRAP_CONTENT));
    rv.removeItemDecoration(itemDecoration);
    rv.setLayoutManager(new StaggeredGridLayoutManager(2, StaggeredGridLayoutManager.HORIZONTAL));
    itemDecoration = new DividerGridItemDecoration(this);
    rv.addItemDecoration(itemDecoration);

效果圖

  • 5.豎向的瀑布流
     rvAdapter.setType(3);
     rv.setBackgroundColor(getResources().getColor(R.color.colorAccent));
     rv.setLayoutParams(new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.MATCH_PARENT, RelativeLayout.LayoutParams.MATCH_PARENT));
     rv.removeItemDecoration(itemDecoration);
     rv.setLayoutManager(new StaggeredGridLayoutManager(5, StaggeredGridLayoutManager.VERTICAL));

效果圖

  • 6.添加和刪除動畫
       /**添加一個數據**/
       rvAdapter.notifyItemInserted(1);
       /**刪除一個數據**/
       rvAdapter.notifyItemRemoved(1);

效果圖

六.GiHub

發佈了134 篇原創文章 · 獲贊 73 · 訪問量 63萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章