Android用電子ブックリーダをm5-rc14に移植

以前に公開した「ComicViewer3 -Androidで電子ブックリーダ-」をm5-rc14にポーティングしました。

単純に移植するだけでは面白くないので、追加機能とUI変更をしました。

メニューアイコンを追加しました。 サブメニューも追加しました。

サブメニューの追加はこういった感じです。

@Override
public boolean onCreateOptionsMenu(Menu menu) {
  super.onCreateOptionsMenu(menu);
  SubMenu zoom_sub = menu.addSubMenu(0, 0, "ZOOM", R.drawable.zoom);
  zoom_sub.add(0, 1, "Zoom In(I)", R.drawable.zoomin);
  zoom_sub.add(0, 2, "Zoom Out(O)", R.drawable.zoomout);
  zoom_sub.add(0, 3, "Pan Width", R.drawable.panw);
  zoom_sub.add(0, 4, "Pan Height", R.drawable.panh);
...
}

addの第一引数はグループを意味します。
メニューとサブメニューは同じ値にします。
アイコンは第四引数で指定します。

以前はタッチディスプレイで画像をグリグリと動かすのができませんでした。
1ヶ月の成長の成果か、Androidのバグが取れたためかは不明です、が、
ようやく、グリグリ移動できるようになりました。
これでブックリーダとして使える代物になったと思います。
＃もちろん十字キーでの操作も可能です。

静止画ではやはり分かりませんね(汗)

これはonTouchEventメソッドをOverrideすることで実装できます。

@Override
public boolean onTouchEvent(MotionEvent event) {
...
  int touchX = (int) event.getX();
  int touchY = (int) event.getY();
  scrollBy(oldx - touchX, oldy - touchY);
...
}

タッチ箇所のX/Y座標の差分をscrollByで画像を移動させる方式です。

3D回転エフェクトをかけてみました。
「Space」や「A」で、グルっと回り、全ページを表示できます。

詳細な実装方法は「Androidで3D回転エフェクトをかける方法」で説明しています。
興味があればご覧下さい。

この電子ブックリーダはPNGやJPGの画像を纏めてZIP圧縮したファイルを対象としています。

対象となるZIPファイルをemulatorから見える場所に配置して利用下さい。
配置方法はSDカードを利用しても可能です。
他には、コマンドを使用する方法が簡単かもしれません。ご参考までに。

いつものようにeclipseのプロジェクトを公開しておきます。自由にご利用下さい。
comic_viewer_m5_rc14.zip

3D回転はとてもテクニカル。勉強になるなぁ。
タッチディスプレイでモーションジェスチャーを実装したい。
でも失敗。時間をうまく取得できない。MotionEvent中は同じ時間になる。
簡単なはずなのに、おかしい。バグかな？ミスかな？ちょっと放置。

今回はココのアイコンを使わせてもらいました。Special Thanx!

サンプルに使わせてもらった本は「YOGA Anatomy」です。見た目のインパクトに惚れました。

• AndroidでNative実行入門
• AroundHereをAndroid-SDK 0.9betaに対応しました
• Androidのアニメーションいろいろ
• Androidの地図アプリをぐるなびに対応しました
• Androidでブックリーダ 「ComicViewer2」
• ET2008で喋ってきました
• 第4回Android勉強会に参加してきました