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;
}
