ぽんぽこ日記

プログラミング、読書、日々の生活

Androidで大きなイメージ領域をスムーズに拡大縮小・スクロール表示するならTileViewがオススメ

今年の初頭、初めてのAndroidアプリを受注しました。詳細は明らかに出来ませんが、エンドユーザはあるインフラ系の大企業で、ある種のネットワーク図を表示するアプリでした。(首都圏の地下鉄の路線図のようなものを想像していただければ良いかと思います。)

広大な表示エリアを、拡大縮小したりスクロールさせて、ノードに相当する部分のデータを表示するというというものです。

iOSだったらCATiledLayerあたりで実装するかなー、といったところですが、Androidだとどんなのがあるだろうと思って探してみたところ、TileViewというライブラリを見つけました。

github.com

ググってみるとあまり日本語の情報がないみたいなので紹介してみたいと思います。

初期化

こんな感じでインスタンスを生成してサイズを設定します。

TileView tileView = new TileView(this);
tileView.setSize(3000,5000);

拡大縮小レベルに応じた画像表示

拡縮率のレベルごとに精細度の異なる画像を分割して用意しておくことで、拡縮率相応の精細度で画像を表示することが出来ます。

サンプルプログラムの例で言うと、指輪物語の中つ国の地図を4段階の精細度にわけて表示させています。

     tileView.setSize( 4015, 4057 );
        
        // detail levels
        tileView.addDetailLevel( 1.000f, "tiles/fantasy/1000/%col%_%row%.jpg", "samples/middle-earth.jpg");
        tileView.addDetailLevel( 0.500f, "tiles/fantasy/500/%col%_%row%.jpg", "samples/middle-earth.jpg");
        tileView.addDetailLevel( 0.250f, "tiles/fantasy/250/%col%_%row%.jpg", "samples/middle-earth.jpg");
        tileView.addDetailLevel( 0.125f, "tiles/fantasy/125/%col%_%row%.jpg", "samples/middle-earth.jpg");

f:id:ponpoko1968:20150711194529p:plain

クリッカブルなマーカーが配置できる

仮想画面の任意の場所にマーカー画像を配置して、タップイベントに反応するリスナーを設定できます。*1マーカーはビューの拡縮率に依存せず、常に一定の大きさで表示してくれるところも助かります。

まとめ

今回の案件では結構な数のマーカーを表示させる必要がありました。にもかかわらず、全方向にぬるぬる高速にスクロールするため、お客様にも大変好評をいただくことが出来ました。

デモアプリのコードも公開されているので、何が出来るかわかりやすいと思います。 f:id:ponpoko1968:20150711194529p:plain github.com

[asin:4798035858:detail]

*1:iOSでいうと、MapKitのMKCalloutに相当するものです。