2. 程式人生 > >Fresco和 RecyclerView 實現瀑布流

Fresco和 RecyclerView 實現瀑布流

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

RecyclerView 實現瀑布流非常的簡單，只需要設定佈局管理為 StaggeredGridLayoutManager。然後還需要設定ItemDecorator

1：大概的步驟如下.具體的步驟在下面的下面.

0：匯入RecyclerView，Fresco

1：佈局裡面新增RecyclerView，

2：建立item的佈局，這個佈局可以使用Fresco的SimpleDrawweView，記住要在Application裡面進行初始化。

3：建立Product的實體類，這個裡面包含了四個變數，圖片地址，圖片名稱，圖片的寬度，圖片的高度。

4：建立 Adatper， PicRecyclerViewAdapter，在這個PicRecyclerViewAdapter裡面首先要建立PicViewHolder繼承RecyclerView.ViewHolder，這個ViewHolder必須要先建立，因為下面繼承RecyclerView.Adapter裡面要用到
5：讓我們的adpter，PicRecyclerViewAdapter繼承RecyclerView.Adatper, extends RecyclerView.Adapter<PicRecyclerViewAdapter.PicViewHolder>
繼承裡面的方法，包括onCreateViewHolder，和onBindViewHolder。

public PicViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View ret = LayoutInflater.from(context).inflate(R.layout.item_recyclerview,parent,false);
        return new PicViewHolder(ret);
    }

//瀑布流裡面，我們會從伺服器得到寬度和高度，然後通過這個設定寬高比。
    @Override
    public void onBindViewHolder(PicViewHolder holder, int position) {
        Product product = list.get(position);
        holder.pic.setImageURI(Uri.parse(product.getLocalPosition()));
        holder.textView.setText(product.getProductName());
    }

6：建立每一個Item之間的間隔 通過建立一個繼承了ItemDecorator的類來做，裡面有getItemOffSet方法。來設定上下左右的距離

7：通過程式碼設定佈局管理和adapter，以及一些模擬資料。
        mRecyclerView.setLayoutManager(new StaggeredGridLayoutManager(2, StaggeredGridLayoutManager.VERTICAL));
        //新增間隔，Decorator 的翻譯就是裝飾師，粉刷匠
        MyItemDecorator myItemDecorator = new MyItemDecorator(10);
        mRecyclerView.addItemDecoration(myItemDecorator);
        mRecyclerView.setAdapter(adapter);

2：具體的步驟:

0：匯入RecyclerView，Fresco

1：佈局裡面新增RecyclerView，

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android
 
:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity">

    <android.support.v7.widget.RecyclerView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/recyclerview"></android.support.v7.widget.RecyclerView>
</RelativeLayout>
2：建立item的佈局，這個佈局可以使用Fresco的SimpleDrawweView，記住要在Application裡面進行初始化。

千萬記住了SimpleDraweeView不能是全部的wrap_content

<?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"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:fresco="http://schemas.android.com/apk/res-auto"
android:layout_height="match_parent">
<com.facebook.drawee.view.SimpleDraweeView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/item_simpleDraweeView"
app:placeholderImage="@mipmap/ic_launcher"/>
    <TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/item_name"/>
</LinearLayout>
建立MyApplication
package tech.androidstudio.recyclerviewdemo;

import android.app.Application;

import com.facebook.drawee.backends.pipeline.Fresco;

/**
 * Created by Kodulf on 2016/3/15.
 */
public class MyApplication extends Application {
    @Override
public void onCreate() {
        super.onCreate();
        Fresco.initialize(this);
    }
}


在清單檔案中修改：
<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:supportsRtl="true"
android:theme="@style/AppTheme"
android:name=".MyApplication">

3：建立Product的實體類，這個裡面包含了四個變數，圖片地址，圖片名稱，圖片的寬度，圖片的高度。

package tech.androidstudio.recyclerviewdemo;

/**
 * Created by Kodulf on 2016/3/15.
 */
public class Product {
    private String localPosition;
    private String productName;
    private int width;
    private int height;

    public Product(String localPosition, String productName, int width, int height) {
        this.localPosition = localPosition;
        this.productName = productName;
        this.width = width;
        this.height = height;
    }

    public int getWidth() {

        return width;
    }

    public void setWidth(int width) {
        this.width = width;
    }

    public int getHeight() {
        return height;
    }

    public void setHeight(int height) {
        this.height = height;
    }

    public Product(String localPosition, String productName) {
        this.localPosition = localPosition;
        this.productName = productName;
    }

    public Product() {
    }

    public String getLocalPosition() {

        return localPosition;
    }

    public void setLocalPosition(String localPosition) {
        this.localPosition = localPosition;
    }

    public String getProductName() {
        return productName;
    }

    public void setProductName(String productName) {
        this.productName = productName;
    }
}

4：建立 Adatper， PicRecyclerViewAdapter，在這個PicRecyclerViewAdapter裡面首先要建立PicViewHolder繼承RecyclerView.ViewHolder，這個ViewHolder必須要先建立，因為下面繼承RecyclerView.Adapter裡面要用到 
//必須 首先寫這個 ViewHolder，因為只有這樣才能寫裡面的引數，
// 然後才是寫繼承的 extends RecyclerView.Adapter<PicViewHolder>
public class PicViewHolder extends RecyclerView.ViewHolder{

            SimpleDraweeView pic;
            TextView textView;

        public PicViewHolder(View itemView) {
            super(itemView);
            pic=(SimpleDraweeView)itemView.findViewById(R.id.item_simpleDraweeView);
//            pic.setAspectRatio(0.9f);
pic.getHierarchy().setActualImageScaleType(ScalingUtils.ScaleType.FIT_XY);
            textView=(TextView)itemView.findViewById(R.id.item_name);
        }

    }
5：讓我們的adpter，PicRecyclerViewAdapter繼承RecyclerView.Adatper, extends RecyclerView.Adapter<PicRecyclerViewAdapter.PicViewHolder>
繼承裡面的方法，包括onCreateViewHolder，和onBindViewHolder。

public PicViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View ret = LayoutInflater.from(context).inflate(R.layout.item_recyclerview,parent,false);
        return new PicViewHolder(ret);
    }

//瀑布流裡面，我們會從伺服器得到寬度和高度，然後通過這個設定寬高比。
    @Override
    public void onBindViewHolder(PicViewHolder holder, int position) {
        Product product = list.get(position);
        holder.pic.setImageURI(Uri.parse(product.getLocalPosition()));
        holder.textView.setText(product.getProductName());
    } 
package tech.androidstudio.recyclerviewdemo.adapter;
import android.content.Context;
import android.net.Uri;
import android.support.v7.widget.RecyclerView;
import android.util.AttributeSet;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

import com.facebook.drawee.drawable.ScalingUtils;
import com.facebook.drawee.view.SimpleDraweeView;

import java.util.Collection;
import java.util.List;

import tech.androidstudio.recyclerviewdemo.Product;
import tech.androidstudio.recyclerviewdemo.R;

/**
 * Created by Kodulf on 2016/3/15.
 */
//注意 這裡 整合的 RecyclerView.Adapter
public class PicRecyclerViewAdapter extends RecyclerView.Adapter<PicRecyclerViewAdapter.PicViewHolder> {
    List<Product> list;
    Context context;
    public PicRecyclerViewAdapter(List<Product> list,Context context) {
        this.list = list;
        this.context=context;
    }

    @Override
public PicViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {

        View ret = LayoutInflater.from(context).inflate(R.layout.item_recyclerview,parent,false);
        return new PicViewHolder(ret);

        //TODO 下面的 返回方法是錯誤的，如果這樣做的話，會報錯
//TODO java.lang.NullPointerException: Attempt to invoke virtual method 'void com.facebook.drawee.view.SimpleDraweeView.setImageURI(android.net.Uri)' on a null object reference
//PicViewHolder picViewHolder = new PicViewHolder(parent);
        //return picViewHolder;
        //return null;
}

    @Override
public void onBindViewHolder(PicViewHolder holder, int position) {
        Log.d("Kodulf", "position" + position + " Uri:");
        Product product = list.get(position);
        //獲取圖片的寬高資訊，然後得到寬高比 ，然後通過Fresco的SimpleDraweeView的setAspectRatio來設定
float ratio = (float)product.getWidth() / (float)product.getHeight();
        holder.pic.setAspectRatio(ratio);
        holder.pic.setImageURI(Uri.parse(product.getLocalPosition()));

        Log.d("Kodulf", "Width=" + product.getWidth());
        Log.d("Kodulf", "Height=" +product.getHeight());
        Log.d("Kodulf","Ratio="+ratio);
        holder.textView.setText(product.getProductName());
    }

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

    //以後新增更新資料的時候會用到addAll的方法
public void addAll(Collection<? extends Product> collection){

        int size = list.size();
        list.addAll(collection);
        notifyItemRangeChanged(size, collection.size());
    }


    //必須 首先寫這個 ViewHolder，因為只有這樣才能寫裡面的引數，
// 然後才是寫繼承的 extends RecyclerView.Adapter<PicViewHolder>
public class PicViewHolder extends RecyclerView.ViewHolder{

            SimpleDraweeView pic;
            TextView textView;

        public PicViewHolder(View itemView) {
            super(itemView);
            pic=(SimpleDraweeView)itemView.findViewById(R.id.item_simpleDraweeView);
//            pic.setAspectRatio(0.9f);
pic.getHierarchy().setActualImageScaleType(ScalingUtils.ScaleType.FIT_XY);
            textView=(TextView)itemView.findViewById(R.id.item_name);
        }

    }
}




6：建立每一個Item之間的間隔 通過建立一個繼承了ItemDecorator的類來做，裡面有getItemOffSet方法。來設定上下左右的距離
package tech.androidstudio.recyclerviewdemo;

import android.graphics.Rect;
import android.support.v7.widget.RecyclerView;
import android.view.View;

/**
 * Created by Kodulf on 2016/3/15.
 */
//Decorator 的翻譯就是裝飾師，粉刷匠
public class MyItemDecorator extends RecyclerView.ItemDecoration {
    private int space;

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

    //自定義item之間的距離，如果是第一個的話就沒有距離，
//設定上下左右的距離
@Override
public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
//        super.getItemOffsets(outRect, view, parent, state);
outRect.bottom=space;
        outRect.right=space;
        outRect.left=space;
        if(parent.getChildPosition(view)!=0){
            outRect.top=space;
        }
    }
}



7：通過程式碼設定佈局管理和adapter，以及一些模擬資料。
        mRecyclerView.setLayoutManager(new StaggeredGridLayoutManager(2, StaggeredGridLayoutManager.VERTICAL));
        //新增間隔，Decorator 的翻譯就是裝飾師，粉刷匠
        MyItemDecorator myItemDecorator = new MyItemDecorator(10);
        mRecyclerView.addItemDecoration(myItemDecorator);
        mRecyclerView.setAdapter(adapter);

package tech.androidstudio.recyclerviewdemo;

import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.RecyclerView;
import android.support.v7.widget.StaggeredGridLayoutManager;
import android.util.Log;

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

import tech.androidstudio.recyclerviewdemo.adapter.PicRecyclerViewAdapter;

public class MainActivity extends AppCompatActivity {

    private RecyclerView mRecyclerView;

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

/**
        List<String> listUrl = new ArrayList<String>();
        listUrl.add("http://fdfs.xmcdn.com/group16/M08/F1/13/wKgDbFal40bR7Uc6AAH3JpWhLiQ015_android_large.jpg");
        listUrl.add("http://fdfs.xmcdn.com/group10/M07/F0/14/wKgDaVal9ZLTP5q1AAFIJeYaktQ092_android_large.jpg");
        listUrl.add("http://fdfs.xmcdn.com/group12/M07/E8/35/wKgDXFacqEfReClFAAFvbZHe_mU331_android_large.jpg");
        listUrl.add("http://fdfs.xmcdn.com/group9/M05/EE/15/wKgDZlagtF_yH9YXAAEyq6YSxDo657_android_large.jpg");
        listUrl.add("http://fdfs.xmcdn.com/group11/M07/FC/B4/wKgDbValyzzy0fBpAAMdsEAuI-Q295_android_large.jpg");
        listUrl.add("http://fdfs.xmcdn.com/group9/M01/EF/02/wKgDZlaiCqbTzvIzAAH_l7MCT-k503_android_large.jpg");
        listUrl.add("http://fdfs.xmcdn.com/group9/M01/EF/02/wKgDZlaiCqbTzvIzAAH_l7MCT-k503_android_large.jpg");
        List<Product> mList = new ArrayList<Product>();
        for(int i=0;i<7;i++){
            Product product = new Product();
//            product.setLocalPosition("res://mipmap/"+i+".png");
            product.setLocalPosition(listUrl.get(i));
            product.setProductName("Picture "+i);
            mList.add(product);
        }
*/
        //模擬資料，這裡需要獲取圖片的寬高 ，一般的在我們從伺服器請求資料的 時候 它會返回圖片的 寬高資訊
Bitmap bitmap1 = BitmapFactory.decodeResource(getResources(), R.mipmap.p1);
        Bitmap bitmap2 = BitmapFactory.decodeResource(getResources(), R.mipmap.p2);
        Bitmap bitmap3 = BitmapFactory.decodeResource(getResources(), R.mipmap.p3);
        Bitmap bitmap4 = BitmapFactory.decodeResource(getResources(), R.mipmap.p4);
        Bitmap bitmap5 = BitmapFactory.decodeResource(getResources(), R.mipmap.p5);
        Bitmap bitmap6 = BitmapFactory.decodeResource(getResources(), R.mipmap.p6);
        Bitmap bitmap7 = BitmapFactory.decodeResource(getResources(), R.mipmap.p7);

        List<Product> mList = new ArrayList<Product>();
        Product product1 = new Product("res://mipmap/"+R.mipmap.p1,"Picture 1",bitmap1.getWidth(),bitmap1.getHeight());
        Product product2 = new Product("res://mipmap/"+R.mipmap.p2,"Picture 2",bitmap2.getWidth(),bitmap2.getHeight());
        Product product3 = new Product("res://mipmap/"+R.mipmap.p3,"Picture 3",bitmap3.getWidth(),bitmap3.getHeight());
        Product product4 = new Product("res://mipmap/"+R.mipmap.p4,"Picture 4",bitmap4.getWidth(),bitmap4.getHeight());
        Product product5 = new Product("res://mipmap/"+R.mipmap.p5,"Picture 5",bitmap5.getWidth(),bitmap5.getHeight());
        Product product6 = new Product("res://mipmap/"+R.mipmap.p6,"Picture 6",bitmap6.getWidth(),bitmap6.getHeight());
        Product product7 = new Product("res://mipmap/"+R.mipmap.p7,"Picture 7",bitmap7.getWidth(),bitmap7.getHeight());
        mList.add(product1);
        mList.add(product2);
        mList.add(product3);
        mList.add(product4);
        mList.add(product5);
        mList.add(product6);
        mList.add(product7);


        mRecyclerView = (RecyclerView)findViewById(R.id.recyclerview);
        PicRecyclerViewAdapter adapter = new PicRecyclerViewAdapter(mList,this);
        mRecyclerView.setLayoutManager(new StaggeredGridLayoutManager(2, StaggeredGridLayoutManager.VERTICAL));
        //新增間隔，Decorator 的翻譯就是裝飾師，粉刷匠
MyItemDecorator myItemDecorator = new MyItemDecorator(10);
        mRecyclerView.addItemDecoration(myItemDecorator);

        mRecyclerView.setAdapter(adapter);
    }
}


7：通過程式碼設定佈局管理和adapter，以及一些模擬資料。
        mRecyclerView.setLayoutManager(new StaggeredGridLayoutManager(2, StaggeredGridLayoutManager.VERTICAL));
        //新增間隔，Decorator 的翻譯就是裝飾師，粉刷匠
        MyItemDecorator myItemDecorator = new MyItemDecorator(10);
        mRecyclerView.addItemDecoration(myItemDecorator);
        mRecyclerView.setAdapter(adapter);

相關推薦

Fresco和 RecyclerView 實現瀑布流

RecyclerView 實現瀑布流非常的簡單，只需要設定佈局管理為 StaggeredGridLayoutManager。然後還需要設定ItemDecorator 1：大概的步驟如下.具體的步驟在下面的下面. 0：匯入RecyclerView，Fresco 1：佈

Fresco,Retrofit 和 RecyclerView 實現瀑布流

圖片是通過Retrofit進行網路請求得到的地址 RecyclerView的使用分為四步 0：匯入RecyclerView和例如Fresco，Retrofit，然後在程式碼裡面新增RecyclerView 1：然後是設定每個項的佈局和實體類， 2：建立RecyclerV

RecyclerView實現瀑布流

效果圖： Main佈局只是一個RecyclerView <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.

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

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

[置頂] RecyclerView實現瀑布流，圖片自適應高度

話不多說，先上效果圖 對於RecyclerView，相信大家都不陌生了，這個集listView，GridView，瀑布流效果與一身強大控制元件，漸漸地滲透在每個App.... 還是回到正題，如何讓RecyclerView裡的圖片自適應高度？ 我們知道，要讓RecyclerView有瀑布流效果，R

recyclerview實現瀑布流佈局

先看效果,這裡我用的背景圖片, 首先匯入依賴 compile 'com.android.support:recyclerview-v7:26.1.0' 下面就是程式碼,首先是佈局 activity_main <RelativeLayout xmlns:a

Android中RecyclerView實現瀑布流圖片顯示

效果圖： 具體程式碼如下：（註釋很詳細，基本每句都要註釋） MainActivity.java package com.zhiyuan3g.recyclerviewwaterfall; import android.content.Intent; import an

RecyclerView 實現瀑布流及點選事件，含點選回撥的介面

RecyclerView 實現瀑布流及點選事件 public class FruitAdapter extends RecyclerView.Adapter<FruitAdapter.ViewHolder> { private List

Android RecyclerView 實現瀑布流交錯效果，並使最後一行子View高度佔滿RecyclerView

而在實現完瀑布流後，覺得滑動到底部時，最後一行的高度，沒有佔滿外部View，感覺不太好。（真正的瀑布流應該是條目數近乎無窮，可以一直載入更多） 既然是瀑布流，那麼就選用StaggeredGridLayoutManager。 mRecyclerView.s

關於RecyclerView實現瀑布流，上下滑動時item之間互換位置的問題

  最近專案需求，需要RecyclerView實現瀑布流。在用 StaggeredGridLayoutManager 完成瀑布流的過程中發現一個問題：它並不像pullToRefresh 那樣是穩定的list,而是item之間頻繁交換位置,有時候甚至會出現第一列和第二列完全互

RecyclerView實現瀑布流的效果

效果圖如下 原始碼如下: MainActivity頁面 public class MainActivity extends AppCompatActivity { private RecyclerView recyclerView; private

RecyclerView 實現瀑布流效果

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

RecyclerView實現瀑布流，圖片自適應高度

話不多說，先上效果圖 對於RecyclerView，相信大家都不陌生了，這個集listView，GridView，瀑布流效果與一身強大控制元件，漸漸地滲透在每個App.... 還是回到正題，如何讓RecyclerView裡的圖片自適應高度？ 我們知道，要讓Recycler

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

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

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

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

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

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

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

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

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

RecyclerView和StaggeredGridLayoutManager實現瀑布流向下滑動item跳動、留白的問題

由於專案需要最近第一次採用RecyclerView和StaggeredGridLayoutManager實現了瀑布流，原本以為官方的東西不會有什麼問題，但是好事多磨，實現了以後上拉載入更多，都沒有問題，但是下拉回顯上面的item的時候出現跳動，回到最頂部的時候還會有留白。針