android 瀑布流效果

最新推荐文章于 2024-12-19 23:45:21 发布

原创最新推荐文章于 2024-12-19 23:45:21 发布 · 489 阅读

0 ·

CC 4.0 BY-SA版权

移动开发专栏收录该内容

9 篇文章

订阅专栏

本文介绍了一种结合Android与jQuery的方案来实现瀑布流效果，有效解决大量图片加载导致的内存溢出问题。通过异步加载图片，实现了平滑的滚动体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

android 瀑布流效果

android加载图片最大的问题莫过于图片太多会报oom的错了，这其实是由于android本身的图片机制照成的，而瀑布流主要是用来加载大量的图片。从这一点上来说如果要想使用android本身的布局来实现瀑布流的效果，那么oom的问题无疑是最首要的问题了，那么你就要及时回收bitmap对象，但是这样会给用户带来不好的体验，那么如何绕过这个问题呢？这里有一个办法，使用的是android+jquery来组织图片形成瀑布流的效果，在滑动到底部的时候可以加载第二页，由于受到图片资源的影响，我只测试到第300张图片，丝毫没有卡顿的现象，图片详情查看采用了异步加载图片额方法，而且图片先从内存里去，取不到从sdcard去，还取不到则从网络下载并保存到sdcrad里。至于这种方法能否被接受，那就是仁者见仁智者见智的问题了，好了不多说了，先上图:

下面是html代码：

<!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

</head>

<body>

</ul>

</body>

</html>

js代码

var pageNo = 1;

$(window).scroll(

function() {

if ($(document).height() -$(this).scrollTop()

-$(this).height()< 10)

android.getList(pageNo++);

});

function fillDiv(imgtemp, nametemp) {

var $row, iHeight,iTempHeight;

var imgList = new Array(); // 定义一数组

imgList= imgtemp.split(","); // 字符分割

var nameList = new Array(); // 定义一数组

nameList= nametemp.split(","); // 字符分割

for ( var i = 0, l =imgList.length; i < l; i++) {

iHeight= -1;

$('#stage li').each(function() {

iTempHeight= Number($(this).height());

if (iHeight == -1 ||iHeight > iTempHeight) {

iHeight= iTempHeight;

$row= $(this);

}

});

varimg=android.getImagePath(imgList[i]);

$item= $(

"<div class='bg'><divclass='item'><img src='" + img

+"' border='0'onclick='android.showImage(\""+((pageNo-1)*20+i)+"\")' /><br /><divclass='text'>"

+nameList[i] + "</div></div><div>").hide();

$row.append($item);

$item.fadeIn();

}

android.dismiss();

}

activity代码

publicstaticfinalintID = Constants.SCHOOLVIEW_MAIN;

private WebView mWebView;

private PopupWindow popupWindow;

private ListView popupListView;

List<Map<String,String>> types;

private String type;

Buttonright;

TextViewtitle;

ArrayList<String>imageList= newArrayList<String>();

ArrayList<String>nameList= newArrayList<String>();

List<Image>tempList= newArrayList<Image>();

@Override

publicvoid onCreate(BundlesavedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.app_schoolview_main);

findView();

setTheme("校园风光");

setRightButton(R.drawable.button_share);

getList(1);

}

/**

* 初始化控件.

privatevoid findView() {

mWebView = (WebView)findViewById(R.id.detailview);

WebSettingswebSetting = mWebView.getSettings();

//设置js可用

webSetting.setJavaScriptEnabled(true);

webSetting.setBuiltInZoomControls(false);

webSetting.setLightTouchEnabled(true);

webSetting.setSupportZoom(false);

mWebView.setHapticFeedbackEnabled(false);

mWebView.addJavascriptInterface(this, "android");

//载入具体的web地址

mWebView.loadUrl("file:///android_asset/www/apps/demo/index.html");

mWebView.setVisibility(View.VISIBLE);

mWebView.requestFocus();

title = (TextView)findViewById(R.id.title);

right = (Button)findViewById(R.id.right);

right.setOnClickListener(new OnClickListener() {

publicvoid onClick(View v) {

if (!popupWindow.isShowing()) {

popupWindow.showAsDropDown(right, 0, 0);

}

});

}

/**

* 添加右上角弹出按钮，并定义点击

privatevoid initControls() {

if (types == null) {

types = SchoolSceneryManager.getImageTypeList();

}

LayoutInflaterinflater = LayoutInflater.from(this);

Viewview = inflater.inflate(R.layout.popupwindow_list, null);

SimpleAdapteradapter = newSimpleAdapter(this,types,R.layout.popupwindow_item, newString[] { "text"},

newint[] { R.id.item });

popupListView = (ListView)view.findViewById(R.id.listview);

popupListView.setAdapter(adapter);

popupListView.setOnItemClickListener(new OnItemClickListener() {

@Override

publicvoidonItemClick(AdapterView<?> arg0, View arg1, int arg2, long arg3) {

popupWindow.dismiss();

if (!types.get(arg2).get("id").equals(type)) {

type = types.get(arg2).get("id");

title.setText(types.get(arg2).get("text"));

imageList.clear();

nameList.clear();

mWebView.loadUrl("file:///android_asset/www/apps/demo/index.html");

getList(1);

}

});

//自适配长、框设置

popupWindow = new PopupWindow(view,LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);

popupWindow.setBackgroundDrawable(getResources().getDrawable(R.drawable.privacy_spinner_pop_bg));

popupWindow.setOutsideTouchable(true);

popupWindow.setAnimationStyle(android.R.style.Animation_Dialog);

popupWindow.update();

popupWindow.setTouchable(true);

popupWindow.setFocusable(true);

}

/**

* 获取分页数据.

* @param pageNo 页码

publicvoid getList(finalint pageNo) {

showProgressDialog(this);

new Thread(new Runnable() {

@Override

publicvoid run() {

tempList = SchoolSceneryManager.getImageList(type, pageNo);

for (Image image : tempList) {

imageList.add(image.getImage());

nameList.add(image.getName());

}

if (types == null) {

types = SchoolSceneryManager.getImageTypeList();

initControls();

}

handler.sendEmptyMessage(1);

}

}).start();

}

// 定义一个Handler，用来异步处理数据

Handlerhandler= newHandler() {

publicvoidhandleMessage(android.os.Message msg) {

StringimgList=SchoolSceneryManager.formatImage(tempList);

StringnameList=SchoolSceneryManager.formatName(tempList);

mWebView.loadUrl("javascript:fillDiv('"+ imgList + "','"+nameList+"')");

};

/**

* 关闭等待狂.

publicvoid dismiss(){

mProgressDialog.dismiss();

}

/**

* 打开图片浏览工具.

* @param index 初始化第几张选中

publicvoid showImage(String index){

showMessage(index);

Intentintent = newIntent();

intent.putExtra("index",index+"");

intent.putStringArrayListExtra("imageList",imageList);

intent.putStringArrayListExtra("nameList",nameList);

startActivity(intent,ShowImageActivity.ID, AnimUtil.ANIM_ZOOMIN_FADEOUT);

}

/**

* 获取图片.

* 从本地sdcard取图片，本地没有图片的话

* 从网络上把图片取下来，保存在sdcard上

* @param fileUrl 图片网络地址

* @return文件本地路径

public StringgetImagePath(String fileUrl) {

return ImageUtil.getImageSdcardPath(fileUrl);

}

下载地址：http://download.youkuaiyun.com/detail/chinawangw/4958353