RecylerView完美實現瀑布流效果

RecylerView包含三種佈局管理器，分別是LinearLayoutManager，GridLayoutManager，StaggeredGridLayoutManager，對應實現單行列表，多行列表，瀑布流式佈局。

也分別都具有水平跟垂直方向。

 

第一步：添加依賴

//noinspection GradleCompatible

compile 'com.android.support:cardview-v7:24.0.0-alpha1'

//noinspection GradleCompatible

compile 'com.android.support:recyclerview-v7:24.0.0-alpha1'

compile 'com.github.bumptech.glide:glide:3.7.0'

 

由於加載的是網絡圖片，因此採用的是Glide圖片加載框架。

 

第二步：recylerview佈局

<?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" android:layout_height="match_parent" tools:context="com.example.wangchang.testpalette.MainActivity"> <android.support.v7.widget.RecyclerView android:id="@+id/recylerview" android:padding="4dp" android:layout_width="match_parent" android:layout_height="match_parent" /> </RelativeLayout> 

第三步：RecylerView初始化

recyclerView = (RecyclerView) findViewById(R.id.recylerview); recyclerView.setHasFixedSize(true); recyclerView.setLayoutManager(new StaggeredGridLayoutManager(3, StaggeredGridLayoutManager.VERTICAL)); recyclerView.setAdapter(adapter = new DemoAdapter()); adapter.replaceAll(getData());

這裏主要是 recyclerView.setLayoutManager(new StaggeredGridLayoutManager(3, StaggeredGridLayoutManager.VERTICAL)); 設置StaggeredGridLayoutManager佈局管理器，參數分別是列數，方向。

第四步：適配器的實現

package com.example.wangchang.testpalette; import android.app.Activity; import android.content.res.Resources; import android.graphics.Bitmap; import android.graphics.BitmapFactory; import android.support.v4.content.ContextCompat; import android.support.v7.app.AppCompatActivity; import android.support.v7.graphics.Palette; import android.support.v7.widget.RecyclerView; import android.util.Log; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.EditText; import android.widget.ImageView; import android.widget.TextView; import com.bumptech.glide.Glide; import com.bumptech.glide.load.engine.DiskCacheStrategy; import java.util.ArrayList; import java.util.List; /** * Created by WangChang on 2016/4/1. */ public class DemoAdapter extends RecyclerView.Adapter<DemoAdapter.BaseViewHolder> { private ArrayList<String> dataList = new ArrayList<>(); public void replaceAll(ArrayList<String> list) { dataList.clear(); if (list != null && list.size() > 0) { dataList.addAll(list); } notifyDataSetChanged(); } @Override public DemoAdapter.BaseViewHolder onCreateViewHolder(ViewGroup parent, int viewType) { return new OneViewHolder(LayoutInflater.from(parent.getContext()).inflate(R.layout.one, parent, false)); } @Override public void onBindViewHolder(DemoAdapter.BaseViewHolder holder, int position) { holder.setData(dataList.get(position)); } @Override public int getItemCount() { return dataList != null ? dataList.size() : 0; } public class BaseViewHolder extends RecyclerView.ViewHolder { public BaseViewHolder(View itemView) { super(itemView); } void setData(Object data) { } } private class OneViewHolder extends BaseViewHolder { private ImageView ivImage; public OneViewHolder(View view) { super(view); ivImage = (ImageView) view.findViewById(R.id.ivImage); int width = ((Activity) ivImage.getContext()).getWindowManager().getDefaultDisplay().getWidth(); ViewGroup.LayoutParams params = ivImage.getLayoutParams(); //設置圖片的相對於屏幕的寬高比 params.width = width/3; params.height = (int) (200 + Math.random() * 400) ; ivImage.setLayoutParams(params); } @Override void setData(Object data) { if (data != null) { String text = (String) data; Glide.with(itemView.getContext()).load(text).diskCacheStrategy(DiskCacheStrategy.ALL).placeholder(R.mipmap.ic_launcher).crossFade().into(ivImage); } } } } 

這裏值得一提的就是如何動態設置寬高，由於要實現瀑布流效果，就是高度隨機，良莠不齊那種視覺效果。

我原來還覺得StaggeredGridLayoutManager會爲咱們考慮這些事，實際上NO！！！

搞了大半夜，參考翔哥的例子，才瞭解，尼瑪，隨機高度還須要咱們本身去設置。

真坑，由於這樣我就搞不懂GridLayoutManager和StaggeredGridLayoutManager有啥區別了，由於GridLayoutManager也能實現瀑布流效果，這就讓我有點萌逼了。

有大神瞭解的話，但願能留言不吝賜教。

下面來講實現方式

ivImage.getContext()).getWindowManager().getDefaultDisplay().getWidth(); ViewGroup.LayoutParams params = ivImage.getLayoutParams(); //設置圖片的相對於屏幕的寬高比 params.width = width/3; params.height = (int) (200 + Math.random() * 400) ; ivImage.setLayoutParams(params); 

這裏是獲取屏幕寬度，由於是三列，因此設置圖片寬度取屏幕三分之一。

 

高度設置隨機，200-600之間，就這樣完事了。