Calendar」の19日目の記事です。「みんコミ」のAndroidアプリ(バージョン1.0.3)をベースに執筆しています。Store」からアプリをインストールしておくことをお勧めします。「みんコミ」アプリのコミックビューアーで、拡大縮小したときにピンチイン・アウトの「フォーカス」のハンドリングを調整すると、もっと使いやすくなると思います。コードを見ていないのではっきりとしたことは言えませんが、現状のコミックビューアーは、ピンチアウトで拡大操作をしたときに、1番目の指を起点に拡大縮小をしていく挙動になっているように感じました。ScaleGestureDetectorを使って取得した値に基づいて画像を拡大縮小するときに、Focusの値も使って画像の位置を調整すると、自然な拡大ができます。サンプルプロジェクトをGitHubに置いておきます。https://github.com/keiji/adventcalendar_2015_mincomiサンプル「ズームサンプル(ZoomActivity)」では、起動すると標準のアイコンを画面に表示します。ピンチイン・アウトの操作で拡大縮小するようにプログラムしています。拡大縮小の際、二本の指の中間点(Focus)を基に位置を変えています。ScaleGestureDetectorでonScaleジェスチャーを取得します。ScaleGestureDetectorのインスタンスにonTouchが受け取るMotionEventを渡すだけで、onTouchEventの状況から判定して所定のジェスチャーのコールバックが呼ばれます。}}Scrollerと同様、ScaleGestureDetectorの各メソッドの戻り値には気をつけて下さい。Studioで自動生成するとデフォルトで各メソッドはfalseを返しますが、そのままではACTION_DOWN以外のイベントを受け取れません(当然、ジェスチャも受け取れません)。trueを返すようにしましょう。0)を基準に拡大します。二本指でピンチ操作をするときは、二本の指の中間点を拡大していくという挙動が自然です。この二本の指の中間点の座標を「フォーカス」と呼びます。コードではScaleGestureDetectorのgetFocusX()とgetFocusY()で取得できます。(GoogleのサンプルサイトではgetCurrentSpanX()やgetCurrentSpanY()から逐次フォーカスを計算していますが、今回はFocusを使う方法を採用しています)このフォーカス(図の黒丸)を中心にすると、ユーザーにとって自然な拡大・縮小に見えます。フォーカスを基準にただ拡大しても、画像はやはりずれてしまいます。拡大・縮小後の大きさと、以前の大きさの差分を取り、フォーカスの量に応じて位置を調整する必要があります。中心をフォーカスした状態で拡大すると、サイズが大きくなった量の半分左側に移動して描画することで、拡大してもフォーカスの位置は(見かけ上)変わりません。フォーカスの位置がずれていた場合、基準となる大きさ(サンプルコードではViewのwidthやheight)に締めるフォーカスの比率を基に、位置を調整する量を計算します。}ただし、今回の実装は不完全です。サンプルでは無限に拡大縮小できますし、拡大縮小を繰り返して描画の位置がずれてもまったく補正していません。現実に実装しようとすれば、タッチによるスクロールやFling操作への対応、画像の割り当てや採用する座標系によって調整が必要になります。実装例をGitHubに置いておきます。参考になれば幸いです。https://github.com/keiji/adventcalendar_2015_mincomi実装参照http://developer.android.com/intl/ja/training/gestures/scale.html「有山圭二」は「みんなのコミック」及び運営の「株式会社イーブックイニシアティブジャパン」とは一切関係がありません。本アドベントカレンダーの内容はあくまで参加者個人の見解です。「みんなのコミック」の評価を目的とするものではありませんので、ご了承下さい。みんコミといえば、僕が普段からお世話になっている根雪れい(@neyuki_rei)さんも連載していますね!10歳になったおかあさんと僕の生活をマンガにしましたよ~。根雪れい.おかあさん(10)と僕。完全移行ガイド」をコミックマーケット89で頒布します。いつも最高の眼鏡っ娘をありがとうございます!それでは明日20日の担当は、一日に二度、ブログを更新するだなんてこれまであっただろうかと感慨にふけっている「有山圭二」さんです。