Android UI 之WaterFall瀑布流效果 [複製連接]

時間  2019-11-10
標籤 android waterfall 瀑布 效果 複製 連接 欄目 Android 简体版
原文   原文鏈接

所謂瀑布流效果，簡單說就是寬度相同可是高度不一樣的一大堆圖片，分紅幾列，而後像水流同樣向下排列，並隨着用戶的上下滑動自動加載更多的圖片內容。php

    語言描述比較抽象，具體效果看下面的截圖：java

        

    其實這個效果在web上應用的還蠻多的，在android上也有一些應用有用到。由於看起來良莠不齊，因此比較有新鮮感，不像傳統的九宮格那樣千篇一概。android

    網絡上相關的文章也有幾篇，可是整理後發現要麼忽略了OOM的處理，要麼代碼的邏輯相對來講有一點混亂，滑動效果也有一點卡頓。web

    因此後來本身乾脆換了一下思路，從新實現了這樣一個瀑布流效果。目前作的測試很少，可是加載幾千張圖片尚未出現過OOM的狀況，滑動也比較流暢。算法


    下面大致講解一下實現思路。canvas

    要想比較好的實現這個效果主要有兩個重點：網絡

    一是在用戶滑動到底部的時候加載下一組圖片內容的處理。app

    二是當加載圖片比較多的狀況下，對圖片進行回收，防止OOM的處理。dom

    對於第一點，主要是加載時機的判斷以及加載內容的異步處理。這一部分其實理解起來仍是比較容易，具體能夠參見下面給出的源碼。異步

    對於第二點，在進行回收的時候，咱們的總體思路是以用戶當前看到的這一個屏幕爲基準，向上兩屏以及向下兩屏一共有5屏的內容，超出這5屏範圍的bitmap將被回收。

    在向上滾動的時候，將回收超過下方兩屏範圍的bitmap，並重載進入上方兩屏的bitmap。

    在向下滾動的時候，將回收超過上方兩屏範圍的bitmap，並重載進入下方兩屏的bitmap。

    具體的實現思路仍是參見源碼，我有給出比較詳細的註釋。

先來看一下項目的結構：


WaterFall.java

  1. package com.carrey.waterfall.waterfall;

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

  8. import android.content.Context;
  9. import android.graphics.Color;
  10. import android.os.Handler;
  11. import android.os.Message;
  12. import android.util.AttributeSet;
  13. import android.view.MotionEvent;
  14. import android.widget.LinearLayout;
  15. import android.widget.ScrollView;
  16. /**
  17. * 瀑布流
  18. * 某些參數作了固定設置，若是想擴展功能，可自行修改
  19. * @author carrey
  20. *
  21. */
  22. public class WaterFall extends ScrollView {
  23.         
  24.         /** 延遲發送message的handler */
  25.         private DelayHandler delayHandler;
  26.         /** 添加單元到瀑布流中的Handler */
  27.         private AddItemHandler addItemHandler;
  28.         
  29.         /** ScrollView直接包裹的LinearLayout */
  30.         private LinearLayout containerLayout;
  31.         /** 存放全部的列Layout */
  32.         private ArrayList<LinearLayout> colLayoutArray;
  33.         
  34.         /** 當前所處的頁面（已經加載了幾回） */
  35.         private int currentPage;
  36.         
  37.         /** 存儲每一列中向上方向的未被回收bitmap的單元的最小行號 */
  38.         private int[] currentTopLineIndex;
  39.         /** 存儲每一列中向下方向的未被回收bitmap的單元的最大行號 */
  40.         private int[] currentBomLineIndex;
  41.         /** 存儲每一列中已經加載的最下方的單元的行號 */
  42.         private int[] bomLineIndex;
  43.         /** 存儲每一列的高度 */
  44.         private int[] colHeight;
  45.         
  46.         /** 全部的圖片資源路徑 */
  47.         private String[] imageFilePaths;
  48.         
  49.         /** 瀑布流顯示的列數 */
  50.         private int colCount;
  51.         /** 瀑布流每一次加載的單元數量 */
  52.         private int pageCount;
  53.         /** 瀑布流容納量 */
  54.         private int capacity;
  55.         
  56.         private Random random;
  57.         
  58.         /** 列的寬度 */
  59.         private int colWidth;
  60.         
  61.         private boolean isFirstPage;

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

  68.         public WaterFall(Context context, AttributeSet attrs) {
  69.                 super(context, attrs);
  70.                 init();
  71.         }

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

  125.         @Override
  126.         public boolean onTouchEvent(MotionEvent ev) {
  127.                 switch (ev.getAction()) {
  128.                 case MotionEvent.ACTION_DOWN:
  129.                         break;
  130.                 case MotionEvent.ACTION_UP:
  131.                         //手指離開屏幕的時候向DelayHandler延時發送一個信息，而後DelayHandler
  132.                         //屆時來判斷當前的滑動位置，進行不一樣的處理。
  133.                         delayHandler.sendMessageDelayed(delayHandler.obtainMessage(), 200);
  134.                         break;
  135.                 }
  136.                 return super.onTouchEvent(ev);
  137.         }
  138.         
  139.         @Override
  140.         protected void onScrollChanged(int l, int t, int oldl, int oldt) {
  141.                 //在滾動過程當中，回收滾動了很遠的bitmap,防止OOM
  142.                 /*---回收算法說明：
  143.                  * 回收的總體思路是：
  144.                  * 咱們只保持當前手機顯示的這一屏以及上方兩屏和下方兩屏 一共5屏內容的Bitmap,
  145.                  * 超出這個範圍的單元Bitmap都被回收。
  146.                  * 這其中又包括了一種狀況就是以前回收過的單元的從新加載。
  147.                  * 詳細的講解：
  148.                  * 向下滾動的時候：回收超過上方兩屏的單元Bitmap,重載進入下方兩屏之內Bitmap
  149.                  * 向上滾動的時候：回收超過下方兩屏的單元bitmao,重載進入上方兩屏之內bitmap
  150.                  * ---*/
  151.                 int viewHeight = getHeight();
  152.                 if (t > oldt) {//向下滾動
  153.                         if (t > 2 * viewHeight) {
  154.                                 for (int i = 0; i < colCount; i++) {
  155.                                         LinearLayout colLayout = colLayoutArray.get(i);
  156.                                         //回收上方超過兩屏bitmap
  157.                                         FlowingView topItem = (FlowingView) colLayout.getChildAt(currentTopLineIndex[i]);
  158.                                         if (topItem.getFootHeight() < t - 2 * viewHeight) {
  159.                                                 topItem.recycle();
  160.                                                 currentTopLineIndex[i] ++;
  161.                                         }
  162.                                         //重載下方進入(+1)兩屏之內bitmap
  163.                                         FlowingView bomItem = (FlowingView) colLayout.getChildAt(Math.min(currentBomLineIndex[i] + 1, bomLineIndex[i]));
  164.                                         if (bomItem.getFootHeight() <= t + 3 * viewHeight) {
  165.                                                 bomItem.reload();
  166.                                                 currentBomLineIndex[i] = Math.min(currentBomLineIndex[i] + 1, bomLineIndex[i]);
  167.                                         }
  168.                                 }
  169.                         }
  170.                 } else {//向上滾動
  171.                         for (int i = 0; i < colCount; i++) {
  172.                                 LinearLayout colLayout = colLayoutArray.get(i);
  173.                                 //回收下方超過兩屏bitmap
  174.                                 FlowingView bomItem = (FlowingView) colLayout.getChildAt(currentBomLineIndex[i]);
  175.                                 if (bomItem.getFootHeight() > t + 3 * viewHeight) {
  176.                                         bomItem.recycle();
  177.                                         currentBomLineIndex[i] --;
  178.                                 }
  179.                                 //重載上方進入(-1)兩屏之內bitmap
  180.                                 FlowingView topItem = (FlowingView) colLayout.getChildAt(Math.max(currentTopLineIndex[i] - 1, 0));
  181.                                 if (topItem.getFootHeight() >= t - 2 * viewHeight) {
  182.                                         topItem.reload();
  183.                                         currentTopLineIndex[i] = Math.max(currentTopLineIndex[i] - 1, 0);
  184.                                 }
  185.                         }
  186.                 }
  187.                 super.onScrollChanged(l, t, oldl, oldt);
  188.         }
  189.         
  190.         /**
  191.          * 這裏之因此要用一個Handler，是爲了使用他的延遲發送message的函數
  192.          * 延遲的效果在於，若是用戶快速滑動，手指很早離開屏幕，而後滑動到了底部的時候，
  193.          * 由於信息稍後發送，在手指離開屏幕到滑動到底部的這個時間差內，依然可以加載圖片
  194.          * @author carrey
  195.          *
  196.          */
  197.         private static class DelayHandler extends Handler {
  198.                 private WeakReference<WaterFall> waterFallWR;
  199.                 private WaterFall waterFall;
  200.                 public DelayHandler(WaterFall waterFall) {
  201.                         waterFallWR = new WeakReference<WaterFall>(waterFall);
  202.                         this.waterFall = waterFallWR.get();
  203.                 }
  204.                 
  205.                 @Override
  206.                 public void handleMessage(Message msg) {
  207.                         //判斷當前滑動到的位置，進行不一樣的處理
  208.                         if (waterFall.getScrollY() + waterFall.getHeight() >= 
  209.                                         waterFall.getMaxColHeight() - 20) {
  210.                                 //滑動到底部，添加下一頁內容
  211.                                 waterFall.addNextPageContent(false);
  212.                         } else if (waterFall.getScrollY() == 0) {
  213.                                 //滑動到了頂部
  214.                         } else {
  215.                                 //滑動在中間位置
  216.                         }
  217.                         super.handleMessage(msg);
  218.                 }
  219.         }
  220.         
  221.         /**
  222.          * 添加單元到瀑布流中的Handler
  223.          * @author carrey
  224.          *
  225.          */
  226.         private static class AddItemHandler extends Handler {
  227.                 private WeakReference<WaterFall> waterFallWR;
  228.                 private WaterFall waterFall;
  229.                 public AddItemHandler(WaterFall waterFall) {
  230.                         waterFallWR = new WeakReference<WaterFall>(waterFall);
  231.                         this.waterFall = waterFallWR.get();
  232.                 }
  233.                 @Override
  234.                 public void handleMessage(Message msg) {
  235.                         switch (msg.what) {
  236.                         case 0x00:
  237.                                 FlowingView flowingView = (FlowingView)msg.obj;
  238.                                 waterFall.addItem(flowingView);
  239.                                 break;
  240.                         }
  241.                         super.handleMessage(msg);
  242.                 }
  243.         }
  244.         /**
  245.          * 添加單元到瀑布流中
  246.          * @param flowingView
  247.          */
  248.         private void addItem(FlowingView flowingView) {
  249.                 int minHeightCol = getMinHeightColIndex();
  250.                 colLayoutArray.get(minHeightCol).addView(flowingView);
  251.                 colHeight[minHeightCol] += flowingView.getViewHeight();
  252.                 flowingView.setFootHeight(colHeight[minHeightCol]);
  253.                 
  254.                 if (!isFirstPage) {
  255.                         bomLineIndex[minHeightCol] ++;
  256.                         currentBomLineIndex[minHeightCol] ++;
  257.                 }
  258.         }
  259.         
  260.         /**
  261.          * 添加下一個頁面的內容
  262.          */
  263.         private void addNextPageContent(boolean isFirstPage) {
  264.                 this.isFirstPage = isFirstPage;
  265.                 
  266.                 //添加下一個頁面的pageCount個單元內容
  267.                 for (int i = pageCount * currentPage; 
  268.                                 i < pageCount * (currentPage + 1) && i < capacity; i++) {
  269.                         new Thread(new PrepareFlowingViewRunnable(i)).run();
  270.                 }
  271.                 currentPage ++;
  272.         }
  273.         
  274.         /**
  275.          * 異步加載要添加的FlowingView
  276.          * @author carrey
  277.          *
  278.          */
  279.         private class PrepareFlowingViewRunnable implements Runnable {
  280.                 private int id;
  281.                 public PrepareFlowingViewRunnable (int id) {
  282.                         this.id = id;
  283.                 }
  284.                 
  285.                 @Override
  286.                 public void run() {
  287.                         FlowingView flowingView = new FlowingView(getContext(), id, colWidth);
  288.                         String imageFilePath = "images/" + imageFilePaths[random.nextInt(imageFilePaths.length)];
  289.                         flowingView.setImageFilePath(imageFilePath);
  290.                         flowingView.loadImage();
  291.                         addItemHandler.sendMessage(addItemHandler.obtainMessage(0x00, flowingView));
  292.                 }
  293.                 
  294.         }
  295.         
  296.         /**
  297.          * 得到全部列中的最大高度
  298.          * @return
  299.          */
  300.         private int getMaxColHeight() {
  301.                 int maxHeight = colHeight[0];
  302.                 for (int i = 1; i < colHeight.length; i++) {
  303.                         if (colHeight[i] > maxHeight)
  304.                                 maxHeight = colHeight[i];
  305.                 }
  306.                 return maxHeight;
  307.         }
  308.         
  309.         /**
  310.          * 得到目前高度最小的列的索引
  311.          * @return
  312.          */
  313.         private int getMinHeightColIndex() {
  314.                 int index = 0;
  315.                 for (int i = 1; i < colHeight.length; i++) {
  316.                         if (colHeight[i] < colHeight[index])
  317.                                 index = i;
  318.                 }
  319.                 return index;
  320.         }
  321. }
複製代碼
FlowingView.java

  1. package com.carrey.waterfall.waterfall;

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

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

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

  147.         /**
  148.          * 獲取單元的高度
  149.          * @return
  150.          */
  151.         public int getViewHeight() {
  152.                 return height;
  153.         }
  154.         /**
  155.          * 設置圖片路徑
  156.          * @param imageFilePath
  157.          */
  158.         public void setImageFilePath(String imageFilePath) {
  159.                 this.imageFilePath = imageFilePath;
  160.         }

  162.         public Bitmap getImageBmp() {
  163.                 return imageBmp;
  164.         }

  166.         public void setImageBmp(Bitmap imageBmp) {
  167.                 this.imageBmp = imageBmp;
  168.         }

  170.         public int getFootHeight() {
  171.                 return footHeight;
  172.         }

  174.         public void setFootHeight(int footHeight) {
  175.                 this.footHeight = footHeight;
  176.         }
  177. }
複製代碼
MainActivity.java

  1. package com.carrey.waterfall;

  3. import com.carrey.waterfall.waterfall.WaterFall;

  5. import android.os.Bundle;
  6. import android.app.Activity;

  8. public class MainActivity extends Activity {

  10.         @Override
  11.         protected void onCreate(Bundle savedInstanceState) {
  12.                 super.onCreate(savedInstanceState);
  13.                 setContentView(R.layout.activity_main);
  14.                 
  15.                 WaterFall waterFall = (WaterFall) findViewById(R.id.waterfall);
  16.                 waterFall.setup();
  17.         }

  19. }
複製代碼
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" >

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

  12. </RelativeLayout>
複製代碼
 WaterFall.rar (6.8 MB, 下載次數: 1082) 

Android
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程