[源地址]http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2014/0919/1696.html

之前我们介绍过一个开源的瀑布流控件StaggeredGridView ，但是真正使用过后才发现有一个致命的缺陷，那就是在显示数目较多的图片时，上滑有时会很困难。但是今天介绍的瀑布流控件PinterestLikeAdapterView则没有这样的问题。

项目地址：https://github.com/GDG-Korea/PinterestLikeAdapterView

使用方法类似于ListView下面是我使用该控件实现一个显示系统图片的简单应用：

xml中：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<?xml version="1.0" encoding="utf-8"?>
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#000000"
     >
    <com.huewu.pla.lib.MultiColumnListView
        xmlns:pla="http://schemas.android.com/apk/res-auto"
        android:background="#000000"
        android:id="@+id/list"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        pla:plaColumnNumber="3"
        pla:plaLandscapeColumnNumber="3"
        >
    </com.huewu.pla.lib.MultiColumnListView>
</merge>

plaColumnNumber表示显示多少列，plaLandscapeColumnNumber表示横屏下显示多少列。

但与StaggeredGridView 不同的是他没有提供设置item之间间隙大小的属性，这个可以通过在item的xml中设置一个padding来解决。

主界面代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
package com.huewu.pla.sample;
import android.annotation.SuppressLint;
import android.app.Activity;
import android.content.Context;
import android.content.Intent;
import android.database.Cursor;
import android.net.Uri;
import android.os.Bundle;
import android.provider.MediaStore.Images;
import android.view.Menu;
import com.huewu.pla.R;
import com.huewu.pla.lib.MultiColumnListView;
import java.util.ArrayList;
public class SampleActivity extends Activity {
    private MultiColumnListView mAdapterView = null;
    private ArrayList<String> imageUrls;
    private ImageGridAdapter adapter;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.sample_act);
        //mAdapterView = (PLA_AdapterView<Adapter>) findViewById(R.id.list);
        mAdapterView = (MultiColumnListView) findViewById(R.id.list);
        imageUrls = new ArrayList<String>();
        adapter = new ImageGridAdapter(this, imageUrls);
        mAdapterView.setAdapter(adapter);
        queryMediaImages();
    }
    public void queryMediaImages() {
        Cursor c = getContentResolver().query( Images.Media.EXTERNAL_CONTENT_URI, null, null, null, null );
        if ( c != null ) {
            if (c.moveToFirst()) {       
                   do {    
                        long id = c.getLong( c.getColumnIndex( Images.Media._ID ) );
                        Uri imageUri = Uri.parse( Images.Media.EXTERNAL_CONTENT_URI + "/" + id );
                        imageUrls.add(imageUri.toString());
                        //imageUrls.add(getRealFilePath(MainActivity.this, imageUri));
                  } while (c.moveToNext());    
               }
        }
        c.close();
        c = null;
        adapter.notifyDataSetChanged();
    }
}//end of class

其中queryMediaImages为查找系统中图片的方法。ImageGridAdapter代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
package com.huewu.pla.sample;
import java.util.ArrayList;
import com.example.staggeredgridviewdemo.views.ScaleImageView;
import com.huewu.pla.R;
import com.jcodecraeer.imageloader.ImageLoader;
import android.content.Context;
import android.util.DisplayMetrics;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.view.ViewGroup.LayoutParams;
import android.view.WindowManager;
import android.widget.AbsListView;
import android.widget.AbsListView.OnScrollListener;
import android.widget.BaseAdapter;
import android.widget.GridView;
import android.widget.ImageView;
public class ImageGridAdapter extends BaseAdapter{
    private static final String TAG = "ImageGridAdapter";
    private static final boolean DEBUG = true;
    private ImageLoader mLoader;
    private ArrayList<String> mImageList;
    private LayoutInflater mLayoutInflater;
    public ImageGridAdapter(Context context,
            ArrayList<String> list) {
        mLoader = new ImageLoader(context);
        mLoader.setIsUseMediaStoreThumbnails(false);
        mImageList = list;
        WindowManager wm = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE);
        int width = wm.getDefaultDisplay().getWidth();//屏幕宽度
        mLoader.setRequiredSize(width / 3); //3表示列数
        mLayoutInflater = LayoutInflater.from(context);
                                                                                                                                                                                                                                                                                                                                                                                                                                    
                                                                                                                                                                                                                                                                                                                                                                                                                                
    }
                                                                                                                                                                                                                                                                                                                                                                                                                                   
    public int getCount() {
        return mImageList.size();
    }
    public Object getItem(int arg0) {
        return null;
    }
    public long getItemId(int arg0) {
        return 0;
    }
                                                                                                                                                                                                                                                                                                                                                                                                                                   
    @Override
    public View getView(final int position, View convertView, ViewGroup parent) {
        if (DEBUG)
            Log.i(TAG, "position = " + position);
        ViewHolder holder = null;
        if (convertView == null) {
            convertView = mLayoutInflater.inflate(R.layout.item_image,
                    null);
            holder = new ViewHolder();
            holder.imageView = (ScaleImageView) convertView .findViewById(R.id.imageView);
            convertView.setTag(holder);
        }
        holder = (ViewHolder) convertView.getTag();
        mLoader.DisplayImage(mImageList.get(position), holder.imageView);
        return convertView;
    }
                                                                                                                                                                                                                                                                                                                                                                                                                                
    static class ViewHolder {
        ScaleImageView imageView;
    }
}

其中ImageLoader为我自己写的一个异步加载图片的库，而ViewHolder里面ScaleImageView是StaggeredGridView项目的例子程序中找到的一个ImageView 子类，一般要实现图片的交错效果需要这个控件来显示图片才行。

item_image的xml代码如下

1
2
3
4
5
6
7
8
9
10
11
12
13
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:padding="1dip"
>
    <com.example.staggeredgridviewdemo.views.ScaleImageView
        android:id="@+id/imageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:scaleType="fitXY"
        android:src="@null" />
</LinearLayout>

效果图：

源码下载：http://download.csdn.net/detail/jianghejie123/7945613

另外官方也有demo演示，不过他只是用TextView来实现了Pinterest的交错效果，这相比图片来说要简单的多，因为TextView只需设置不同长度的字符串就能得到不同高度的Item了。

我给的例子只是实现了Pinterest的交错效果，其实瀑布流往往是有上拉加载更多的功能的，这里有一个带有次功能的源码：http://download.csdn.net/detail/xiangxue336/7059861

【转】android中最好的瀑布流控件PinterestLikeAdapterView的更多相关文章

  1. [转]android中最好的瀑布流控件PinterestLikeAdapterView

    PinterestLikeAdapterView 项目地址:https://github.com/GDG-Korea/PinterestLikeAdapterView 使用方法类似于ListView下 ...

  2. Android 高级UI设计笔记10：瀑布流控件PinterestLikeAdapterView的使用

    1. 首先我们看看瀑布流的效果,如下: 2. 今天要介绍的瀑布流控件是:PinterestLikeAdapterView 项目地址:https://github.com/GDG-Korea/Pinte ...

  3. Android中EditText，Button等控件的设置

    EditText可以使用:TextView.setEnabled(true)来设置为可编辑,其实很简单,写在这里以便以后自己查看. Button设置可用性:setVisibility(View.VIS ...

  4. android中与Adapter相关的控件----ListView

    ListView讲解: 一.ListView这个控件是一个使用非常广泛的控件,值得深入的学习和研究.基本使用已经在Adapter中使用过了 二.常用的属性和方法 footerDividersEnabl ...

  5. android中与Adapter相关的控件----GridView

    GridView(网格视图)讲解 一.GridView(网格视图)这个是控件也是比较多,和listView的很多地方都是一样的,但是GridView可以显示多列,而listView只能显示一列,个人觉 ...

  6. android中与Adapter相关的控件----ViewFlipper

    ViewFlipper(翻转视图) 一.ViewFlipper是一个多页面管理的控件,与ViewPager不同,ViewPager的是一页一页的的,而ViewFlipper则是一层一层的.图片轮播或者 ...

  7. 解决Android中,禁止ScrollView内的控件改变之后自动滚动 - 转

    问题: 最近在写一个程序界面,有一个scrollVIew,其中有一段内容是需要在线加载的. 当内容加载完成后,ScrollView中内容的长度会发生改变,这时ScrollView会自动下滚,如下图所示 ...

  8. android中与Adapter相关的控件----Spinner&AutoCompleteTextView

    Spinner(列表选项框) & AutoCompleteTextView(自动完成文本框) 一.列表选项框核心属性 android:dropDownHorizontalOffset设置列表框 ...

  9. 解决Android中,禁止ScrollView内的控件改变之后自动滚动

    <ScrollView android:id="@+id/scrollView1" android:layout_width="fill_parent" ...

随机推荐

  1. HTML5小游戏【是男人就下一百层】UI美化版

    之前写的小游戏,要么就比较简单,要么就是比较难看,或者人物本身是不会动的. 结合了其它人的经验,研究了一下精灵运动,就写一个简单的小游戏来试一下. 介绍一下几个主要的类: Frame:帧的定义,主要描 ...

  2. js实现快速排序（in-place）简述

    快速排序,又称划分交换排序.以分治法为策略实现的快速排序算法. 本文主要要谈的是利用javascript实现in-place思想的快速排序 分治法: 在计算机科学中,分治法是建基于多项分支递归的一种很 ...

  3. 解决：jquery-1.11.1.min.js红叉问题

    工程中导入jquery-1.11.1.min.js,工程正常运行.但是jquery-1.11.1.min.js一直显示红叉. 解决方法如下: 红叉的原因是:myeclipse没有去验证它! 选中js文 ...

  4. <select>在chrome浏览器下背景透明问题

    在上篇文章<只用CSS美化选择框>运用了背景透明的技巧来美化选择框,但在chrome浏览器下遇到了跟ie.ff不一样的透明效果,下面重现一下: 在一个大的div(背景红色)内放置一个sel ...

  5. Linux磁盘分区与格式化

    磁盘分区格式说明 linux分区不同于windows linux下分区标示: 例如:hda1 hd这两个字母表示分区所在的设备类型,hd标示IDE类型硬盘,sd表示SCSI类型硬盘 第三字母a标示硬盘 ...

  6. 2016.6.20 计算机网络复习要点第三章之CSMA/CD协议

    1.最早的以太网是将许多计算机都连接到一根总线上: (1)总线的特点是:当一台计算机发送数据时,总线上的所有计算机都检测到这个数据,这种就是广播通信方式: (2)为了实现在总线上的一对一通信,可以使每 ...

  7. 简单几何(向量旋转+凸包+多边形面积) UVA 10652 Board Wrapping

    题目传送门 题意:告诉若干个矩形的信息,问他们在凸多边形中所占的面积比例 分析:训练指南P272,矩形面积长*宽,只要计算出所有的点,用凸包后再求多边形面积.已知矩形的中心,向量在原点参考点再旋转,角 ...

  8. HDU3037 Saving Beans（Lucas定理+乘法逆元）

    题目大概问小于等于m个的物品放到n个地方有几种方法. 即解这个n元一次方程的非负整数解的个数$x_1+x_2+x_3+\dots+x_n=y$,其中0<=y<=m. 这个方程的非负整数解个 ...

  9. it's hard to say

    Ew,it's hard to begin.In fact I don't know what to say either.So here is a sad story.First of all ,m ...

  10. 【BZOJ】1901: Zju2112 Dynamic Rankings（区间第k小+树状数组套主席树）

    http://www.lydsy.com/JudgeOnline/problem.php?id=1901 首先还是吐槽时间,我在zoj交无限tle啊!!!!!!!!我一直以为是程序错了啊啊啊啊啊啊. ...