RecyclerView的簡單使用以及實現瀑布流效果

阿新 • • 發佈：2019-01-01

RecyclerView

簡介

RecyclerView是support.v7包中的控制元件,可以認為是ListView和GridView的增強版,RecyclerView提供了一個耦合度更低的方式來複用ViewHolder,可以更輕鬆的實現瀑布流的效果,為增加和刪除條目提供了預設的動畫效果.

目前SDK中提供了三種自帶的LayoutManager:(LinearLayoutManager,GridLayoutManager,StaggeredGridLayoutManager)

簡單使用

1:新增依賴

在AS的build.gradle中新增依賴，然後同步一下就可以引入依賴包：

compile 'com.android.support:recyclerview-v7:23.1.0'

2:編寫程式碼

先寫好佈局檔案

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/activity_recycle_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <android.support.v7.widget.RecyclerView
        android:id="@+id/recycleView" 
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    </android.support.v7.widget.RecyclerView>
</RelativeLayout>

在其對應Activity中獲取RecycleView,宣告好佈局管理器,Adapter,初始化資料,以及設定分割線等...

package com.goblin.esx.gridlist.activity;

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

import com.goblin.esx.gridlist.MyItemDecoration;
import com.goblin.esx.gridlist.R;
import com.goblin.esx.gridlist.adapter.MyRecyclerViewAdapter;

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

public class RecyclerViewActivity extends AppCompatActivity {

    private RecyclerView recyclerView;
    //標題的集合
    private List<String> title   = new ArrayList<>();
    //內容的集合
    private List<String> content = new ArrayList<>();
    private int          NUMBER  = 40;
    private MyRecyclerViewAdapter myRecyclerViewAdapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_recycle_view);
        recyclerView = (RecyclerView) findViewById(R.id.recycleView);
        //初始化資料
        initData();
//        LinearLayoutManager layoutManager = new LinearLayoutManager(this);
        //實現網格效果的佈局管理器
        GridLayoutManager layoutManager=new GridLayoutManager(this,3);
        //設定佈局管理器
        recyclerView.setLayoutManager(layoutManager);
        //設定為垂直佈局，這是預設的
        layoutManager.setOrientation(OrientationHelper.VERTICAL);
//        layoutManager.setOrientation(OrientationHelper.HORIZONTAL);
        myRecyclerViewAdapter = new MyRecyclerViewAdapter(RecyclerViewActivity.this, title, content);
        //設定點選事件
        myRecyclerViewAdapter.setOnMyItemClickListener(new View.OnClickListener(){
            @Override
            public void onClick(View v) {
                Toast.makeText(RecyclerViewActivity.this, "您點選咯---->"+v.getTag(), Toast.LENGTH_SHORT).show();
            }
        });
        recyclerView.setAdapter(myRecyclerViewAdapter);
        //設定分隔線
        recyclerView.addItemDecoration(new MyItemDecoration(this));
    }

    private void initData() {
        for (int i = 0; i < NUMBER; i++) {
            title.add("標題" + i);
            content.add("內容" + i);
        }
    }

}

接下來設定Adapter

package com.goblin.esx.gridlist.adapter;

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

import com.goblin.esx.gridlist.R;

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

/**
 * Created by Administrator on 2017-3-20.
 */

public class MyRecyclerViewAdapter extends RecyclerView.Adapter {
    //標題的集合
    private List<String> title   = new ArrayList<>();
    //內容的集合
    private List<String> content = new ArrayList<>();
    private Context context;

    public MyRecyclerViewAdapter(Context context, List<String> title, List<String> content) {
        this.title = title;
        this.content = content;
        this.context = context;
    }

    //建立ChildView
    @Override
    public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View view = View.inflate(context, R.layout.item_list_adapter, null);
        ViewHolder holder = new ViewHolder(view);
        return holder;
    }

    //將資料繫結到每一個childView中
    @Override
    public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {
        ViewHolder myHolder = (ViewHolder) holder;
        myHolder.ivLeft.setImageResource(R.drawable.goblin);
        myHolder.tvTitle.setText(title.get(position));
        myHolder.tvContent.setText(content.get(position));
        //設定標記
        myHolder.itemView.setTag(title.get(position));
        myHolder.itemView.setOnClickListener(listener);
    }

    private View.OnClickListener listener;

    public void setOnMyItemClickListener(View.OnClickListener listener) {
        this.listener = listener;
    }

    //得到child的數量
    @Override
    public int getItemCount() {
        return title.size();
    }

    // 通過holder的方式來初始化每一個ChildView的內容
    static class ViewHolder extends RecyclerView.ViewHolder {
        private ImageView ivLeft;
        private TextView  tvTitle;
        private TextView  tvContent;

        public ViewHolder(View itemView) {
            super(itemView);
            ivLeft = (ImageView) itemView.findViewById(R.id.iv_left);
            tvTitle = (TextView) itemView.findViewById(R.id.tv_title);
            tvContent = (TextView) itemView.findViewById(R.id.tv_content);

        }
    }
}

最後設定分割線,這樣簡單的RecyclerView就實現咯

package com.goblin.esx.gridlist;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.drawable.Drawable;
import android.support.v7.widget.RecyclerView;
import android.view.View;

/**
 * Created by Administrator on 2017-3-20.
 */

public class MyItemDecoration extends RecyclerView.ItemDecoration {
    private Drawable mDividerDarwable;
    private int mDividerHight = 1;
    private Paint mColorPaint;


    public final int[] ATRRS = new int[]{android.R.attr.listDivider};

    public MyItemDecoration(Context context) {
        final TypedArray ta = context.obtainStyledAttributes(ATRRS);
        this.mDividerDarwable = ta.getDrawable(0);
        ta.recycle();
    }

    /*
     int dividerHight  分割線的線寬
     int dividerColor  分割線的顏色
     */
    public MyItemDecoration(Context context, int dividerHight, int dividerColor) {
        this(context);
        mDividerHight = dividerHight;
        mColorPaint = new Paint();
        mColorPaint.setColor(dividerColor);
    }

    /*
     int dividerHight  分割線的線寬
     Drawable dividerDrawable  圖片分割線
     */
    public MyItemDecoration(Context context, int dividerHight, Drawable dividerDrawable) {
        this(context);
        mDividerHight = dividerHight;
        mDividerDarwable = dividerDrawable;
    }

    @Override
    public void onDraw(Canvas c, RecyclerView parent, RecyclerView.State state) {
        super.onDraw(c, parent, state);
        //畫水平和垂直分割線
        drawHorizontalDivider(c, parent);
        drawVerticalDivider(c, parent);
    }

    public void drawVerticalDivider(Canvas c, RecyclerView parent) {
        final int childCount = parent.getChildCount();
        for (int i = 0; i < childCount; i++) {
            final View child = parent.getChildAt(i);
            final RecyclerView.LayoutParams params = (RecyclerView.LayoutParams) child.getLayoutParams();

            final int top = child.getTop() - params.topMargin;
            final int bottom = child.getBottom() + params.bottomMargin;

            int left = 0;
            int right = 0;

            //左邊第一列
            if ((i % 3) == 0) {
                //item左邊分割線
                left = child.getLeft();
                right = left + mDividerHight;
                mDividerDarwable.setBounds(left, top, right, bottom);
                mDividerDarwable.draw(c);
                if (mColorPaint != null) {
                    c.drawRect(left, top, right, bottom, mColorPaint);
                }
                //item右邊分割線
                left = child.getRight() + params.rightMargin - mDividerHight;
                right = left + mDividerHight;
            } else {
                //非左邊第一列
                left = child.getRight() + params.rightMargin - mDividerHight;
                right = left + mDividerHight;
            }
            //畫分割線
            mDividerDarwable.setBounds(left, top, right, bottom);
            mDividerDarwable.draw(c);
            if (mColorPaint != null) {
                c.drawRect(left, top, right, bottom, mColorPaint);
            }

        }
    }

    public void drawHorizontalDivider(Canvas c, RecyclerView parent) {

        final int childCount = parent.getChildCount();
        for (int i = 0; i < childCount; i++) {
            final View child = parent.getChildAt(i);
            RecyclerView.LayoutParams params = (RecyclerView.LayoutParams) child.getLayoutParams();

            final int left = child.getLeft() - params.leftMargin - mDividerHight;
            final int right = child.getRight() + params.rightMargin;
            int top = 0;
            int bottom = 0;

            // 最上面一行
            if ((i / 3) == 0) {
                //當前item最上面的分割線
                top = child.getTop();
                //當前item下面的分割線
                bottom = top + mDividerHight;
                mDividerDarwable.setBounds(left, top, right, bottom);
                mDividerDarwable.draw(c);
                if (mColorPaint != null) {
                    c.drawRect(left, top, right, bottom, mColorPaint);
                }
                top = child.getBottom() + params.bottomMargin;
                bottom = top + mDividerHight;
            } else {
                top = child.getBottom() + params.bottomMargin;
                bottom = top + mDividerHight;
            }
            //畫分割線
            mDividerDarwable.setBounds(left, top, right, bottom);
            mDividerDarwable.draw(c);
            if (mColorPaint != null) {
                c.drawRect(left, top, right, bottom, mColorPaint);
            }
        }
    }
}

高階使用

RecyclerView實現瀑布流,以及RecyclerView增加和刪除條目

設定佈局檔案

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/activity_recycler"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="10dp">
    <android.support.v7.widget.RecyclerView
        android:id="@+id/recycle_view" android:layout_width="match_parent"
        android:layout_height="match_parent">

    </android.support.v7.widget.RecyclerView>
    <ImageView
        android:id="@+id/iv_add" android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="10dp"
        android:layout_margin="10dp"
        android:background="@drawable/selector_iv_add"/>

</RelativeLayout>

設定Adapter

package com.goblin.esx.gridlist.adapter;

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

import com.goblin.esx.gridlist.R;

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

/**
 * Created by Administrator on 2017-3-20.
 */

public class MyRecycleSaultAdapter extends RecyclerView.Adapter {
    private Context context;
    private List<Integer> list = new ArrayList<>();
    private List<Integer> mHeights;

    public MyRecycleSaultAdapter(Context context, List<Integer> list) {
        this.context = context;
        this.list = list;
        mHeights = new ArrayList<>();
    }

    @Override
    public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View view = View.inflate(context, R.layout.item_recycle_adapter, null);
        ViewHolder holder = new ViewHolder(view);
        return holder;
    }

    @Override
    public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {
        ViewHolder myHolder = (ViewHolder) holder;
        // 隨機高度, 模擬瀑布效果.
        if (mHeights.size() <= position) {
            mHeights.add((int) (300 + Math.random() * 100));
        }

        ViewGroup.LayoutParams lp = myHolder.ivImage.getLayoutParams();
        lp.height = mHeights.get(position);
        myHolder.ivImage.setLayoutParams(lp);

        Integer ivId = list.get(position);
        myHolder.ivImage.setImageResource(ivId);
        //設定標記
        myHolder.itemView.setTag(position);
        myHolder.itemView.setOnClickListener(listener);
        myHolder.itemView.setOnLongClickListener(longListener);
    }

    //點選事件
    private View.OnClickListener listener;

    public void setOnMyItemClickListener(View.OnClickListener listener) {
        this.listener = listener;
    }

    //長按事件
    private View.OnLongClickListener longListener;

    public void setOnMyItemLongClickListener(View.OnLongClickListener longListener) {
        this.longListener = longListener;
    }

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

    static class ViewHolder extends RecyclerView.ViewHolder {
        public ImageView ivImage;

        public ViewHolder(View itemView) {
            super(itemView);
            ivImage = (ImageView) itemView.findViewById(R.id.iv_image);
        }
    }
    //向集合中新增資料
    public void addList(int position) {
        list.add(position, R.drawable.x);
        notifyItemInserted(position);
    }
    //移除集合中的資料
    public void removeList(int position) {
        list.remove(position);
        notifyItemRemoved(position);
    }
}

Activity裡面設定點選事件,長按刪除事件等......

package com.goblin.esx.gridlist.activity;

import android.graphics.Rect;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.DefaultItemAnimator;
import android.support.v7.widget.RecyclerView;
import android.support.v7.widget.StaggeredGridLayoutManager;
import android.view.View;
import android.widget.ImageView;
import android.widget.Toast;

import com.goblin.esx.gridlist.MyItemDecoration;
import com.goblin.esx.gridlist.R;
import com.goblin.esx.gridlist.adapter.MyRecycleSaultAdapter;

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

public class RecyclerSaultActivity extends AppCompatActivity {

    private RecyclerView          recycleView;
    private MyRecycleSaultAdapter myRecycleAdapter;
    private List<Integer> list   = new ArrayList<>();
    private int           NUMBER = 20;
    private ImageView ivAdd;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_recycler);
        ivAdd = (ImageView) findViewById(R.id.iv_add);
        //初始化資料
        initData();
        recycleView = (RecyclerView) findViewById(R.id.recycle_view);
        myRecycleAdapter = new MyRecycleSaultAdapter(this, list);
        // 錯列網格佈局
        recycleView.setLayoutManager(new StaggeredGridLayoutManager(2, StaggeredGridLayoutManager
                .VERTICAL));
        //設定間距
        recycleView.addItemDecoration(new SpacesItemDecoration(8));
        recycleView.setItemAnimator(new DefaultItemAnimator());
        recycleView.setAdapter(myRecycleAdapter);
        //設定分隔線
        recycleView.addItemDecoration(new MyItemDecoration(this));
        //新增的點選事件
        ivAdd.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(RecyclerSaultActivity.this, "您新增咯一張圖片", Toast.LENGTH_SHORT).show();
                myRecycleAdapter.addList(1);
            }
        });
        //點選事件
        myRecycleAdapter.setOnMyItemClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(RecyclerSaultActivity.this, "您點選咯"+v.getTag(), Toast.LENGTH_SHORT).show();
            }
        });
        //長按事件(刪除)
        myRecycleAdapter.setOnMyItemLongClickListener(new View.OnLongClickListener() {
            @Override
            public boolean onLongClick(View v) {
                myRecycleAdapter.removeList(1);
                Toast.makeText(RecyclerSaultActivity.this, "您刪除咯一張圖片"+v.getTag(), Toast.LENGTH_SHORT).show();
                //不返回true,鬆手還會去執行單擊事件
                return true;
            }
        });
    }

    private void initData() {
        for (int i = 0; i < NUMBER; i++) {
            list.add(R.drawable.a);
            list.add(R.drawable.b);
            list.add(R.drawable.c);
            list.add(R.drawable.d);
            list.add(R.drawable.e);
            list.add(R.drawable.f);
            list.add(R.drawable.g);
        }
    }


    public class SpacesItemDecoration extends RecyclerView.ItemDecoration {
        private int space;

        public SpacesItemDecoration(int space) {
            this.space = space;
        }

        @Override
        public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView
                .State state) {
            outRect.left = space;
            outRect.right = space;
            outRect.bottom = space;
            if (parent.getChildAdapterPosition(view) == 0) {
                outRect.top = space;
            } else if (parent.getChildAdapterPosition(view) == 5) {
                outRect.top = space * 2;
            }

        }
    }
}

圖片的佈局檔案

<?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">
    <ImageView
        android:id="@+id/iv_image"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:scaleType="centerCrop"
        android:background="@drawable/a"
        android:gravity="center" />
</LinearLayout>

給新增的圖片按鈕設定狀態選擇器

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" android:drawable="@drawable/add"/>
    <item android:drawable="@drawable/add_pressed"/>
</selector>

RecyclerView的簡單使用以及實現瀑布流效果

RecyclerView 簡介 RecyclerView是support.v7包中的控制元件,可以認為是ListView和GridView的增強版,RecyclerView提供了一個耦合度更低的方式來複用ViewHolder,可以更輕鬆的實現瀑布流的效果,為增加和刪除條目提

5.使用RecyclerView優雅的實現瀑布流效果

/** * 作者：Pich * 原文連結：http://me.woblog.cn/ * QQ群：129961195 * 微信公眾號：woblog * Github：https://github.com/lifengsofts */ 概述從前我們想實現一個瀑布流效果是

Android中利用RecyclerView實現瀑布流效果

RecyclerView相比於傳統的ListView,功能更加強大，使用也比較方便，因此Android官方更加推薦使用RecycleView,未來也會有更多的程式逐漸從ListView轉向RecycleView。為此，首先先來了解下RecycleView的用法。當然，最先看

Android中Recyclerview使用13----實現瀑布流遇到的各種問題(item移動，載入更多圖片閃爍，以及定製各種型別Header和Footer)

功能：圖片瀑布流問題1：如何保持已顯示過的imageview的尺寸解決方法：定義一個HashMap<Integer, Float> indexMap = new HashMap<Integer, Float>();用來儲存已顯示過的Ima

RecyclerView 實現瀑布流效果

上次用RecyclerView實現了ListView的效果，這次用RecyclerView實現一個瀑布流的效果~ 先上效果圖：是不是感覺不錯啊~ 其實很簡單~ 只要換一個佈局管理器就行了 mRecyclerView.setLayoutManager(new Sta

【前端】用jQuery實現瀑布流效果

scrollto title n) 個性避免 ive gets type turn jQuery實現瀑布流效果何為瀑布流：　　瀑布流，又稱瀑布流式布局。是比較流行的一種網站頁面布局，視覺表現為參差不齊的多欄布局，隨著頁面滾動條向下滾動，這種布局還會不斷加載數據塊並附加

原生js實現瀑布流效果函式封裝

實現目標：實現瀑布流佈局、當滾動條滾動到一定距離時載入圖片瀑布流佈局：結合視窗改變定位第一行的盒子第二行第一個盒子接到第一行最矮的盒子下面當接完後更新最矮盒子以此類推滾動載入圖片：案例是用陣列物件實現圖片載入條件是當載入到最後一張圖片一半+最後盒子的offsetTop小於等於螢

只用css實現瀑布流效果

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> &

web頁面和小程式頁面實現瀑布流效果

　　小程式實現瀑布流效果，和web頁面差不多，都要經過以下步驟： 1)、載入圖片，獲取圖片的寬高度； 2)、根據頁面需要顯示幾列計算每列的寬度； 3)、根據圖片真實寬度和每列的寬度比，計算出圖片需要顯示的高度； 4)、重新對圖片進行定位　　1、web頁面瀑布流效果，先看效果圖（瀑布流+無限滾動載入）：

Android學習之RecyclerView學習（實現瀑布流式佈局）

RecyclerView，大家可以通過匯入support-v7對其進行使用。如果使用AndroidStudio開發，需要在build.gradle中新增： compile 'com.android.support:appcompat-v7:24.2.1' com

自定義ViewGroup實現瀑布流效果

今天情人節，我卻在家裡看書寫程式碼，真屌絲啊哈~ 回顧：ViewGroup的時間分發流程： dispatchTouchEvent ----- onInterceptTouchEvent----- onTouchEvent 最外層的ViewGroup首先接收到觸控事件，然後

Android使用Recycler View實現瀑布流效果

下圖是淘寶上瀑布流的一個應用場景，今天我們就來用Recycler View實現以下瀑布流效果一：建立Activity activity中核心程式碼為 mRvPu.setLayoutManager(new StaggeredGridLayoutManager(2,

CSS3實現瀑布流效果

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>瀑布流的純css實現</title></head><

使用 RecyclerView 控制元件實現瀑布流

RecyclerView相比於ListView, 在回收重用時更具有靈活性, 也就是低耦合, 並且提供了擴充套件. 載入多個檢視時, 應該多用RecyclerView代替ListView. 那麼我們來看看這東西應該怎麼用? 比如生成一個瀑布流的檢視. 首先我們從一個Hell

RecycleView 實現瀑布流效果

1、用as開發，在build.gradle中新增依賴 dependencies { ... compile 'com.android.support:recyclerview-v7:21.0.3' } 2、用Eclipse開發，新

純css實現瀑布流效果

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>純CSS3實現的瀑布流</title> <link

移動端通過JQ實現瀑布流效果方法

近期做了一個移動端的搜尋瀑布流的效果，現在這種前端效果被廣泛使用在各大無限裝置上，方便、簡潔、流暢是其最大特性！這次的效果是頁面每行三個div展示內容，共三行。最底部用文字“獲取更多”來提示使用者點選“獲取更多”通過JQ實現頁面無重新整理從資料庫查詢新的內容，並插入到原內容底

RecylerView實現瀑布流效果

在activity中寫入 //獲取控制元件 recyclerView = view.findViewById(R.id.rv); RecyProcenter procenter = new RecyProcenter(this); procent

快取+懶載入實現瀑布流效果

頁面程式碼： <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>最佳影片TOP200推送</title&g

利用JS實現簡單的瀑布流效果

color position func 如何實現利用無限 bar 拓展復制代碼一.瀑布流之準備工作　　首先聲明下, 為了方便演示和聯系, 我使用的是本地圖片, 如果大家有需要的話可以嘗試著寫下網絡的, 不過本地和遠端的大致是相同的. 那麽我就來簡單介紹下本地

RecyclerView的簡單使用以及實現瀑布流效果

RecyclerView

簡介

簡單使用

1:新增依賴

2:編寫程式碼

高階使用

設定佈局檔案

設定Adapter

Activity裡面設定點選事件,長按刪除事件等......

圖片的佈局檔案

給新增的圖片按鈕設定狀態選擇器

相關推薦