Android:瀑布流效果 的简单实现

瀑布流布局结构:

 ScrollView
 *     ------------------------------------------------------------
 *     |      LinearLayout (horizontal)                           |
 *     | -------------------------------------------------------- |
 *     | |      LinearLayout     LinearLayout    LinearLayout   | |
 *     | |  ----------------  ---------------  ---------------  | |
 *     | |  |              |  |             |  |             |  | |
 *     | |  |              |  |             |  |             |  | |
 *     | |  |              |  |             |  |             |  | |
 *     | |  |   Column1    |  |  Column2    |  |  Column3    |  | |
 *     | |  |   Vertical   |  |  Vertical   |  |  Vertical   |  | |
 *     | |  |              |  |             |  |             |  | |
 *     | |  |              |  |             |  |             |  | |
 *     | |  ----------------  ---------------  ---------------  | |
 *     | -------------------------------------------------------- |
 *     ------------------------------------------------------------

布局文件代码如下:

<ScrollView 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"
    android:id="@+id/scrollView"
     >
<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:id="@+id/pool"
    android:orientation="horizontal"
    >

</LinearLayout>

</ScrollView>

功能实现代码如下:

  1 package com.don.waterfall_test;
  2
  3 import java.io.IOException;
  4 import java.io.InputStream;
  5 import java.util.ArrayList;
  6 import java.util.Arrays;
  7 import java.util.List;
  8
  9 import android.app.Activity;
 10 import android.content.res.AssetManager;
 11 import android.graphics.Bitmap;
 12 import android.graphics.BitmapFactory;
 13 import android.os.Bundle;
 14 import android.view.Display;
 15 import android.view.MotionEvent;
 16 import android.view.View;
 17 import android.view.View.OnTouchListener;
 18 import android.widget.ImageView;
 19 import android.widget.LinearLayout;
 20 import android.widget.LinearLayout.LayoutParams;
 21 import android.widget.ScrollView;
 22
 23 public class MainActivity extends Activity implements OnTouchListener {
 24    private ScrollView scrollView;
 25    private LinearLayout pool;
 26    private List<LinearLayout> items_layout; //用于存放动态生成的线性布局
 27    private AssetManager manager; //assets文件夹的管理器
 28    private int screenWidth;  //屏幕的宽度
 29    private List<String> namesList; //用于存放所有图片文件的文件名
 30    private int currentIndex = 0;; //表示当前页从第几
 31
 32     @Override
 33     protected void onCreate(Bundle savedInstanceState) {
 34         super.onCreate(savedInstanceState);
 35         setContentView(R.layout.activity_main);
 36
 37         scrollView = (ScrollView) findViewById(R.id.scrollView);
 38         scrollView.setOnTouchListener(this);
 39         pool = (LinearLayout) findViewById(R.id.pool);
 40
 41         manager = getAssets();
 42
 43         Display display = getWindowManager().getDefaultDisplay();
 44         screenWidth = display.getWidth();
 45
 46         createLayouts();
 47
 48         getPicNameList();
 49          loadImage(currentIndex);
 50
 51     }
 52
 53     /**
 54      *  动态生成三个垂直的线性布局
 55      */
 56     public void createLayouts(){
 57         items_layout = new ArrayList<LinearLayout>();
 58         for(int i = 0; i < 3; i++){
 59             LinearLayout item_layout = new LinearLayout(this);
 60             item_layout.setOrientation(LinearLayout.VERTICAL);
 61             LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(screenWidth/3,android.view.ViewGroup.LayoutParams.WRAP_CONTENT);
 62             item_layout.setLayoutParams(params);
 63             //将该线性布局添加到pool中
 64             pool.addView(item_layout);
 65             //将该线性布局添加到集合中
 66             items_layout.add(item_layout);
 67         }
 68
 69     }
 70
 71     /**
 72      *   //将assets文件夹下的图片名存到集合中
 73      */
 74     public void getPicNameList(){
 75
 76         namesList = new ArrayList<String>();
 77         try {
 78             //获取到images文件夹下所有图片的文件名数组
 79             String[] names = manager.list("images");
 80             //将字符串数据转换为集合
 81             namesList.addAll(Arrays.asList(names));
 82         } catch (IOException e) {
 83             e.printStackTrace();
 84         }
 85
 86     }
 87     /**
 88      *  从指定索引位置处加载图片
 89      * @param currentIndex
 90      */
 91     public void loadImage(int index ){
 92
 93         //用于一次加载的图片的文件名,一次加载9张
 94         String[] paths = new String[9];
 95         for(int i = index ,j = 0; i < index +9;i++,j++){
 96             if(i >= namesList.size()){
 97                 break;
 98             }
 99             paths[j] = namesList.get(i);
100
101         }
102
103        //获取到图片路径后,就开始加载图片
104         int count = 0; //用于计算加载的paths中的第几张图片
105         for(String fileName : paths){
106             try {
107                 //获得bitmap对象
108                 InputStream is = manager.open("images/"+fileName);
109                 Bitmap bitmap = BitmapFactory.decodeStream(is);
110
111                 //动态创建ImageView
112                 ImageView image = new ImageView(this);
113                 //设置image的初始尺寸
114                 LinearLayout.LayoutParams params1 = new LinearLayout.LayoutParams(screenWidth/3,LinearLayout.LayoutParams.WRAP_CONTENT);
115                 image.setLayoutParams(params1);
116                 //为image设置默认图片
117                 image.setImageResource(R.drawable.ic_launcher);
118
119                 //根据bitmap的大小,重新设置image的高度
120                 LayoutParams params2 =   (LayoutParams) image.getLayoutParams();
121                 params2.height = params2.width * bitmap.getHeight()/bitmap.getWidth();
122                 image.setLayoutParams(params2);
123                 image.setImageBitmap(bitmap);
124
125                 //将image添加到垂直线性布局中
126                   items_layout.get(count%3).addView(image);
127                   count++;
128
129             } catch (IOException e) {
130                 e.printStackTrace();
131             }
132         }
133     }
134
135     /**
136      *  为scrollView添加触摸事件
137      */
138     @Override
139     public boolean onTouch(View view , MotionEvent event) {
140
141         int action = event.getAction();
142         if(action == MotionEvent.ACTION_UP){ //手指离开屏幕时加载图片
143
144             int sy = scrollView.getScrollY(); //滑出scrollView上边界的部分的高度
145             int sh = scrollView.getHeight();  //scrollView的高度
146
147             int ph = pool.getHeight(); //得到pool的高度
148
149             if(sy + sh >= ph){
150                 currentIndex += 9;
151
152                 /**
153                  *   方式一:
154                  *
155                  * 重复加载所有的图片,过多时,会发生OOM异常
156                  * *//*
157                 if(currentIndex >= namesList.size()){
158                     currentIndex = 0;
159                 }
160                 loadImage(currentIndex);*/
161
162
163                 /**
164                  *  方式二:
165                  *   将所有的图片只加载一次
166                  */
167                 if(currentIndex < namesList.size()){
168                     loadImage(currentIndex);
169                 }
170             }
171
172         }
173         return false;
174     }
175
176 }

时间: 2024-10-12 08:41:45

Android:瀑布流效果 的简单实现的相关文章

android 瀑布流效果(仿蘑菇街)

我们还是来看一款示例:(蘑菇街)           看起来很像我们的gridview吧,不过又不像,因为item大小不固定的,看起来是不是别有一番风味,确实如此.就如我们的方角图形,斯通见惯后也就出现了圆角.下面我简单介绍下实现方法. 第一种: 我们在配置文件中定义好列数.如上图也就是3列.我们需要定义三个LinearLayout,然后把获取到的图片add里面就ok了. main.xml [java] view plaincopy <?xml version="1.0" enc

android瀑布流效果(仿蘑菇街)

Android 转载分享(10)  我们还是来看一款示例:(蘑菇街)           看起来很像我们的gridview吧,不过又不像,因为item大小不固定的,看起来是不是别有一番风味,确实如此.就如我们的方角图形,斯通见惯后也就出现了圆角.下面我简单介绍下实现方法. 第一种: 我们在配置文件中定义好列数.如上图也就是3列.我们需要定义三个LinearLayout,然后把获取到的图片add里面就ok了. main.xml [java] view plaincopy <?xml version

Android开发--瀑布流效果的实现

对手机App的瀑布流效果一直有所耳闻,却从未自己亲自动手实践,趁着这几天还有些时间,做了些研究,也参考了网络上很多大神的博客,终于写出来自己的瀑布流效果了,先上一图. 正如图所示:瀑布流的原理很简单,就是自己重新写一个ScrollView,添加一个横向排布的LinearLayout,再向这个横向的LinearLayout中添加三个纵向排布的LinearLayout,接着我们就可以向每个一LinearLayout中依次添加图片.原理很容易理解,但实践起来也很困难,需要注意的问题也很多: 1.为了防

利用JS实现简单的瀑布流效果

哈哈, 我又来啦, 在这一段时间里, 我简单的学习了一下javascript(JS), 虽然不是很懂啦, 但是我也简单的尝试着做了点小东西, 就比如现在流行的瀑布流效果, 经过我的努力终于成功的完成了, 虽然中间非常的坎坷, 并不是一帆风顺但是最终我还是实现了个简单的效果, 下面就为大家简单的介绍下, 不知道的友友们, 有兴趣的话, 可以来参考下, 欢迎指出缺点和不足! 一.瀑布流之准备工作   首先声明下, 为了方便演示和联系, 我使用的是本地图片, 如果大家有需要的话可以尝试着写下网络的,

Android瀑布流StaggeredGridView学习研究

关于Android瀑布流控件,已经在江湖上,流传已久,超过两年时间了.网上也有很多相关学习资源,可以拿来研究学习.github上,就有两个资源,可以供学习者膜拜. 1.https://github.com/maurycyw/StaggeredGridView    此链接有图片加载功能,但功能相对简单些. 2.https://github.com/etsy/AndroidStaggeredGrid  提供的瀑布流功能强大,可以自定义瀑布流列数. 本篇博客,就讲解etsy的源码为主了.首先看效果图

RecyclerView实现瀑布流效果(图文详解+源码奉送)

最近有时间研究了一下RecyclerView,果然功能强大啊,能实现的效果还是比较多的,那么今天给大家介绍一个用RecyclerView实现的瀑布流效果. 先来一张效果图: 看看怎么实现吧: 整体工程目录结构: 这里要特别强调一点,有人可能不知道去哪里找android-support-v7-recyclerview.jar这个文件,其实它就在你下载的sdk目录下,我的是在D:\Program Files\Android\android-sdk\extras\android\support\v7\

自定义实现带文字标题的瀑布流效果

在网上能找到的大部分资料中的瀑布流效果都是单纯的照片实现,现在我来实现一个带文字标题的.效果如下: 每个item都是由图片和文字标题两部分组成. 布局方式为ScrollView里面嵌套一个水平方向的LinearLayout,里面再嵌套两个竖直方向的LinearLayout,然后判断竖直方向的两个LinearLayout的高度,向比较低的那个Linearlayout里面添加item. 下面是代码 <ScrollView xmlns:android="http://schemas.androi

一步步教你js原生瀑布流效果实现

一步步教你js原生瀑布流效果实现 什么是瀑布流效果 首先,让我们先看一段动画: 在动画中,我们不难发现,这个动画有以下特点: 1.所有的图片的宽度都是一样的 2.所有的图片的高度是不一样的 3.图片一张挨着一张竖直排列 4.鼠标向下滚动,一直不停的加载图片 5.浏览器的宽度改变,图片的列数会进行相应的更改 那么这种效果类似现实生活中的瀑布,所以我们叫它瀑布流的效果. Js原生瀑布流效果的实现 从上述分析中,我们可以把整个效果分为以下四个部分: html+css界面搭建 瀑布流效果 浏览器向下滚动

利用LruCache和DiskLruCache加载网络图片实现图片瀑布流效果(升级版)

MainActivity如下: package cc.patience7; import android.os.Bundle; import android.app.Activity; /** * Demo描述: * 采用瀑布流的形式加载大量网络图片 * 详细分析参见WaterfallScrollView * * 更新说明: * 在原本的的基础上添加了本地缓存DiskLruCache * * 所以在该示例中对于图片的缓存采用了:LruCache + DiskLruCache 的技术 * * 参考