9

我是大约 6 个月前开始 Android 开发的“初学者”。我真的对这个话题充满热情,我读了几本书:

这些书让我了解了很多Android 的工作方式。但我现在缺少的是……经验。所以我决定为一个项目做贡献,这个项目的目标是显示一个巨大的地铁地图——当然,这个项目的目标更广泛,但谈论它与这个问题无关。

地图离线存储在我的应用程序包中。

用什么?

  • 无法使用 Google 地图,因为我的应用程序的地图与 Google 地图几乎没有关系。
  • 使用简单的 ImageView 来显示地图是“不可能的”,因为不支持缩放、平移等,并且我自己编写代码远远超出了我的能力。
  • 我发现的唯一不错的解决方法是使用 WebView,因为支持缩放和平移

此外,仅使用一张大图像无法解决问题:它会导致极大的图像质量损失

有什么问题

  • 我不能使用单个图像,因为当图片高于 1300 像素左右时,Android 会自动降低质量(参见上面的链接)。
  • 我想以最小 2000 像素的分辨率显示我的地图(xhdpi屏幕在其 1280 像素宽的屏幕上显示整个图像,但我希望它们也能够缩放)。
    • 使用多密度图像(你知道,ldpimdpihdpixhdpi设备的不同版本)是不可能的,因为它们会大大增加 APK 的文件大小......</li>
  • 通过将我的地图分成 5 个不同的图块,并且对所有屏幕密度只使用一张图像,一切看起来都不错……除了WebView 性能很糟糕

最后一个解决方案的代码

我将巨大的地图分成 5 个不同的地图图块,它们基本上是横向格式的矩形。我将它们全部 (map[1-5].jpg) 以及一个 HTML 文件 (map.html) 放入 ./assets/ 文件夹中。HTML 文件的代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>Huge map</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="user-scalable=yes, height=device-height, target-densityDpi=device-dpi">

    <style type="text/css">
    html, body, p, img { margin: 0; }
    img { border: 0; }
    p { height: 100%; min-height: 100%; }
    </style>
</head>
<body>
<p><!-- Displaying a 2000×2000px map -->
    <img src="file:///android_asset/map1.jpg" alt=""><br> <!-- 2000×408px -->
    <img src="file:///android_asset/map2.jpg" alt=""><br> <!-- 2000×408px -->
    <img src="file:///android_asset/map3.jpg" alt=""><br> <!-- 2000×408px -->
    <img src="file:///android_asset/map4.jpg" alt=""><br> <!-- 2000×408px -->
    <img src="file:///android_asset/map5.jpg" alt=""> <!-- 2000×368px -->
</p>
</body>
</html>

然后我将其加载到我的 Java 代码中并将其应用于我的布局(它只是一个 WebView):

import me.diti.test.R;
import android.app.Activity;
import android.content.Context;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.webkit.WebSettings;
import android.webkit.WebView;

public class MapActivity extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.map); // ./res/layout/map.xml with a <WebView>

        WebView mWebView = (WebView) findViewById(R.id.mapWebView); // The WebView’s id is mapWebView

        WebSettings webSettings = mWebView.getSettings();
            webSettings.setRenderPriority(WebSettings.RenderPriority.HIGH); // Attempt at getting better performance…
            webSettings.setAppCacheEnabled(false); // Offline map: no need for cache
            webSettings.setLoadWithOverviewMode(true);
            webSettings.setUseWideViewPort(true);
            webSettings.setSupportZoom(true);
            webSettings.setBuiltInZoomControls(true);

        mWebView.setInitialScale(100);
        mWebView.setScrollBarStyle(WebView.SCROLLBARS_INSIDE_OVERLAY);

        mWebView.loadUrl("file:///android_asset/map.html"); // We load the map (includes 5 big images)

    }

/* This is a minimal “working” example, no need for menu inflation and activity handling */

应用执行

我的问题

显示具有良好性能和相对易用性的巨大自定义地图的最佳方式是什么?我的解决方案可以接受吗?如何修复缺陷?我阅读了很多关于所有这些(自定义地图、WebView 性能)的 StackOverflow 问题,但没有一个对我有帮助。

期待您的帮助,在此先感谢您。

4

2 回答 2

1

使用简单的 ImageView 来显示地图是“不可能的”,因为不支持缩放、平移等,并且我自己编写代码远远超出了我的能力。

您可以找到用于平移和缩放 的第三方代码ImageView,例如这个,尽管这可能对您没有帮助。

显示具有良好性能和相对易用性的巨大自定义地图的最佳方式是什么?

使用基于切片的地图查看器。OSMDroid 对此有一些支持

于 2012-05-06T14:42:33.320 回答
1

我认为将大图像分割成图块是一种很好的方法,但我认为你需要把它比仅仅 5 张图像更进一步。尝试将其拆分为 10x10 网格中的 100 个 200x200 图像(或 8x8 等中的 64 个 250x250 图像)。然后使用 a<table>在您现有的WebView.

<table cellpadding="0" cellspacing="0" border="0">
    <tr>
        <td><img src="file:///android_asset/map00.00.jpg" border="0"></td>
        <td><img src="file:///android_asset/map00.01.jpg" border="0"></td>
        ...
        <td><img src="file:///android_asset/map00.09.jpg" border="0"></td>
    </tr>
    <tr>
        <td><img src="file:///android_asset/map01.00.jpg" border="0"></td>
        <td><img src="file:///android_asset/map01.01.jpg" border="0"></td>
        ...
        <td><img src="file:///android_asset/map01.09.jpg" border="0"></td>
    </tr>
    ...
</table>
于 2012-05-06T15:11:40.667 回答