ViewFlipperで拡大させる方法

1,673 views
Skip to first unread message

すぴこ

unread,
Sep 20, 2011, 3:37:50 AM9/20/11
to 日本Androidの会
いつもお世話になっております。
yoo-s.com/topic/detail/347
こちらのサイトを参考にしながら、
ViewFlipperを使って動物の写真集アプリを制作しております。

そこで、マルチタッチでページを拡大させたいのですが、
どうも上手くいきませんので、どのように処理させればいいのか、
ご教授頂けますと幸いです。

それとも、ViewFlipperでページを拡大させるのはナンセンスなのでしょうか。

ピンチインで拡大し、ピンチアウトで元に戻る。
拡大時もページの切り替えは可能で、ドラッグすることによって
ページ内を移動できるといった動作が理想的です。

あまりにも初歩的な質問で大変恐縮ですが、
どうぞよろしくお願いいたします。

Aska

unread,
Sep 21, 2011, 10:15:56 AM9/21/11
to 日本Androidの会
Askaです.

ImageViewを継承したクラス(例MyImageView)を作成し,
その中でScaleGestureDetectorを使ってピンチイン・アウトを認識し,
拡大・縮小を行います.
そして, 作成したカスタムビューを使ってレイアウトを記述すればOKです.

・res/layout/main.xml
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/
android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<ViewFlipper android:id="@+id/flipper"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<include android:id="@+id/layout01" layout="@layout/photo01" /
>
<include android:id="@+id/layout01" layout="@layout/photo02" /
>
</ViewFlipper>
</FrameLayout>

・res/layout/photo01.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/
android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<com.moonlight_aska.android.viewflippersample.MyImageView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:src="@drawable/photo01" />
</LinearLayout>

一応, ページ内での拡大, 縮小, 移動は一応確認できました.

ScaleGestureDetectorによるピンチイン・アウトについては,
http://blog.livedoor.jp/moonlight_aska/archives/50660605.html
を参照してください.

すぴこ

unread,
Sep 22, 2011, 4:00:29 AM9/22/11
to 日本Androidの会
Aska様

御丁寧にありがとうございます。
非常に分かりやすい説明のサイトをご紹介頂きましてありがとうございます。
Aska様のサイトを拝見し、レイアウトも書き換えて実行してみたのですが、
エラーが出てしまいました。
("Sorry!
The application ~ has stopped unexpectedly.)
考えられる限りにソースを色々と改変してみても状況は変わらず、悩んだ末、こうして返信させて頂きました。
何分初心者なものでして、viewの概念をあまり理解できていないのが原因かもしれません。

レイアウト以外に変更すべき点はございますでしょうか。
厚かましいとは思いますが、ご返信頂ければ大変幸いです。
> ScaleGestureDetectorによるピンチイン・アウトについては,http://blog.livedoor.jp/moonlight_aska/archives/50660605.html

Aska

unread,
Sep 22, 2011, 8:26:52 AM9/22/11
to 日本Androidの会
Askaです.

"Sorry! The application ~ has stopped unexpectedly..."
というエラーですが, 考えられる原因はいろいろあるようです.
1) AndroidManifest.xmlにエラー
2) 遷移先のレイアウトxmlにエラー
3) 遷移先のクラス内にエラー
    :

まずは, 以下の3点も確認してみてください.
1) 先のレイアウト記述で誤っていたところ
誤:
<include android:id="@+id/layout01" layout="@layout/photo01" /
<include android:id="@+id/layout01" layout="@layout/photo02" /
正:
<include android:id="@+id/layout01" layout="@layout/photo01" />
<include android:id="@+id/layout02" layout="@layout/photo02" />
                ^^^^ ^^^
2) res/layout/photo02.xmlをphoto01.xmlと同じように作成する
3) MyImageViewをBlogの中では, Actitivyを継承したクラスの中で定義
しているが, Activityのクラスから出してMyImageView.javaとする.

上記に対応後も同様のエラーが発生する場合, Logcatに出ているエラーを確認してください.
もう少しエラー原因を絞り込めるかもしれません.
> > > どうぞよろしくお願いいたします。- 引用テキストを表示しない -
>
> - 引用テキストを表示 -

Aska

unread,
Sep 23, 2011, 1:04:53 AM9/23/11
to 日本Androidの会
Askaです.

あと, BlogのMyViewのコンストラクタは, XMLファイルの定義から属性を取得できないので, AttributeSetを引数に持つコン
ストラクタを追加する必要があります.
もし, このコンストラクタを追加していないなら, これがエラー原因の可能性が高いです...

参考までに, ViewFlipper + GestureDetector + ScaleGestureDetectorを組み合わせたサンプルを
下記に掲載しました.
http://blog.livedoor.jp/moonlight_aska/archives/50663546.html
> > - 引用テキストを表示 -- 引用テキストを表示しない -
>
> - 引用テキストを表示 -

すぴこ

unread,
Sep 26, 2011, 3:35:03 AM9/26/11
to 日本Androidの会
Aska様

お世話になっております。
すぴこです。

ご返信ありがとうございました。
わざわざサンプルコードのページまで作成して頂き、
感激しております。
初心者のわたしでも、エラーを出さずサンプル通りの動作をさせることができました。
あとは、フリック判定時の移動距離設定を多めにとり、
画像を移動させることにも挑戦したいと思います。

本当にありがとうございました。


すぴこ


On 9月23日, 午後2:04, Aska <moonlight.a...@gmail.com> wrote:
> Askaです.
>
> あと, BlogのMyViewのコンストラクタは, XMLファイルの定義から属性を取得できないので, AttributeSetを引数に持つコン
> ストラクタを追加する必要があります.
> もし, このコンストラクタを追加していないなら, これがエラー原因の可能性が高いです...
>
> 参考までに, ViewFlipper + GestureDetector + ScaleGestureDetectorを組み合わせたサンプルを
> 下記に掲載しました.http://blog.livedoor.jp/moonlight_aska/archives/50663546.html

すぴこ

unread,
Sep 29, 2011, 3:36:41 AM9/29/11
to 日本Androidの会
Aska様

お世話になります。
すぴこです。

あれから、viewの移動と拡大の機能を組み合わせ、
電子書籍らしくすることができました。
Aska様のおかげです、ありがとうございます。

しかし、2日ほど悩んだのですが、画像を拡大・縮小時の
ImageViewの移動を画面内に制限することがうまくできません。

MotionEvent.ACTION_UP時に、画像のx座標が画面外に出た時、
x座標0の位置へ画像を移動させる(戻す)のような処理で制限しているのですが、
拡大&縮小しているときにどのようにコードを書けばいいのかが分かりません。
原寸サイズであれば、(原始的な方法ですが)元の画像のサイズを知っているので、
その数値を元に、制限することができました。

拡大率&縮小率を求められれば、期待通りの動作ができそうな気もするのですが、
なにかよい方法はありますでしょうか。

何度も申し訳ございません。
もしよろしければお返事頂けますと幸いです。


On 9月23日, 午後2:04, Aska <moonlight.a...@gmail.com> wrote:
> Askaです.
>
> あと, BlogのMyViewのコンストラクタは, XMLファイルの定義から属性を取得できないので, AttributeSetを引数に持つコン
> ストラクタを追加する必要があります.
> もし, このコンストラクタを追加していないなら, これがエラー原因の可能性が高いです...
>
> 参考までに, ViewFlipper + GestureDetector + ScaleGestureDetectorを組み合わせたサンプルを
> 下記に掲載しました.http://blog.livedoor.jp/moonlight_aska/archives/50663546.html

Aska

unread,
Sep 29, 2011, 11:39:24 AM9/29/11
to 日本Androidの会
Askaです.

> 拡大率&縮小率を求められれば、期待通りの動作ができそうな気もするのですが、
> なにかよい方法はありますでしょうか。

onScroleで使っているdetector.getScaleFactor()の値は, 前回のスケールイベント時の
サイズを基準とした拡大率or 縮小率のはずです.
試してみてください.

すぴこ

unread,
Oct 10, 2011, 9:09:47 PM10/10/11
to 日本Androidの会
Aska様

こんにちは。
すぴこです。

お返事が遅くなってしまい申し訳ございませんでした。
お教え頂けましたおかげで、無事、思い通りの動作をさせることができました。

この度は大変お世話になりました。
Aska様のサイトをこれからも参考にさせて頂きます。
どうもありがとうございます。

すぴこ
> > > 参考までに,ViewFlipper+ GestureDetector + ScaleGestureDetectorを組み合わせたサンプルを
> > > > > > <ViewFlipperandroid:id="@+id/flipper"
Reply all
Reply to author
Forward
0 new messages