Android實現文本中縮略圖點擊彈出大圖效果

加好友 · 發表於 2011-6-25 11:40

馬上加入Android 台灣中文網，立即免費下載應用遊戲。

您需要登錄才可以下載或查看，沒有帳號？註冊

x

首先來張效果圖，沒有經過美工處理的實現基本功能

登錄/註冊後可看大圖

a1.png (44.89 KB, 下載次數: 3)

下載附件保存到相冊

2011-6-25 11:40 上傳

其實做這個項目複習了很多內容，將之前單個項目中用到的某些功能綜合到一起了，例如1、自定義標題欄2、Java和JavaScript的互調3、 Activity實現仿Dialog樣式4、多線程實現考試倒計時5、退出Activity時保存配置信息（考試剩餘時間）6、熟悉UI佈局

上面這些效果中，講講通過Java和JavaScript互調實現點擊文本中縮略圖彈出一個大圖。

最開始想實現這種效果的時候就想到了TextView控件，因為TextView通過Html這個類可以在文本中插入圖片。但是有個問題困擾著我，一個文本中的圖片個數是不確定的，我怎樣在一個TextView中添加多個圖片（這個好解，通過TextView的append方法可以拼接任意張，因為這裡的縮略圖都是相同的，但這卻無法定位我點擊了那個縮略圖，應該彈出那個大圖）。最後實在沒辦法，我想到了WebView這個控件，通過它加載一個本地 html頁面，在其中通過給<image />對像添加onclick事件，傳遞一個imgSrc參數給Java方法，透過Java方法打開一個Activity來顯示圖片，ok,整個要實現的效果就完成了。So Easy，雖然最後實現這個效果沒多少代碼，但是從TextView這個控件一路走來到WebView,也耗費了將近一天的功夫，但是這個過程卻非常值得享受，喔，我又懂得了更多。

下面通過代碼一步一步來解析：首先是準備asset中的本地html文件。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body onload="window.JsUseJave.onLoad()">
Write a recount for your newsletter using the notes given _____
<a onClick='setIv("/sdcard/IMG001.png")' > <img id="ig"/></a>
<script language="javascript">
function load(src){
document.getElementById('ig').src=src;
}
function setIv(src){
window.JsUseJave.setImgSrc(src)
}
</script>
</body>
</html>

複製代碼

1、最開始的時候是想在進入Activity的時候就自動加載圖片

wv.loadUrl("javascript:load('"+imgSrc+"'");

複製代碼

，但是發現一個問題在body的onload()中直接調用js:load(src)方法並沒有執行。沒辦法只能用通過點擊按鈕給圖片加載資源。後來突然想到可以JavaScript和Java互調，就把這一步添加到JavaScriptInterface類中，這個類要自己定義

final class JsUseJaveInterface{
public void setImgSrc(String imgSrc){
Intent intent =new Intent(E6.this,ImageShow.class);
Bundle bundle=new Bundle();
bundle.putString("imgSrc", imgSrc);
intent.putExtras(bundle);
startActivity(intent);
}
//登錄加載圖片
public void onLoad(){
wv.loadUrl("javascript:load('"+src+"')");
}
}

複製代碼

設置JavaScript可調用Java

wv.addJavascriptInterface(new JsUseJaveInterface(), "JsUseJave");

複製代碼

在html文件body的onload事件中通過java轉一步調用javascript方法中的load(src)事件。這樣就能在加載Activity的時候將縮略圖同時顯示出來了。

2、有了前面的經驗，點擊縮略圖彈出大圖就好實現了。給<image/>添加點擊事件間接的去調用Java中的一個方法重新打開一個Activity顯示大圖，就是上面的自定義的JsUseJavaInteface中的setImgSrc()方法。

**js調用Java中方法：window.JsUseJave.onLoad()，JsUseJave是wv.addJavascriptInterface(new JsUseJaveInterface(), "JsUseJave");中的別名，onLoad()則是JsUseJaveInterface這個類中定義的一個方法。

加好友 · 發表於 2011-6-25 16:12

感謝分享

加好友 · 發表於 2011-9-7 13:22

真的需要它。谢谢

[資料] Android實現文本中縮略圖點擊彈出大圖效果

馬上加入Android 台灣中文網，立即免費下載應用遊戲。

瀏覽過的版塊

警告：您的Adblck已啟用