1.显示Web信息

1.1 问题

在应用程序中,需要将从Web上获取的HTML或图像数据不加任何修改和处理地显示出来。

1.2 解决方案

(API Level 3)
在WebView中显示信息。WebView是一个视图小部件,在应用程序中,它可以嵌入到任何布局中来显示本地或远程的网页内容。WebView基于开源的WedKit引擎,而Android Browser应用程序也是基于此引擎,所以两者赋予Web应用程序的性能和功能。

1.3 实现机制

除了最重要的二维滚动(横向和纵向同时滚动)和变焦控制,WebView对于显示从网上下载的资源还要很多值得称道的地方。WebView非常适合处理大图片,如体育场的地图,用户在浏览此类图片时可能需要进行左右平移和缩放。在这里,我们将讨论如何实现本地和远程资源的显示。

1. 显示一个URL

最简单的情况就是提供资源的URL,然后在WebView中将与该URL对应的HTML页面或图像显示出来。以下是这项技术在应用程序中一些小的实际应用:

  • 在应用程序中访问企业网站。
  • 通过一台Web服务器显示实时更新内容的页面,如FAQ部分,这个页面的内容不必升级应用程序就可以动态更新。
  • 显示一个很大的图像资源,用户可能需要通过平移/缩放来与它交互。

让我们来看一个加载常见页面的简单示例,不过不是用浏览器,而是在Activity内部加载(参见以下两段代码清单)。
包含一个WebView的Activity

public class MyActivity extends Activity {
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        WebView webview = new WebView(this);
        //启用JavaScript支持 
        webview.getSettings().setJavaScriptEnabled(true);
        webview.loadUrl("http://www.baidu.com/");

        setContentView(webview);
    }
}

注意:
默认情况下,WebView是禁用JavaScript支持的。如果显示的内容需要它的话,可以使用WebView.WebSettings对象来启用它。

在AndroidManifest.xml中设置需要的权限

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.examples.webview"
    android:versionCode="1"
    android:versionName="1.0" >

    <uses-permission android:name="android.permission.INTERNET" />

    <application
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
         <activity
             android:name=".MyActivity"
             android:label="@string/label_web" >
             <intent-filter>
                 <action android:name="android.intent.action.MAIN" />
                 <category android:name="android.intent.category.LAUNCHER" />
             </intent-filter>
         </activity>
    </application>

</manifest>

要点:
如果WebView加载的是远程内容,AndroidManifest.xml必须声明使用androd.permission.INTERNET权限。

加载结果是在Activity中显示一个HTML显示(如下图所示)。


WebView中的HTML页面

注意,如果点击此视图中的任意链接,设备的浏览器应用程序就会启动。这是因为加载的所有网页URL都默认被系统处理为Intent。如果要在内部处理链接,就必须截断这些事件。

2. 显示本地资源

WebView在显示本地内容时也非常有用,它可以利用HTML/CSS来格式化内容或者为它的内容提供平移/缩放功能。你也许会使用Android项目的assets目录来存储你想在WebView中显示的资源,如大型图片或HTML文件。为了更好地组织资源,也可以在assets目录下创建子目录来存储文件。
通过file://android_asset/<resource path>这样的URL格式,WebView.loadUrl()可以显示存储在assets目录中的文件。例如,如果在assets目录中存放了文件android.jpg,使用file://android_asset/images/android.jpg目录中存放了一个同样的文件,WebView可以使用file://android_asset/images/android.jpg这样的URL来加载它。
另外,WebView.loadData()可以将存储在字符串资源或变量中的原始HTML代码加载到视图中。通过这些技术,预先格式化的HTML文本可以保存在res/values/strings.xml中或使用远程API下载下来,并显示在应用程序中。
以下两段代码清单显示了一个示例Activity,它有两个WebView小部件,其中一个垂直堆叠在另一个之上。上面的视图显示了一张存储在assets目录中的大型图片,下面的视图则显示了存储在应用程序的字符串资源中的一个HTML字符串。

res/layout/mian.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <WebView
        android:id="@+id/upperview"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"/>

    <WebView
        android:id="@+id/lowerview"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"/>
</LinearLayout>

显示本地Web内容的Activity

public class MyActivity extends Activity {

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        WebView upperView = (WebView) findViewById(R.id.upperview);
        // 必须启用缩放功能
        upperView.getSettings().setBuiltInZoomControls(true);
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.HONEYCOMB) {
            //Android 3.0+ 以上版本具有捏动缩放功能,无需此按钮
            upperView.getSettings().setDisplayZoomControls(false);
        }
        upperView.loadUrl("file:///android_asset/android.jpg");

        WebView lowerView = (WebView) findViewById(R.id.lowerview);
        String htmlString = "<h1>Header</h1><p>This is HTML text<br /><i>Formatted in italics</i></p>";
        lowerView.loadData(htmlString, "text/html", "utf-8");
    }

}

在Activity显示时,两个WebView将屏幕分为上下两部分。HTML字符串按预期的格式显示,而大型图片则可以水平和垂直滚动,用户甚至可以进行放大和缩小,如下图所示。


显示本地资源的两个WebView

我们通过setBuiltInZoomControls(true)允许用户缩小和放大内容。默认情况下,这还会显示与可点击的缩放控件重叠的按钮。在Android3.0和以后的版本中,你可能额外考虑包括WebView.getSettings().setDisplayZoom(false)。这些版本的平台通过收缩手势原生支持缩放,因此没有必要显示重叠按钮。这种方式不会取代setBuiltInZoomControls(),必须同时支持该方法才可以使收缩手势生效。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 217,509评论 6 504
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,806评论 3 394
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 163,875评论 0 354
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,441评论 1 293
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,488评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,365评论 1 302
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,190评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,062评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,500评论 1 314
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,706评论 3 335
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,834评论 1 347
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,559评论 5 345
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,167评论 3 328
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,779评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,912评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,958评论 2 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,779评论 2 354

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 172,111评论 25 707
  • 用两张图告诉你,为什么你的 App 会卡顿? - Android - 掘金 Cover 有什么料? 从这篇文章中你...
    hw1212阅读 12,723评论 2 59
  • ¥开启¥ 【iAPP实现进入界面执行逐一显】 〖2017-08-25 15:22:14〗 《//首先开一个线程,因...
    小菜c阅读 6,409评论 0 17
  • 内容 抽屉菜单 ListView WebView SwitchButton 按钮 点赞按钮 进度条 TabLayo...
    小狼W阅读 1,613评论 0 10
  • 噩噩发呆良久,闻响回神偏首。 只见那先生,抬手对桌轻叩。 知否?知否!宛若一声狮吼。
    无是也阅读 327评论 0 4