半年ほど前にAndroid開発を始めた「初心者」です。私はこのトピックに非常に熱心で、いくつかの本を読みました。
- Android 開発のための Java を学びます。
- 初心者向けの Android アプリ;
- Android 4 の開始 (Apress の開始) ;
- プロ Android 4 (プロ Apress) ;
- Mark Murphy の書籍のコピー (Amazon で Kindle 版を利用できないため)。
それらの本によって、私はAndroid のしくみについて多くのことを理解することができました。しかし、今私に欠けているのは…経験です。そこで私は、巨大な地下鉄路線図を表示することを目標とするプロジェクトに貢献することにしました。もちろん、プロジェクトの目標はもっと広いですが、それについて話すことはこの質問には関係ありません。
マップは、アプリケーションのパッケージにオフラインで保存されます。
何を使う？
- 私のアプリケーションの地図は Google マップとほとんど関係がないため、Google マップは使用できません。
- 単純な ImageView を使用してマップを表示することは「不可能」です。ズーム、パンなどがサポートされておらず、これを自分でコーディングすることは私の能力をはるかに超えているためです。
- 私が見つけた唯一の良い回避策は、ズームとパンがサポートされているため、WebView を使用することです。
また、大きな画像を 1 つだけ使用してもうまくいきません。画像の品質が極端に低下します。
問題は何ですか
- 画像が 1300px を超えると Android が自動的に品質を下げるため、単一の画像を使用することはできません (上記のリンクを参照)。
- 最小 2000 ピクセルの解像度でマップを表示したい ( xhdpi画面は 1280 ピクセル幅の画面に画像全体を表示しますが、ズームもできるようにしたい)。
- APK のファイルサイズが大幅に増加する限り、複数密度のイメージ ( ldpi、mdpi、hdpi、およびxhdpiデバイスの異なるバージョン) を使用することはできません…</li>
- マップを 5 つの異なるタイルに分割し、すべての画面密度に対して 1 つの画像のみを使用することで、 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 */
アプリの実行
- 起動時に、画像が正しく表示されます。
- ズーム解除はうまく機能します(この白い背景が表示されない可能性はありますか? CSS プロパティ
min-heightが機能していないようです)。 - 最大ズームは醜いです。
- パンニング中のパフォーマンスはひどいです！
私の質問
優れたパフォーマンスと比較的使いやすい巨大なカスタム マップを表示するための最良の方法は何ですか? 私の解決策は受け入れられますか? 欠陥を修正する方法は？そのすべて (カスタム マップ、WebView のパフォーマンス) に関する StackOverflow の質問をたくさん読みましたが、どれも役に立ちませんでした。
どうぞよろしくお願いいたします。