android 项目学习随笔十四（WebView）

1、布局文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <include layout="@layout/title_bar" />

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent" >

        <WebView
            android:id="@+id/wv_webview"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />

        <ProgressBar
            android:id="@+id/pb_loading"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center" />
    </FrameLayout>

</LinearLayout>

<?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:background="@drawable/title_red_bg" >

    <TextView
        android:id="@+id/tv_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:textColor="#fff"
        android:textSize="22sp" />

    <ImageButton
        android:id="@+id/btn_menu"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_marginLeft="10dp"
        android:background="@null"
        android:src="@drawable/img_menu" />

    <ImageButton
        android:id="@+id/btn_back"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_marginLeft="10dp"
        android:background="@null"
        android:src="@drawable/back"
        android:visibility="gone" />

    <LinearLayout
        android:id="@+id/ll_controller"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:layout_marginRight="10dp"
        android:gravity="center"
        android:orientation="horizontal"
        android:visibility="gone" >

        <ImageButton
            android:id="@+id/btn_textsize"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginRight="10dp"
            android:background="@null"
            android:src="@drawable/icon_textsize" />

        <ImageButton
            android:id="@+id/btn_share"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@null"
            android:src="@drawable/icon_share" />
    </LinearLayout>

    <ImageButton
        android:id="@+id/btn_display"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:layout_marginRight="10dp"
        android:background="@null"
        android:src="@drawable/icon_pic_grid_type"
        android:visibility="gone" />

</RelativeLayout>

2、页面实现

import android.app.Activity;
import android.app.AlertDialog;
import android.content.DialogInterface;
import android.graphics.Bitmap;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.Window;
import android.webkit.WebChromeClient;
import android.webkit.WebSettings;
import android.webkit.WebSettings.TextSize;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.ImageButton;
import android.widget.LinearLayout;
import android.widget.ProgressBar;
import cn.sharesdk.framework.ShareSDK;
import cn.sharesdk.onekeyshare.OnekeyShare;
import cn.sharesdk.onekeyshare.OnekeyShareTheme;

import com.lidroid.xutils.ViewUtils;
import com.lidroid.xutils.view.annotation.ViewInject;

/**
 * 新闻详情页面
 * 
 */
public class NewsDetailActivity extends Activity implements OnClickListener {

    @ViewInject(R.id.ll_controller)
    private LinearLayout llController;
    @ViewInject(R.id.btn_back)
    private ImageButton btnBack;
    @ViewInject(R.id.btn_menu)
    private ImageButton btnMenu;
    @ViewInject(R.id.btn_textsize)
    private ImageButton btnTextSize;
    @ViewInject(R.id.btn_share)
    private ImageButton btnShare;
    @ViewInject(R.id.wv_webview)
    private WebView mWebView;
    @ViewInject(R.id.pb_loading)
    private ProgressBar pbLoading;
    private String mUrl;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.activity_news_detail);
        ViewUtils.inject(this);

        btnBack.setVisibility(View.VISIBLE);
        btnMenu.setVisibility(View.GONE);
        llController.setVisibility(View.VISIBLE);

        btnBack.setOnClickListener(this);
        btnTextSize.setOnClickListener(this);
        btnShare.setOnClickListener(this);

        mUrl = getIntent().getStringExtra("url");

        // 加载网页
        mWebView.loadUrl(mUrl);

        WebSettings settings = mWebView.getSettings();
        settings.setBuiltInZoomControls(true);// 显示放大缩小按钮
        settings.setUseWideViewPort(true);// 只是双击缩放
        settings.setJavaScriptEnabled(true);// 打开js功能

        mWebView.setWebViewClient(new WebViewClient() {
            // 网页开始加载
            @Override
            public void onPageStarted(WebView view, String url, Bitmap favicon) {
                super.onPageStarted(view, url, favicon);
                System.out.println("网页开始加载");
                pbLoading.setVisibility(View.VISIBLE);
            }

            // 网页跳转
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                // <a href="tel:110">联系我们</a>
                // PhoneGap(js和本地代码互动)
                System.out.println("网页跳转:" + url);
                view.loadUrl(url);// 强制在当前页面加载网页, 不用跳浏览器
                return true;
            }

            // 网页加载结束
            @Override
            public void onPageFinished(WebView view, String url) {
                super.onPageFinished(view, url);
                System.out.println("网页加载结束");
                pbLoading.setVisibility(View.GONE);
            }
        });

        mWebView.setWebChromeClient(new WebChromeClient() {

            // 加载进度回调
            @Override
            public void onProgressChanged(WebView view, int newProgress) {
                super.onProgressChanged(view, newProgress);
                System.out.println("newProgress:" + newProgress);
            }

            // 网页标题
            @Override
            public void onReceivedTitle(WebView view, String title) {
                super.onReceivedTitle(view, title);
                System.out.println("title:" + title);
            }

        });

    }

    @Override
    public void onClick(View v) {
        switch (v.getId()) {
        case R.id.btn_back:
            finish();
            break;
        case R.id.btn_textsize:
            showChooseDialog();
            break;
        case R.id.btn_share:
            showShare();
            break;

        default:
            break;
        }
    }

    // 点击确定前, 用户选择的字体大小的位置
    private int mChooseItem;
    // 当前的字体位置
    private int mSelectItem = 2;

    /**
     * 选择字体大小的弹窗
     */
    private void showChooseDialog() {
        AlertDialog.Builder builder = new AlertDialog.Builder(this);
        builder.setTitle("字体设置");
        String[] items = new String[] { "超大号字体", "大号字体", "正常字体", "小号字体",
                "超小号字体" };
        builder.setSingleChoiceItems(items, mSelectItem,
                new DialogInterface.OnClickListener() {

                    @Override
                    public void onClick(DialogInterface dialog, int which) {
                        mChooseItem = which;
                    }
                });

        builder.setPositiveButton("确定", new DialogInterface.OnClickListener() {

            @Override
            public void onClick(DialogInterface dialog, int which) {

                WebSettings settings = mWebView.getSettings();

                switch (mChooseItem) {
                case 0:
                    settings.setTextSize(TextSize.LARGEST);
                    break;
                case 1:
                    settings.setTextSize(TextSize.LARGER);
                    break;
                case 2:
                    settings.setTextSize(TextSize.NORMAL);
                    break;
                case 3:
                    settings.setTextSize(TextSize.SMALLER);
                    break;
                case 4:
                    settings.setTextSize(TextSize.SMALLEST);
                    break;

                default:
                    break;
                }

                mSelectItem = mChooseItem;
            }
        });

        builder.setNegativeButton("取消", null);
        builder.show();
    }

    /**
     * 确保SDcard下面存在此张图片
     */
    private void showShare() {
        ShareSDK.initSDK(this);
        OnekeyShare oks = new OnekeyShare();
        
        //修改主题
        oks.setTheme(OnekeyShareTheme.SKYBLUE);
        
        // 关闭sso授权
        oks.disableSSOWhenAuthorize();

        // 分享时Notification的图标和文字 2.5.9以后的版本不调用此方法
        // oks.setNotification(R.drawable.ic_launcher,
        // getString(R.string.app_name));
        // title标题，印象笔记、邮箱、信息、微信、人人网和QQ空间使用
        oks.setTitle(getString(R.string.share));
        // titleUrl是标题的网络链接，仅在人人网和QQ空间使用
        oks.setTitleUrl("http://sharesdk.cn");
        // text是分享文本，所有平台都需要这个字段
        oks.setText("我是分享文本");
        // imagePath是图片的本地路径，Linked-In以外的平台都支持此参数
        oks.setImagePath("/sdcard/test.jpg");// 确保SDcard下面存在此张图片
        // url仅在微信（包括好友和朋友圈）中使用
        oks.setUrl("http://sharesdk.cn");
        // comment是我对这条分享的评论，仅在人人网和QQ空间使用
        oks.setComment("我是测试评论文本");
        // site是分享此内容的网站名称，仅在QQ空间使用
        oks.setSite(getString(R.string.app_name));
        // siteUrl是分享此内容的网站地址，仅在QQ空间使用
        oks.setSiteUrl("http://sharesdk.cn");

        // 启动分享GUI
        oks.show(this);
    }
}

 3、webview

默认不支持JS功能

WebSettings settings = mWebView.getSettings();
settings.setBuiltInZoomControls(true);// 显示放大缩小按钮
settings.setUseWideViewPort(true);// 只是双击缩放
settings.setJavaScriptEnabled(true);// 打开js功能

默认网页跳转是用浏览器，禁用浏览器

mWebView.setWebViewClient(new WebViewClient() {
// 网页开始加载
@Override
public void onPageStarted(WebView view, String url, Bitmap favicon) {
super.onPageStarted(view, url, favicon);
System.out.println("网页开始加载");
pbLoading.setVisibility(View.VISIBLE);
}

// 网页跳转
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
// <a href="tel:110">联系我们</a>
// PhoneGap(js和本地代码互动)
System.out.println("网页跳转:" + url);
view.loadUrl(url);// 强制在当前页面加载网页, 不用跳浏览器
return true;
}

// 网页加载结束
@Override
public void onPageFinished(WebView view, String url) {
super.onPageFinished(view, url);
System.out.println("网页加载结束");
pbLoading.setVisibility(View.GONE);
}
});

监听网页加载进度

mWebView.setWebChromeClient(new WebChromeClient() {

// 加载进度回调
@Override
public void onProgressChanged(WebView view, int newProgress) {
super.onProgressChanged(view, newProgress);
System.out.println("newProgress:" + newProgress);
}

// 网页标题
@Override
public void onReceivedTitle(WebView view, String title) {
super.onReceivedTitle(view, title);
System.out.println("title:" + title);
}

});

网页字体大小设置

位置表示选择new String[] { "超大号字体", "大号字体", "正常字体", "小号字体",
"超小号字体" };

// 点击确定前, 用户选择的字体大小的位置
private int mChooseItem;
// 当前的字体位置
private int mSelectItem = 2;

/**
* 选择字体大小的弹窗
*/
private void showChooseDialog() {
AlertDialog.Builder builder = new AlertDialog.Builder(this);
builder.setTitle("字体设置");
String[] items = new String[] { "超大号字体", "大号字体", "正常字体", "小号字体",
"超小号字体" };
builder.setSingleChoiceItems(items, mSelectItem,
new DialogInterface.OnClickListener() {

@Override
public void onClick(DialogInterface dialog, int which) {
mChooseItem = which;
}
});

builder.setPositiveButton("确定", new DialogInterface.OnClickListener() {

@Override
public void onClick(DialogInterface dialog, int which) {

WebSettings settings = mWebView.getSettings();

switch (mChooseItem) {
case 0:
settings.setTextSize(TextSize.LARGEST);
break;
case 1:
settings.setTextSize(TextSize.LARGER);
break;
case 2:
settings.setTextSize(TextSize.NORMAL);
break;
case 3:
settings.setTextSize(TextSize.SMALLER);
break;
case 4:
settings.setTextSize(TextSize.SMALLEST);
break;

default:
break;
}

mSelectItem = mChooseItem;
}
});

builder.setNegativeButton("取消", null);
builder.show();
}

在Android开发中，我们经常会需要在Android界面上弹出一些对话框，比如询问用户或者让用户选择。这些功能我们叫它Android Dialog对话框,android起始已经提供了相应的接口Dialog Builder [AlertDialog]

 网页跳转，调用本地应用等
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
// <a href="tel:110">联系我们</a>
// PhoneGap(js和本地代码互动)
System.out.println("网页跳转:" + url);
view.loadUrl(url);// 强制在当前页面加载网页, 不用跳浏览器
return true;
}