网页详情
引言分类新闻完成以后，接下来，我们处理每个条目的点击事件，
并进入新闻详情页，通过WebView加载显示新闻详情页。
实现步骤第一步：给每个条目设置点击事件在【NewsAdapter.java】文件中的onBindViewHolder方法中，给条目添加点击事件的逻辑
[Java] 纯文本查看 复制代码
@Override
public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {
final ResuleBean.NewsData newsData = newsDataList.get(position);
if (newsData.imgs.size() == 3) {//显示三张图片
ViewHolder1 viewHolder1 = (ViewHolder1) holder;
viewHolder1.tvTitle.setText(newsData.title);
Picasso.with(context).load(newsData.imgs.get(0)).into(viewHolder1.iv1);
Picasso.with(context).load(newsData.imgs.get(1)).into(viewHolder1.iv2);
Picasso.with(context).load(newsData.imgs.get(2)).into(viewHolder1.iv3);
//条目的点击事件
holder.itemView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Intent intent = new Intent(context,NewsDetailActivity.class);
//传递的数据为url地址
intent.putExtra("url",newsData.weburl);
//作为一个新的任务栈开启activity
intent.setFlags(Intent.FLAG_ACTIVITY_NEW_TASK);
context.startActivity(intent);
}
});
} else if (newsData.imgs.size() == 0) {//显示文字
ViewHolder2 viewHolder2 = (ViewHolder2) holder;
viewHolder2.tvTitle.setText(newsData.title);
} else if (newsData.imgs.size() == 1) {//显示一张图片和文字
ViewHolder3 viewHolder3 = (ViewHolder3) holder;
viewHolder3.tvTitle.setText(newsData.title);
Picasso.with(context).load(newsData.imgs.get(0)).into(viewHolder3.iv1);
}
}
第二步：新闻详情页实现创建【NewsDetailActivity.java】文件
创建布局activity_news_detail.xml
[XML] 纯文本查看 复制代码
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<WebView
android:id="@+id/webView"
android:layout_width="match_parent"
android:layout_height="match_parent"></WebView>
</LinearLayout>
初始化WebView并加载新闻详情
[Java] 纯文本查看 复制代码
public class NewsDetailActivity extends Activity {
@BindView(R.id.webView)
WebView webView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_news_detail);
ButterKnife.bind(this);
//初始化WebView
webView.setWebViewClient(new WebViewClient());
webView.setWebChromeClient(new WebChromeClient());
webView.getSettings().setJavaScriptEnabled(true);
String url = getIntent().getStringExtra("url");
//加载网页
webView.loadUrl(url);
//传递对象给webview
webView.addJavascriptInterface(new JsCallJava() {
@JavascriptInterface
@Override
public void openImage(String src) {
Intent intent = new Intent(getApplicationContext(),ShowActivity.class);
intent.putExtra("url",src);
startActivity(intent);
}
},"imagelistner");
}
public interface JsCallJava{
public void openImage(String src);
}
}
给网页图片添加点击事件、图片双击放大引言进入新闻详情页以后，
但是，有时候，有这样的需求，当我点击网页中的图片时，跳转到新的activity的，查看大图。
并能给图片进行放大和缩小这样的功能。
实现这样的功能涉及两个技能要点：
点击网页中的图片时，跳转到新的activity：
js与android相互调用来实现
java调用js：给网页中每个图片添加点击事件
js调用java：点击网页中图片，调用android中方法，打开activity
查看大图：
可以使用开源框架photoView来实现
photoView：
它是开源的框架，该控件对图片显示进行扩展，能够很方便的实现缩放的效果
实现步骤：第一步：网页加载完成，手动给图片添加点击事件由于网页本身并没有对图片设置点击事件，因此，这里我们要动态给每个img标签添加点击事件
[Java] 纯文本查看 复制代码
//初始化WebView
webView.setWebViewClient(new WebViewClient(){
//页面加载完成
@Override
public void onPageFinished(WebView view, String url) {
super.onPageFinished(view, url);
//给网页里面的img标签去添加点击事件
addPictureClick();
}
});
给每个img标签添加点击事件
Android 调用js代码，给每个img标签添加点击事件
[Java] 纯文本查看 复制代码
private void addPictureClick() {
//android调用js代码
webView.loadUrl("javascript:(function(){"
+ "var objs = document.getElementsByTagName(\"img\"); "
+ "for(var i=0;i<objs.length;i++) " + "{"
+ " objs.onclick=function() " + " " + " { "
+ " window.imagelistner.openImage(this.src); "
+ " } " + "}" + "})()");
}
第二步：js调用android本地方法，打开新的Activity查看大图当点击图片时，调用android 本地方法，打开新的activity
[Java] 纯文本查看 复制代码
//传递对象给webview
webView.addJavascriptInterface(new JsCallJava() {
@JavascriptInterface
@Override
public void openImage(String src) {
Intent intent = new Intent(getApplicationContext(),ShowActivity.class);
intent.putExtra("url",src);
startActivity(intent);
}
},"imagelistner");
//创建接口对象
public interface JsCallJava{
public void openImage(String src);
}
第三步：查看大图实现初始化ShowActivity的布局文件
布局结构实现：
[XML] 纯文本查看 复制代码
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<uk.co.senab.photoview.PhotoView
android:id="@+id/photoView"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
注意：布局中加载图片的控件是photoView，该控件对图片显示进行扩展
能够很方便的实现缩放的效果。
要使用该控件，需要在moudle中添加相关依赖：phoneView.jar的依赖
ShowActivity的实现
[Java] 纯文本查看 复制代码
public class ShowActivity extends Activity {
@BindView(R.id.photoView)
PhotoView photoView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_show);
ButterKnife.bind(this);
String url = getIntent().getStringExtra("url");
Toast.makeText(this,url,Toast.LENGTH_SHORT).show();
//显示图片
Picasso.with(this).load(url).into(photoView);
}
}
问题
问题1：如何在android本地中给网页中的图片添加点击事件？
l Android调用js代码来实现：
l 声明js函数
l 变量网页中每个img标签
l 给每个img标签添加onClick事件
l 在onClick方法中声明调用android本地代码的实现
