|
【济南中心】Android课程同步笔记智慧北京:Day06（下）
网页详情 引言分类新闻完成以后，接下来，我们处理每个条目的点击事件， 并进入新闻详情页，通过WebView加载显示新闻详情页。 实现步骤第一步：给每个条目设置点击事件在【NewsAdapter.java】文件中的onBindViewHolder方法中，给条目添加点击事件的逻辑 [Java] 纯文本查看 复制代码 @Override[/align]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[i].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本地代码的实现 | 
收藏
淘帖
踩
