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">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type"content="text/html; charset=utf-8" />
<title>瀑布流</title>
<script type="text/javascript"language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<link type="text/css"rel="stylesheet" href="css/waterfall.css" />
<script type="text/javascript"language="javascript" src="js/waterfall.js"></script>
</head>
<body>
<ul id="stage">
<li></li>
<li></li>
<li></li>
</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'οnclick='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.csdn.net/detail/chinawangw/4958353
531
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
