Android UI 之WaterFall瀑布流效果 [复制链接]

不打扰是莪最后的温柔 提交于 2019-12-06 01:59:33

所谓瀑布流效果,简单说就是宽度相同但是高度不同的一大堆图片,分成几列,然后像水流一样向下排列,并随着用户的上下滑动自动加载更多的图片内容。

    语言描述比较抽象,具体效果看下面的截图:

        

    其实这个效果在web上应用的还蛮多的,在android上也有一些应用有用到。因为看起来参差不齐,所以比较有新鲜感,不像传统的九宫格那样千篇一律。

    网络上相关的文章也有几篇,但是整理后发现要么忽略了OOM的处理,要么代码的逻辑相对来说有一点混乱,滑动效果也有一点卡顿。

    所以后来自己干脆换了一下思路,重新实现了这样一个瀑布流效果。目前做的测试不多,但是加载几千张图片还没有出现过OOM的情况,滑动也比较流畅。


    下面大体讲解一下实现思路。

    要想比较好的实现这个效果主要有两个重点:

    一是在用户滑动到底部的时候加载下一组图片内容的处理。

    二是当加载图片比较多的情况下,对图片进行回收,防止OOM的处理。

    对于第一点,主要是加载时机的判断以及加载内容的异步处理。这一部分其实理解起来还是比较容易,具体可以参见下面给出的源码。

    对于第二点,在进行回收的时候,我们的整体思路是以用户当前看到的这一个屏幕为基准,向上两屏以及向下两屏一共有5屏的内容,超出这5屏范围的bitmap将被回收。

    在向上滚动的时候,将回收超过下方两屏范围的bitmap,并重载进入上方两屏的bitmap。

    在向下滚动的时候,将回收超过上方两屏范围的bitmap,并重载进入下方两屏的bitmap。

    具体的实现思路还是参见源码,我有给出比较详细的注释。

先来看一下项目的结构:


WaterFall.java

  1. package com.carrey.waterfall.waterfall;

  2. import java.io.IOException;
  3. import java.lang.ref.WeakReference;
  4. import java.util.ArrayList;
  5. import java.util.Random;

  6. import android.content.Context;
  7. import android.graphics.Color;
  8. import android.os.Handler;
  9. import android.os.Message;
  10. import android.util.AttributeSet;
  11. import android.view.MotionEvent;
  12. import android.widget.LinearLayout;
  13. import android.widget.ScrollView;
  14. /**
  15. * 瀑布流
  16. * 某些参数做了固定设置,如果想扩展功能,可自行修改
  17. * @author carrey
  18. *
  19. */
  20. public class WaterFall extends ScrollView {
  21.         
  22.         /** 延迟发送message的handler */
  23.         private DelayHandler delayHandler;
  24.         /** 添加单元到瀑布流中的Handler */
  25.         private AddItemHandler addItemHandler;
  26.         
  27.         /** ScrollView直接包裹的LinearLayout */
  28.         private LinearLayout containerLayout;
  29.         /** 存放所有的列Layout */
  30.         private ArrayList<LinearLayout> colLayoutArray;
  31.         
  32.         /** 当前所处的页面(已经加载了几次) */
  33.         private int currentPage;
  34.         
  35.         /** 存储每一列中向上方向的未被回收bitmap的单元的最小行号 */
  36.         private int[] currentTopLineIndex;
  37.         /** 存储每一列中向下方向的未被回收bitmap的单元的最大行号 */
  38.         private int[] currentBomLineIndex;
  39.         /** 存储每一列中已经加载的最下方的单元的行号 */
  40.         private int[] bomLineIndex;
  41.         /** 存储每一列的高度 */
  42.         private int[] colHeight;
  43.         
  44.         /** 所有的图片资源路径 */
  45.         private String[] imageFilePaths;
  46.         
  47.         /** 瀑布流显示的列数 */
  48.         private int colCount;
  49.         /** 瀑布流每一次加载的单元数量 */
  50.         private int pageCount;
  51.         /** 瀑布流容纳量 */
  52.         private int capacity;
  53.         
  54.         private Random random;
  55.         
  56.         /** 列的宽度 */
  57.         private int colWidth;
  58.         
  59.         private boolean isFirstPage;

  60.         public WaterFall(Context context, AttributeSet attrs, int defStyle) {
  61.                 super(context, attrs, defStyle);
  62.                 init();
  63.         }

  64.         public WaterFall(Context context, AttributeSet attrs) {
  65.                 super(context, attrs);
  66.                 init();
  67.         }

  68.         public WaterFall(Context context) {
  69.                 super(context);
  70.                 init();
  71.         }
  72.         
  73.         /** 基本初始化工作 */
  74.         private void init() {
  75.                 delayHandler = new DelayHandler(this);
  76.                 addItemHandler = new AddItemHandler(this);
  77.                 colCount = 4;//默认情况下是4列
  78.                 pageCount = 30;//默认每次加载30个瀑布流单元
  79.                 capacity = 10000;//默认容纳10000张图
  80.                 random = new Random();
  81.                 colWidth = getResources().getDisplayMetrics().widthPixels / colCount;
  82.                 
  83.                 colHeight = new int[colCount];
  84.                 currentTopLineIndex = new int[colCount];
  85.                 currentBomLineIndex = new int[colCount];
  86.                 bomLineIndex = new int[colCount];
  87.                 colLayoutArray = new ArrayList<LinearLayout>();
  88.         }
  89.         
  90.         /**
  91.          * 在外部调用 第一次装载页面 必须调用
  92.          */
  93.         public void setup() {
  94.                 containerLayout = new LinearLayout(getContext());
  95.                 containerLayout.setBackgroundColor(Color.WHITE);
  96.                 LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(
  97.                                 LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.MATCH_PARENT);
  98.                 addView(containerLayout, layoutParams);
  99.                 
  100.                 for (int i = 0; i < colCount; i++) {
  101.                         LinearLayout colLayout = new LinearLayout(getContext());
  102.                         LinearLayout.LayoutParams colLayoutParams = new LinearLayout.LayoutParams(
  103.                                         colWidth, LinearLayout.LayoutParams.WRAP_CONTENT);
  104.                         colLayout.setPadding(2, 2, 2, 2);
  105.                         colLayout.setOrientation(LinearLayout.VERTICAL);
  106.                         
  107.                         containerLayout.addView(colLayout, colLayoutParams);
  108.                         colLayoutArray.add(colLayout);
  109.                 }
  110.                 
  111.                 try {
  112.                         imageFilePaths = getContext().getAssets().list("images");
  113.                 } catch (IOException e) {
  114.                         e.printStackTrace();
  115.                 }
  116.                 //添加第一页
  117.                 addNextPageContent(true);
  118.         }

  119.         @Override
  120.         public boolean onTouchEvent(MotionEvent ev) {
  121.                 switch (ev.getAction()) {
  122.                 case MotionEvent.ACTION_DOWN:
  123.                         break;
  124.                 case MotionEvent.ACTION_UP:
  125.                         //手指离开屏幕的时候向DelayHandler延时发送一个信息,然后DelayHandler
  126.                         //届时来判断当前的滑动位置,进行不同的处理。
  127.                         delayHandler.sendMessageDelayed(delayHandler.obtainMessage(), 200);
  128.                         break;
  129.                 }
  130.                 return super.onTouchEvent(ev);
  131.         }
  132.         
  133.         @Override
  134.         protected void onScrollChanged(int l, int t, int oldl, int oldt) {
  135.                 //在滚动过程中,回收滚动了很远的bitmap,防止OOM
  136.                 /*---回收算法说明:
  137.                  * 回收的整体思路是:
  138.                  * 我们只保持当前手机显示的这一屏以及上方两屏和下方两屏 一共5屏内容的Bitmap,
  139.                  * 超出这个范围的单元Bitmap都被回收。
  140.                  * 这其中又包括了一种情况就是之前回收过的单元的重新加载。
  141.                  * 详细的讲解:
  142.                  * 向下滚动的时候:回收超过上方两屏的单元Bitmap,重载进入下方两屏以内Bitmap
  143.                  * 向上滚动的时候:回收超过下方两屏的单元bitmao,重载进入上方两屏以内bitmap
  144.                  * ---*/
  145.                 int viewHeight = getHeight();
  146.                 if (t > oldt) {//向下滚动
  147.                         if (t > 2 * viewHeight) {
  148.                                 for (int i = 0; i < colCount; i++) {
  149.                                         LinearLayout colLayout = colLayoutArray.get(i);
  150.                                         //回收上方超过两屏bitmap
  151.                                         FlowingView topItem = (FlowingView) colLayout.getChildAt(currentTopLineIndex[i]);
  152.                                         if (topItem.getFootHeight() < t - 2 * viewHeight) {
  153.                                                 topItem.recycle();
  154.                                                 currentTopLineIndex[i] ++;
  155.                                         }
  156.                                         //重载下方进入(+1)两屏以内bitmap
  157.                                         FlowingView bomItem = (FlowingView) colLayout.getChildAt(Math.min(currentBomLineIndex[i] + 1, bomLineIndex[i]));
  158.                                         if (bomItem.getFootHeight() <= t + 3 * viewHeight) {
  159.                                                 bomItem.reload();
  160.                                                 currentBomLineIndex[i] = Math.min(currentBomLineIndex[i] + 1, bomLineIndex[i]);
  161.                                         }
  162.                                 }
  163.                         }
  164.                 } else {//向上滚动
  165.                         for (int i = 0; i < colCount; i++) {
  166.                                 LinearLayout colLayout = colLayoutArray.get(i);
  167.                                 //回收下方超过两屏bitmap
  168.                                 FlowingView bomItem = (FlowingView) colLayout.getChildAt(currentBomLineIndex[i]);
  169.                                 if (bomItem.getFootHeight() > t + 3 * viewHeight) {
  170.                                         bomItem.recycle();
  171.                                         currentBomLineIndex[i] --;
  172.                                 }
  173.                                 //重载上方进入(-1)两屏以内bitmap
  174.                                 FlowingView topItem = (FlowingView) colLayout.getChildAt(Math.max(currentTopLineIndex[i] - 1, 0));
  175.                                 if (topItem.getFootHeight() >= t - 2 * viewHeight) {
  176.                                         topItem.reload();
  177.                                         currentTopLineIndex[i] = Math.max(currentTopLineIndex[i] - 1, 0);
  178.                                 }
  179.                         }
  180.                 }
  181.                 super.onScrollChanged(l, t, oldl, oldt);
  182.         }
  183.         
  184.         /**
  185.          * 这里之所以要用一个Handler,是为了使用他的延迟发送message的函数
  186.          * 延迟的效果在于,如果用户快速滑动,手指很早离开屏幕,然后滑动到了底部的时候,
  187.          * 因为信息稍后发送,在手指离开屏幕到滑动到底部的这个时间差内,依然能够加载图片
  188.          * @author carrey
  189.          *
  190.          */
  191.         private static class DelayHandler extends Handler {
  192.                 private WeakReference<WaterFall> waterFallWR;
  193.                 private WaterFall waterFall;
  194.                 public DelayHandler(WaterFall waterFall) {
  195.                         waterFallWR = new WeakReference<WaterFall>(waterFall);
  196.                         this.waterFall = waterFallWR.get();
  197.                 }
  198.                 
  199.                 @Override
  200.                 public void handleMessage(Message msg) {
  201.                         //判断当前滑动到的位置,进行不同的处理
  202.                         if (waterFall.getScrollY() + waterFall.getHeight() >= 
  203.                                         waterFall.getMaxColHeight() - 20) {
  204.                                 //滑动到底部,添加下一页内容
  205.                                 waterFall.addNextPageContent(false);
  206.                         } else if (waterFall.getScrollY() == 0) {
  207.                                 //滑动到了顶部
  208.                         } else {
  209.                                 //滑动在中间位置
  210.                         }
  211.                         super.handleMessage(msg);
  212.                 }
  213.         }
  214.         
  215.         /**
  216.          * 添加单元到瀑布流中的Handler
  217.          * @author carrey
  218.          *
  219.          */
  220.         private static class AddItemHandler extends Handler {
  221.                 private WeakReference<WaterFall> waterFallWR;
  222.                 private WaterFall waterFall;
  223.                 public AddItemHandler(WaterFall waterFall) {
  224.                         waterFallWR = new WeakReference<WaterFall>(waterFall);
  225.                         this.waterFall = waterFallWR.get();
  226.                 }
  227.                 @Override
  228.                 public void handleMessage(Message msg) {
  229.                         switch (msg.what) {
  230.                         case 0x00:
  231.                                 FlowingView flowingView = (FlowingView)msg.obj;
  232.                                 waterFall.addItem(flowingView);
  233.                                 break;
  234.                         }
  235.                         super.handleMessage(msg);
  236.                 }
  237.         }
  238.         /**
  239.          * 添加单元到瀑布流中
  240.          * @param flowingView
  241.          */
  242.         private void addItem(FlowingView flowingView) {
  243.                 int minHeightCol = getMinHeightColIndex();
  244.                 colLayoutArray.get(minHeightCol).addView(flowingView);
  245.                 colHeight[minHeightCol] += flowingView.getViewHeight();
  246.                 flowingView.setFootHeight(colHeight[minHeightCol]);
  247.                 
  248.                 if (!isFirstPage) {
  249.                         bomLineIndex[minHeightCol] ++;
  250.                         currentBomLineIndex[minHeightCol] ++;
  251.                 }
  252.         }
  253.         
  254.         /**
  255.          * 添加下一个页面的内容
  256.          */
  257.         private void addNextPageContent(boolean isFirstPage) {
  258.                 this.isFirstPage = isFirstPage;
  259.                 
  260.                 //添加下一个页面的pageCount个单元内容
  261.                 for (int i = pageCount * currentPage; 
  262.                                 i < pageCount * (currentPage + 1) && i < capacity; i++) {
  263.                         new Thread(new PrepareFlowingViewRunnable(i)).run();
  264.                 }
  265.                 currentPage ++;
  266.         }
  267.         
  268.         /**
  269.          * 异步加载要添加的FlowingView
  270.          * @author carrey
  271.          *
  272.          */
  273.         private class PrepareFlowingViewRunnable implements Runnable {
  274.                 private int id;
  275.                 public PrepareFlowingViewRunnable (int id) {
  276.                         this.id = id;
  277.                 }
  278.                 
  279.                 @Override
  280.                 public void run() {
  281.                         FlowingView flowingView = new FlowingView(getContext(), id, colWidth);
  282.                         String imageFilePath = "images/" + imageFilePaths[random.nextInt(imageFilePaths.length)];
  283.                         flowingView.setImageFilePath(imageFilePath);
  284.                         flowingView.loadImage();
  285.                         addItemHandler.sendMessage(addItemHandler.obtainMessage(0x00, flowingView));
  286.                 }
  287.                 
  288.         }
  289.         
  290.         /**
  291.          * 获得所有列中的最大高度
  292.          * @return
  293.          */
  294.         private int getMaxColHeight() {
  295.                 int maxHeight = colHeight[0];
  296.                 for (int i = 1; i < colHeight.length; i++) {
  297.                         if (colHeight[i] > maxHeight)
  298.                                 maxHeight = colHeight[i];
  299.                 }
  300.                 return maxHeight;
  301.         }
  302.         
  303.         /**
  304.          * 获得目前高度最小的列的索引
  305.          * @return
  306.          */
  307.         private int getMinHeightColIndex() {
  308.                 int index = 0;
  309.                 for (int i = 1; i < colHeight.length; i++) {
  310.                         if (colHeight[i] < colHeight[index])
  311.                                 index = i;
  312.                 }
  313.                 return index;
  314.         }
  315. }
复制代码
FlowingView.java

  1. package com.carrey.waterfall.waterfall;

  2. import java.io.IOException;
  3. import java.io.InputStream;

  4. import android.content.Context;
  5. import android.graphics.Bitmap;
  6. import android.graphics.BitmapFactory;
  7. import android.graphics.Canvas;
  8. import android.graphics.Color;
  9. import android.graphics.Paint;
  10. import android.graphics.Rect;
  11. import android.view.View;
  12. import android.widget.Toast;
  13. /**
  14. * 瀑布流中流动的单元
  15. * @author carrey
  16. *
  17. */
  18. public class FlowingView extends View implements View.OnClickListener, View.OnLongClickListener {
  19.         
  20.         /** 单元的编号,在整个瀑布流中是唯一的,可以用来标识身份 */
  21.         private int index;
  22.         
  23.         /** 单元中要显示的图片Bitmap */
  24.         private Bitmap imageBmp;
  25.         /** 图像文件的路径 */
  26.         private String imageFilePath;
  27.         /** 单元的宽度,也是图像的宽度 */
  28.         private int width;
  29.         /** 单元的高度,也是图像的高度 */
  30.         private int height;
  31.         
  32.         /** 画笔 */
  33.         private Paint paint;
  34.         /** 图像绘制区域 */
  35.         private Rect rect;
  36.         
  37.         /** 这个单元的底部到它所在列的顶部之间的距离 */
  38.         private int footHeight;
  39.         
  40.         public FlowingView(Context context, int index, int width) {
  41.                 super(context);
  42.                 this.index = index;
  43.                 this.width = width;
  44.                 init();
  45.         }
  46.         
  47.         /**
  48.          * 基本初始化工作
  49.          */
  50.         private void init() {
  51.                 setOnClickListener(this);
  52.                 setOnLongClickListener(this);
  53.                 paint = new Paint();
  54.                 paint.setAntiAlias(true);
  55.         }
  56.         
  57.         @Override
  58.         protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
  59.                 setMeasuredDimension(width, height);
  60.         }
  61.         
  62.         @Override
  63.         protected void onDraw(Canvas canvas) {
  64.                 //绘制图像
  65.                 canvas.drawColor(Color.WHITE);
  66.                 if (imageBmp != null && rect != null) {
  67.                         canvas.drawBitmap(imageBmp, null, rect, paint);
  68.                 }
  69.                 super.onDraw(canvas);
  70.         }
  71.         
  72.         /**
  73.          * 被WaterFall调用异步加载图片数据
  74.          */
  75.         public void loadImage() {
  76.                 InputStream inStream = null;
  77.                 try {
  78.                         inStream = getContext().getAssets().open(imageFilePath);
  79.                         imageBmp = BitmapFactory.decodeStream(inStream);
  80.                         inStream.close();
  81.                         inStream = null;
  82.                 } catch (IOException e) {
  83.                         e.printStackTrace();
  84.                 }
  85.                 if (imageBmp != null) {
  86.                         int bmpWidth = imageBmp.getWidth();
  87.                         int bmpHeight = imageBmp.getHeight();
  88.                         height = (int) (bmpHeight * width / bmpWidth);
  89.                         rect = new Rect(0, 0, width, height);
  90.                 }
  91.         }
  92.         
  93.         /**
  94.          * 重新加载回收了的Bitmap
  95.          */
  96.         public void reload() {
  97.                 if (imageBmp == null) {
  98.                         new Thread(new Runnable() {
  99.                                 
  100.                                 @Override
  101.                                 public void run() {
  102.                                         InputStream inStream = null;
  103.                                         try {
  104.                                                 inStream = getContext().getAssets().open(imageFilePath);
  105.                                                 imageBmp = BitmapFactory.decodeStream(inStream);
  106.                                                 inStream.close();
  107.                                                 inStream = null;
  108.                                                 postInvalidate();
  109.                                         } catch (IOException e) {
  110.                                                 e.printStackTrace();
  111.                                         }
  112.                                 }
  113.                         }).start();
  114.                 }
  115.         }
  116.         
  117.         /**
  118.          * 防止OOM进行回收
  119.          */
  120.         public void recycle() {
  121.                 if (imageBmp == null || imageBmp.isRecycled()) 
  122.                         return;
  123.                 new Thread(new Runnable() {
  124.                         
  125.                         @Override
  126.                         public void run() {
  127.                                 imageBmp.recycle();
  128.                                 imageBmp = null;
  129.                                 postInvalidate();
  130.                         }
  131.                 }).start();
  132.         }
  133.         
  134.         @Override
  135.         public boolean onLongClick(View v) {
  136.                 Toast.makeText(getContext(), "long click : " + index, Toast.LENGTH_SHORT).show();
  137.                 return true;
  138.         }

  139.         @Override
  140.         public void onClick(View v) {
  141.                 Toast.makeText(getContext(), "click : " + index, Toast.LENGTH_SHORT).show();
  142.         }

  143.         /**
  144.          * 获取单元的高度
  145.          * @return
  146.          */
  147.         public int getViewHeight() {
  148.                 return height;
  149.         }
  150.         /**
  151.          * 设置图片路径
  152.          * @param imageFilePath
  153.          */
  154.         public void setImageFilePath(String imageFilePath) {
  155.                 this.imageFilePath = imageFilePath;
  156.         }

  157.         public Bitmap getImageBmp() {
  158.                 return imageBmp;
  159.         }

  160.         public void setImageBmp(Bitmap imageBmp) {
  161.                 this.imageBmp = imageBmp;
  162.         }

  163.         public int getFootHeight() {
  164.                 return footHeight;
  165.         }

  166.         public void setFootHeight(int footHeight) {
  167.                 this.footHeight = footHeight;
  168.         }
  169. }
复制代码
MainActivity.java

  1. package com.carrey.waterfall;

  2. import com.carrey.waterfall.waterfall.WaterFall;

  3. import android.os.Bundle;
  4. import android.app.Activity;

  5. public class MainActivity extends Activity {

  6.         @Override
  7.         protected void onCreate(Bundle savedInstanceState) {
  8.                 super.onCreate(savedInstanceState);
  9.                 setContentView(R.layout.activity_main);
  10.                 
  11.                 WaterFall waterFall = (WaterFall) findViewById(R.id.waterfall);
  12.                 waterFall.setup();
  13.         }

  14. }
复制代码
activity_main.xml

  1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  2.     xmlns:tools="http://schemas.android.com/tools"
  3.     android:layout_width="match_parent"
  4.     android:layout_height="match_parent"
  5.     tools:context=".MainActivity" >

  6.     <com.carrey.waterfall.waterfall.WaterFall 
  7.         android:id="@+id/waterfall"
  8.         android:layout_width="match_parent"
  9.         android:layout_height="match_parent"/>

  10. </RelativeLayout>
复制代码
 WaterFall.rar (6.8 MB, 下载次数: 1082) 


易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!