功能描述:业务需要，使用webview加载一个页面，在页面上的图片一点击时，能进行放大缩小等操作，如果我就使用webview加载页面，加载前判断如果是图片地址，则将图片URL作为参数传到自定义界面，在android界面就可以随意搞那处图片了:
1 主界面MainActivity代码:
package com.example.webviewtest;
import java.util.ArrayList;
import android.content.Intent;
import android.os.Bundle;
import android.view.KeyEvent;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.ViewFlipper;
import com.example.webviewtest.utils.CLog;
import com.example.webviewtest.utils.Constant;
public class MainActivity extends BaseActivity {
private String TAG = "MainActivity";
/**
* flipper主要是为了显示加载中，加载失败的状态而加入的东西
*/
private ViewFlipper flipper;
/**
* 浏览器
*/
private WebView webview;
private String mainUrl = "http://hz-chenwenbiao-91.iteye.com/blog/2038887";
// private String mainUrl = "http://www.baidu.com";
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
this.setContentView(R.layout.activity_main);
initialViews();
}
@Override
public void initialViews() {
flipper = (ViewFlipper) findViewById(R.id.class_space_detail_view_flipper);
flipper.setDisplayedChild(0);
/**
* 加载网页内容
*/
webview = (WebView) findViewById(R.id.class_space_detail_webview);
// 设置WebView属性，能够执行Javascript脚本
webview.getSettings().setJavaScriptEnabled(true);
// 加载需要显示的网页
CLog.d(TAG , "URL =========>" + mainUrl);
webview.loadUrl(mainUrl);
// 设置Web视图
webview.setWebViewClient(new MyWebViewClient());
}
@Override
// 设置回退
// 覆盖Activity类的onKeyDown(int keyCoder,KeyEvent event)方法
public boolean onKeyDown(int keyCode, KeyEvent event) {
if (keyCode == KeyEvent.KEYCODE_BACK) {
if(webview.canGoBack()){
webview.goBack(); // goBack()表示返回WebView的上一页面
}
else {
finish();
}
return true;
}
return false;
}
// Web视图
private class MyWebViewClient extends WebViewClient {
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
CLog.d(TAG , "url ==========>" + url);
if(url.contains(".png")){//我们根据访问的URL的特征，如果是图片文件，就使用自己的界面来加载，使用类IOS查看图片效果的photoview开源主组实现的
//跳转到图片查看界面
Intent intent = new Intent(MainActivity.this , ViewImageActivity.class);
Bundle bundle = new Bundle();
ArrayList<String> imageList = new ArrayList<String>();
imageList.add(url);
bundle.putStringArrayList(Constant.TAG_CLASS_IMAGE_URL , imageList);
bundle.putInt(Constant.TAG_CLASS_IMAGE_INDEX , 0);
intent.putExtras(bundle);
startActivity(intent);
return true;
}
/**
* 使用webview方式加载页面
*/
view.loadUrl(url);
return true;
}
@Override
public void onPageFinished(WebView view, String url) {
super.onPageFinished(view, url);
flipper.setDisplayedChild(1);//完成显示网页内容
}
@Override
public void onReceivedError(WebView view, int errorCode,
String description, String failingUrl) {
super.onReceivedError(view, errorCode, description, failingUrl);
flipper.setDisplayedChild(2);//显示失败重新加载界面
}
}
}
2 主界面布局activity_main.xml:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<ViewFlipper
android:id="@+id/class_space_detail_view_flipper"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="@color/gray">
<!-- (0) ProgressBar -->
<LinearLayout
android:id="@+id/class_space_detail_loading_layout"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:gravity="center"
android:orientation="horizontal" >
<ProgressBar
android:id="@+id/class_space_detail_pb"
android:layout_width="42dp"
android:layout_height="42dp"
android:layout_marginRight="8dp"
android:indeterminateDrawable="@drawable/loading_rotate" >
</ProgressBar>
<TextView
android:id="@+id/ProgressTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/loading"
android:textColor="#000"
android:textSize="16sp" >
</TextView>
</LinearLayout>
<!-- (1) webview -->
<ScrollView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="@color/gray"
android:scrollbars="vertical" >
<WebView
android:id="@+id/class_space_detail_webview"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
/>
</ScrollView>
<!-- (2) Retry button -->
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:padding="5dp"
android:background="@drawable/get_data_failed" >
<ImageView
android:id="@+id/class_space_detail_retry_iv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:background="@drawable/selector_once_again" />
</RelativeLayout>
</ViewFlipper>
</RelativeLayout>
上面布局里加入了加载中，加载失败等状态的控件信息.
3 自定义图片查看器界面ViewImageActivity.java:
/*******************************************************************************
* Copyright 2011, 2012 Chris Banes.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*******************************************************************************/
package com.example.webviewtest;
import java.util.ArrayList;
import uk.co.senab.photoview.PhotoView;
import uk.co.senab.photoview.PhotoViewAttacher.OnPhotoTapListener;
import android.app.Activity;
import android.content.Context;
import android.graphics.Bitmap;
import android.os.Bundle;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.view.View;
import android.view.ViewGroup;
import android.view.ViewGroup.LayoutParams;
import android.widget.ProgressBar;
import android.widget.TextView;
import android.widget.Toast;
import com.example.webviewtest.utils.CLog;
import com.example.webviewtest.utils.Constant;
import com.example.webviewtest.utils.UniversalImageLoaderUtil;
import com.nostra13.universalimageloader.core.DisplayImageOptions;
import com.nostra13.universalimageloader.core.assist.ImageScaleType;
/**
*
* 查看问题图片(使用开源代码)
*
* @author chenwenbiao
* @date 2013-10-29 上午11:08:15
* @version V1.0
*/
public class ViewImageActivity extends Activity{
private static String TAG = "ViewImageActivity";
public Context mContext;
/**
* 多张图片查看器
*/
private ViewPager mViewPager;
/**
* 当前查看的是第几张图片
*/
private TextView mTextViewCurrentViewPosition;
/**
* 图片的路径列表
*/
private static ArrayList<String> imagePathList = null;
private static int currentViewPosition = 0;//当前浏览到哪一张图片
private static PhotoView[] photoViewList = null;//记录放进viewPager的photoview,方便进行旋转
private static int rotateRecord[] = null;//旋转角度记录
private static DisplayImageOptions options = null;
private static ProgressBar spinner = null;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.image_view);
mContext = this;
findViews();
loadData();
UniversalImageLoaderUtil.getInstance().setContext(this);//记得注册一下
}
private void loadData() {
Bundle bundle = getIntent().getExtras();
imagePathList = bundle.getStringArrayList(Constant.TAG_CLASS_IMAGE_URL);
if(imagePathList == null){//图片路径都没有,就算了
Toast.makeText(this, "image path list is null!", Toast.LENGTH_SHORT).show();
finish();
return;
}
options = new DisplayImageOptions.Builder()
.showStubImage(R.drawable.uni_img_loading_shape)
.showImageForEmptyUri(R.drawable.uni_img_loading_shape)
.showImageOnFail(R.drawable.uni_img_loading_shape)
.resetViewBeforeLoading(true)
.cacheOnDisc(true)
// .imageScaleType(ImageScaleType.EXACTLY)
.imageScaleType(ImageScaleType.IN_SAMPLE_POWER_OF_2)
.bitmapConfig(Bitmap.Config.RGB_565)
// .displayer(new FadeInBitmapDisplayer(300))
.build();
currentViewPosition = bundle.getInt(Constant.TAG_CLASS_IMAGE_INDEX);
mViewPager.setCurrentItem(currentViewPosition);//设置当前显示的pager
if(imagePathList.size() == 1){//只有一张图片的浏览情况
mTextViewCurrentViewPosition.setText("");
}
else {//多张图片的浏览情况
mTextViewCurrentViewPosition.setText((currentViewPosition+1)+"/"+imagePathList.size());
}
CLog.d(TAG, "current view position:" + currentViewPosition);
/**
* 初始化数组
*/
if(imagePathList != null && imagePathList.size() > 0){
photoViewList = new PhotoView[imagePathList.size()];
rotateRecord = new int[imagePathList.size()];
}
mViewPager.setAdapter(new SamplePagerAdapter());
}
public void findViews(){
mViewPager = (ViewPager) findViewById(R.id.image_view_vp);//使用开源的图片浏览实现方式
mTextViewCurrentViewPosition = (TextView) findViewById(R.id.image_which);
//删除图片
spinner = (ProgressBar) findViewById(R.id.loading);
/**
* 设置这个,那么viewPager会将页面缓存起来,这里要注意,当设置过大时,可能会出现内存溢出
*/
mViewPager.setOffscreenPageLimit(4);
/**
* 自己加一个页面变化的监听器，可以进页面的变化作相应的处理
*/
mViewPager.setOnPageChangeListener(new OnPageChangeListener() {
@Override
public void onPageSelected(int position) {//当前选择的是哪个图片
// TODO Auto-generated method stub
CLog.d(TAG, "currentViewPosition====>" + position);
/**
* 更新当前图片浏览的位置
*/
currentViewPosition = position;
mTextViewCurrentViewPosition.setText((currentViewPosition+1)+"/"+imagePathList.size());
}
@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
// TODO Auto-generated method stub
// Log.d(TAG, "2");
}
@Override
public void onPageScrollStateChanged(int arg0) {
// TODO Auto-generated method stub
CLog.d(TAG, "3====>" + arg0);
}
});
};
private class SamplePagerAdapter extends PagerAdapter {
@Override
public int getCount() {
if(imagePathList == null){
return 0;
}
return imagePathList.size();
}
@Override
public View instantiateItem(ViewGroup container, int position) {
PhotoView photoView = new PhotoView(container.getContext());
CLog.d(TAG, "picture path:" + imagePathList.get(currentViewPosition) + "\tposition:" + position);
UniversalImageLoaderUtil.getInstance().display(imagePathList.get(position), photoView, options, spinner, null);
photoView.setOnPhotoTapListener(new OnPhotoTapListener() {
@Override
public void onPhotoTap(View arg0, float arg1, float arg2) {
((Activity)mContext).finish();
}
});
container.addView(photoView, LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT);
return photoView;
}
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView((View) object);
}
@Override
public boolean isViewFromObject(View view, Object object) {
return view == object;
}
}
}
4 自定义图片查看器布局image_view.xml:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<com.example.webviewtest.view.HackyViewPager
android:id="@+id/image_view_vp"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center_vertical" >
</com.example.webviewtest.view.HackyViewPager>
<ProgressBar
android:id="@+id/loading"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_gravity="center"
android:visibility="gone" />
<TextView
android:id="@+id/image_which"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:gravity="center_horizontal"
android:paddingBottom="10dip"
android:text="1/3" />
</RelativeLayout>
效果图:
1加载中:
2 加载完，显示网页内容，内容为我一个博文http://hz-chenwenbiao-91.iteye.com/blog/2038887:
3 点击网页图片，android界面显示图片:
附件是源码.点击下载
相关推荐
本文将深入探讨如何构建一个通用的WebView，包括自定义错误页面、缓存数据以及支持离线浏览的功能。 一、自定义错误页面 在使用WebView加载网页时，可能会遇到网络错误、404找不到页面等问题。默认情况下，WebView...
6. **图片资源**：项目中的图片文件可能用于界面设计，比如网页的背景图，或者是教程中的步骤截图，帮助理解WebView的使用。 7. **Eclipse项目结构**：`.classpath`和`.project`文件是Eclipse项目的元数据，它们...
总之，"Android中Webview与原生界面交互及二维码扫描功能实现"项目涵盖了Android开发中的关键技术点，包括WebView的使用、JavaScript与原生代码的交互，以及二维码扫描功能的集成。通过学习和实践这个项目，开发者...
本文将深入探讨WebView的重载使用及自定义网址处理的实践方法。 首先，WebView的基本使用包括初始化、加载网页以及设置基本属性。在AndroidManifest.xml中，我们需要在对应的Activity中添加Internet权限： ```xml ...
`安卓Andriod源码——webview重载使用&自定义网址.zip`这个压缩包文件显然是一个关于如何自定义和优化WebView使用的示例项目。下面我们将深入探讨其中涉及的关键知识点。 1. **WebView组件**： WebView是Android ...
这个压缩包“Android应用源码之webview重载使用&自定义网址”提供了一些关于如何高效且自定义地使用WebView的示例代码。让我们详细探讨一下这个主题。 1. **WebView的基本使用**： - WebView是Android SDK中的一个...
uni-app自定义弹窗组件，支持自定义图片，文本、按钮等功能。
在iOS开发中，Webview是用于展示网页内容的重要组件，而如何处理网页中的视频播放，尤其是实现内联播放，是一个常见的需求。内联播放意味着视频将在网页内容中直接播放，而不是弹出全屏播放器。通常，我们可以通过...
在Android开发中，WebView是一个非常重要的组件，它允许我们在应用程序内部加载和显示网页内容，而无需离开应用。...在这个场景中，我们要...通过深入研究和实践，你可以创建一个功能完善的WebView图片查看和下载应用。
然而，在实际使用中，由于网络问题、页面不存在或编码错误等原因，WebView可能会加载失败。这时，我们需要对这些错误进行妥善处理，为用户提供友好的体验。本文将详细介绍如何在WebView加载失败时，自定义错误页面。...
随着HTML5技术的发展，WebView的使用愈发广泛，许多App都采用混合开发模式，利用WebView加载本地或远程的HTML资源，以实现丰富的用户界面和动态功能。 首先，我们来了解一下WebView的基本用法。在AndroidManifest....
其中，`JavaScriptInterface`是一个自定义类，继承自`Object`，并在其中定义`onLogin()`方法： ```java public class JavaScriptInterface { private Context context; JavaScriptInterface(Context context) { ...
- 设置自定义的UserAgent：`webView.getSettings().setUserAgentString("自定义的UserAgent")`。 - 允许加载本地存储的内容：`webView.getSettings().setAllowFileAccess(true)`。 - 安全性：考虑启用Mixed ...
在Android开发中，WebView是一个非常重要的组件，它允许我们在应用程序中内嵌网页内容。这篇教程将详细介绍如何在WebView中加载HTML，并引用本地的资源，如图片和字体库。 首先，让我们理解WebView的基本用法。在...
使用3D WebView插件，开发者可以自定义WebView的行为，例如设置网页加载的URL、控制页面的缩放、启用或禁用JavaScript执行，甚至可以通过Unity C#脚本与JavaScript进行通信，实现数据交换和用户界面的交互。...
这篇博客和对应的`WebViewDemo`示例代码着重讲解了如何在Android应用中使用WebView与原生界面进行交互，以及如何集成二维码扫描功能。以下是关于这两个主题的详细解释： ### 一、Android WebView的使用 1. **基本...
"在webView界面的ActionBar中显示加载进度"这个主题就是关于如何将WebView的加载进度实时展示在应用的Action Bar（在Android KitKat及以上版本称为ToolBar）上，为用户提供更好的交互体验。 首先，我们需要创建一个...
7. **自定义界面**：根据需求，可以通过CSS和JavaScript对PDF预览界面进行二次开发，比如更改主题颜色、调整字体大小等。 8. **处理错误**：别忘了处理可能的加载错误，如网络问题、PDF加载失败等，可以通过重写...