Android---文本中缩略图点击弹出大图效果实现

简介:   很久没有写博客了,这两天一直忙于一个关于考试的项目,将其中的一些效果实现的经验写下来,希望给看到的人或者给有这方面需求的人帮助。  首先来张效果图,没有经过美工处理的 实现基本功能  其实做这个项目复习了很多内容,将之前单个项目中用到的某些功能综合到一起了,例如1、自定义标题栏2、Java和JavaScript的互调3、Activity实现仿Dialog样式4、多线程实现考试倒计时5、退出Activity时保存配置信息(考试剩余时间)6、熟悉UI布局  上面这些效果中,讲讲通过Java和JavaScript互调实现点击文本中缩略图弹出一个大图。

  很久没有写博客了,这两天一直忙于一个关于考试的项目,将其中的一些效果实现的经验写下来,希望给看到的人或者给有这方面需求的人帮助。

  首先来张效果图,没有经过美工处理的 实现基本功能

  其实做这个项目复习了很多内容,将之前单个项目中用到的某些功能综合到一起了,例如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这个类中定义的一个方法。

目录
相关文章
|
7月前
|
XML Android开发 数据格式
android点击FrameLayout、LinearLayout等父布局没响应的原因以及解决方案
android点击FrameLayout、LinearLayout等父布局没响应的原因以及解决方案
195 2
|
7月前
|
Java Android开发
Android Studio入门之按钮触控的解析及实战(附源码 超详细必看)(包括按钮控件、点击和长按事件、禁用与恢复按钮)
Android Studio入门之按钮触控的解析及实战(附源码 超详细必看)(包括按钮控件、点击和长按事件、禁用与恢复按钮)
768 0
|
7月前
|
XML 监控 Android开发
Android Studio App开发入门之文本输入EditText的讲解及使用(附源码 包括编辑框、焦点变更监听器、文本变化监听器 )
Android Studio App开发入门之文本输入EditText的讲解及使用(附源码 包括编辑框、焦点变更监听器、文本变化监听器 )
355 0
|
7月前
|
Android开发
Android Studio入门之图像显示解析及实战(附源码 超详细必看)(包括图像视图、图像按钮、同时展示文本与图像)
Android Studio入门之图像显示解析及实战(附源码 超详细必看)(包括图像视图、图像按钮、同时展示文本与图像)
297 1
|
4月前
|
Android开发
AutoX——当Android中clickable属性显示为false,实际可点击的布局如何处理
AutoX——当Android中clickable属性显示为false,实际可点击的布局如何处理
71 0
|
6月前
|
安全 JavaScript 前端开发
kotlin开发安卓app,JetPack Compose框架,给webview新增一个按钮,点击刷新网页
在Kotlin中开发Android应用,使用Jetpack Compose框架时,可以通过添加一个按钮到TopAppBar来实现WebView页面的刷新功能。按钮位于右上角,点击后调用`webViewState?.reload()`来刷新网页内容。以下是代码摘要:
|
6月前
|
XML Java Android开发
14. 【Android教程】文本输入框 EditText
14. 【Android教程】文本输入框 EditText
691 2
|
7月前
|
XML JSON Java
Android App开发即时通信中通过SocketIO在客户端与服务端间传输文本和图片的讲解及实战(超详细 附源码)
Android App开发即时通信中通过SocketIO在客户端与服务端间传输文本和图片的讲解及实战(超详细 附源码)
463 0
|
7月前
|
人工智能 测试技术 Android开发
Android实现点击链接跳转功能
Android实现点击链接跳转功能
147 1
|
7月前
|
XML Java Android开发
Android每点击一次按钮就添加一条数据
Android每点击一次按钮就添加一条数据
69 1