例としてシンプルな画像ビューアーを使用したAndroidのカスタムビュー、スクロール、ジェスチャー

この記事では、単純な画像ビューアーの実装の詳細について説明し、スクロールおよびジェスチャ処理の実装の微妙な点を示します。



それでは、始めましょう。 写真を見るためのアプリケーションを開発します。 完成したアプリケーションは次のようになります（もちろん、スクリーンショットは機能性を十分に伝えていませんが）。



アプリケーションは、 マーケットからインストールするか、ここから手動でインストールできます 。 ソースコードはこちらから入手できます 。



アプリケーションの主な要素は、開発するImageViewerクラスです。 ただし、表示するファイルを選択するために、ホイールを再発明せずに、既製の「コンポーネント」をここで取得したことにも注意してください 。



コンポーネントは、メインアクティビティから開始するときに呼び出されるアクティビティです。 ファイルを選択した後、ImageViewerクラスを使用してアップロードして表示します。 クラスをさらに詳しく考えてみましょう。



このクラスはViewクラスの継承クラスであり、onDrawメソッドの1つのみをオーバーライドします。 このクラスには、コンストラクターと画像読み込みメソッドも含まれています。

public class ImageViewer extends View { private Bitmap image = null; public ImageViewer(Context context) { super(context); } @Override public void onDraw(Canvas canvas) { if (image != null) canvas.drawBitmap(image, 0, 0, null); } public void loadImage(String fileName) { image = BitmapFactory.decodeFile(fileName); } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

スマートフォンの画面よりも大きい写真をアップロードすると、その一部のみが表示され、移動したり縮小したりする方法はありません。



次に、スクロール機能を追加しましょう。 スクロールとは、基本的に、ユーザーが画面を指でタッチし、離さずに画面を動かしてから離すジェスチャーです。 タッチスクリーンに関連するイベントを処理できるようにするには、onTouchEventメソッドをオーバーライドする必要があります。 このメソッドは、MotionEvent型の単一のパラメーターを受け入れ、イベントが処理される場合はtrueを返す必要があります。 このメソッドを使用して、スクロールを含むあらゆるジェスチャーのサポートを実装できます。

スクロールを認識するために、タッチ、移動、リリースの瞬間をキャプチャする必要があります。 幸い、Android SDKにはすべての作業を行うクラスがあるため、これを手動で行う必要はありません。 したがって、スクロールジェスチャを認識するために、OnGestureListenerインターフェイスを実装するオブジェクトによって初期化されるGestureDetector型のフィールドをクラスに追加する必要があります（このオブジェクトはスクロールイベントを受け取ります）。 また、ImageViewerクラスのonTouchEventメソッドをオーバーライドし、イベントの処理をOnGestureListener型のオブジェクトに渡す必要があります。 変更されたImageViewerクラス（変更されていないメソッドなし）を以下に示します。

 public class ImageViewer extends View { private Bitmap image = null; private final GestureDetector gestureDetector; public ImageViewer(Context context) { super(context); gestureDetector = new GestureDetector(context, new MyGestureListener()); } @Override public boolean onTouchEvent(MotionEvent event) { if (gestureDetector.onTouchEvent(event)) return true; return true; } private class MyGestureListener extends SimpleOnGestureListener { @Override public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY) { scrollBy((int)distanceX, (int)distanceY); return true; } } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ご覧のとおり、実際にはMyGestureListenerをOnGestureListenerからではなく、SimpleOnGestureListenerから継承しています。 最後のクラスは、空のメソッドを使用してOnGestureListenerインターフェイスを実装するだけです。 このようにして、必要なメソッドのみを選択して、すべてのメソッドの実装から自分自身を守ります。



これで、大きな画像をアップロードすると、少なくともスクロールできるようになります。 しかし、第一に、私たちは絵を越えてスクロールできます。第二に、私たちがどこにいるのか、そしてどれだけ残されているのかを教えてくれるスクロールバーがありません。



最初の2番目の問題を解決しましょう。 インターネットで検索すると、computeHorizo​​ntalScrollRangeメソッドとcomputeVerticalScrollRangeメソッドがオーバーライドされます。 これらのメソッドは、画像の実際のサイズを返す必要があります（実際には、スクロールバーに関連するメソッドもあります。これらはcomputeHorizo​​ntalScrollExtent、computeHorizo​​ntalScrollOffsetメソッド、および垂直スクロールバーの同じペアです。これらをオーバーライドすると、より任意の値を返すことができます）。 しかし、これは十分ではありません-最初にスクロールバーを含める必要があり、2番目にスクロールバーを含める必要があります。 これらは、setHorizo​​ntalScrollBarEnabledメソッドとsetVerticalScrollBarEnabledメソッドに含まれており、initializeScrollbarsメソッドによって初期化されます。 しかし、これは不運です-最後のメソッドは、TypedArray型のやや不明瞭なパラメーターを使用します。 このパラメーターには、Viewの一連の標準属性が含まれている必要があります。 このリストは、XML属性の表で確認できます。 XMLからビューを作成した場合、Androidランタイムはそのようなリストを自動的にコンパイルします。 ただし、クラスをプログラムで作成するため、このリストをプログラムで作成する必要もあります。 これを行うには、次の内容でres \ valuesディレクトリにattrs.xmlファイルを作成します。

 <?xml version="1.0" encoding="utf-8"?> <resources> <declare-styleable name="View"> <attr name="android:background"/> <attr name="android:clickable"/> <attr name="android:contentDescription"/> <attr name="android:drawingCacheQuality"/> <attr name="android:duplicateParentState"/> <attr name="android:fadeScrollbars"/> <attr name="android:fadingEdge"/> <attr name="android:fadingEdgeLength"/> <attr name="android:fitsSystemWindows"/> <attr name="android:focusable"/> <attr name="android:focusableInTouchMode"/> <attr name="android:hapticFeedbackEnabled"/> <attr name="android:id"/> <attr name="android:isScrollContainer"/> <attr name="android:keepScreenOn"/> <attr name="android:longClickable"/> <attr name="android:minHeight"/> <attr name="android:minWidth"/> <attr name="android:nextFocusDown"/> <attr name="android:nextFocusLeft"/> <attr name="android:nextFocusRight"/> <attr name="android:nextFocusUp"/> <attr name="android:onClick"/> <attr name="android:padding"/> <attr name="android:paddingBottom"/> <attr name="android:paddingLeft"/> <attr name="android:paddingRight"/> <attr name="android:paddingTop"/> <attr name="android:saveEnabled"/> <attr name="android:scrollX"/> <attr name="android:scrollY"/> <attr name="android:scrollbarAlwaysDrawHorizontalTrack"/> <attr name="android:scrollbarAlwaysDrawVerticalTrack"/> <attr name="android:scrollbarDefaultDelayBeforeFade"/> <attr name="android:scrollbarFadeDuration"/> <attr name="android:scrollbarSize"/> <attr name="android:scrollbarStyle"/> <attr name="android:scrollbarThumbHorizontal"/> <attr name="android:scrollbarThumbVertical"/> <attr name="android:scrollbarTrackHorizontal"/> <attr name="android:scrollbarTrackVertical"/> <attr name="android:scrollbars"/> <attr name="android:soundEffectsEnabled"/> <attr name="android:tag"/> <attr name="android:visibility"/> </declare-styleable> </resources>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

このファイルには、上記の表にリストされているすべての属性がリストされています（コンパイラーがエラーとして示しているものを除き、明らかに最新のリストはドキュメントにあります）。 変更されたImageViewerクラス（不変メソッドを除く）：

 public class ImageViewer extends View { private Bitmap image = null; private final GestureDetector gestureDetector; public ImageViewer(Context context) { super(context); gestureDetector = new GestureDetector(context, new MyGestureListener()); // init scrollbars setHorizontalScrollBarEnabled(true); setVerticalScrollBarEnabled(true); TypedArray a = context.obtainStyledAttributes(R.styleable.View); initializeScrollbars(a); a.recycle(); } @Override protected int computeHorizontalScrollRange() { return image.getWidth(); } @Override protected int computeVerticalScrollRange() { return image.getHeight(); } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

これにこだわるつもりはないので、「フリング」ジェスチャーのサポートを追加しましょう。 このジェスチャはスクロールジェスチャへの追加にすぎませんが、最後の瞬間（リリースする前）に指を動かす速度が考慮され、ゼロでない場合、スクロールは徐々にフェードし続けます。 このジェスチャのサポートは既にGestureDetectorに含まれているため、MyGestureListenerクラスのonFlingメソッドをオーバーライドするだけです。 このイベントをキャッチしたら、スクロールの位置を変更するのにもう少し時間が必要です。 もちろん、これはタイマーなどを使用して「手動で」行うことができますが、Android SDKには既に必要な機能を実装するクラスがあります。 したがって、Scroller型の別のフィールドをImageViewerクラスに追加する必要があります。これは、「残留」スクロールを処理します。スクロールを開始するには、そのflingメソッドを呼び出す必要があります。 また、awakenScrollBarsメソッドを呼び出して、スクロールバーを表示する必要があります（不要な場合は非表示になります）。 最後に行うことは、scrollToメソッドを使用して直接スクロールするcomputeScrollメソッドを再定義することです（Scrollerクラス自体はスクロールせず、座標でのみ機能します）。 変更されたImageViewerクラスのコードは次のとおりです。

 public class ImageViewer extends View { private Bitmap image = null; private final GestureDetector gestureDetector; private final Scroller scroller; public ImageViewer(Context context) { super(context); gestureDetector = new GestureDetector(context, new MyGestureListener()); scroller = new Scroller(context); // init scrollbars setHorizontalScrollBarEnabled(true); setVerticalScrollBarEnabled(true); TypedArray a = context.obtainStyledAttributes(R.styleable.View); initializeScrollbars(a); a.recycle(); } @Override public void computeScroll() { if (scroller.computeScrollOffset()) { int oldX = getScrollX(); int oldY = getScrollY(); int x = scroller.getCurrX(); int y = scroller.getCurrY(); scrollTo(x, y); if (oldX != getScrollX() || oldY != getScrollY()) { onScrollChanged(getScrollX(), getScrollY(), oldX, oldY); } postInvalidate(); } } private class MyGestureListener extends SimpleOnGestureListener { @Override public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) { scroller.fling(getScrollX(), getScrollY(), -(int)velocityX, -(int)velocityY, 0, image.getWidth() - getWidth(), 0, image.getHeight() - getHeight()); awakenScrollBars(scroller.getDuration()); return true; } } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

フリングジェスチャに関する会話の最後に、1つの小さなことを行う必要があります。スローからスクロールしているときに指をタッチすると、スクロールを停止する必要があります。 今回は、onTouchEventメソッドで「手動で」実行します。 変更されたメソッドを以下に示します。

 @Override public boolean onTouchEvent(MotionEvent event) { // check for tap and cancel fling if ((event.getAction() & MotionEvent.ACTION_MASK) == MotionEvent.ACTION_DOWN) { if (!scroller.isFinished()) scroller.abortAnimation(); } if (gestureDetector.onTouchEvent(event)) return true; return true; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

すでに非常に興味深い物理学を賞賛することができますが、写真の外側をスクロールすると、「グリッチ」がいくつか見られます。 これは、フリングが画像内でのみ機能し、スローせずにスクロールがどこでも機能するためです。 つまり 非常にスムーズにスクロールする場合にのみ、画像を超えることができます（そのため、フリングは機能しません）。 onFlingメソッドに処理制限を導入することでこの「カント」を修正し、画像の境界を超えない場合にのみロールを処理できます。 変更されたメソッドを以下に示します。

 @Override public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) { boolean scrollBeyondImage = ((getScrollX() < 0) || (getScrollX() > image.getWidth()) || (getScrollY() < 0) || (getScrollY() > image.getHeight())); if (scrollBeyondImage) return false; scroller.fling(getScrollX(), getScrollY(), -(int)velocityX, -(int)velocityY, 0, image.getWidth() - getWidth(), 0, image.getHeight() - getHeight()); awakenScrollBars(scroller.getDuration()); return true; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ここでも、画像を超えて自由にスクロールできます。 すでにこの問題を思い出したようです...彼女はエレガントな解決策を持っています。これは、指を離したとき（額縁の外でスクロールが完了したとき）、写真を「適切な」場所にスムーズに戻す必要があるという事実にあります。 そして再び、onTouchEventメソッドで「手動で」これを実行します。

 @Override public boolean onTouchEvent(MotionEvent event) { // check for tap and cancel fling if ((event.getAction() & MotionEvent.ACTION_MASK) == MotionEvent.ACTION_DOWN) { if (!scroller.isFinished()) scroller.abortAnimation(); } if (gestureDetector.onTouchEvent(event)) return true; // check for pointer release if ((event.getPointerCount() == 1) && ((event.getAction() & MotionEvent.ACTION_MASK) == MotionEvent.ACTION_UP)) { int newScrollX = getScrollX(); if (getScrollX() < 0) newScrollX = 0; else if (getScrollX() > image.getWidth() - getWidth()) newScrollX = image.getWidth() - getWidth(); int newScrollY = getScrollY(); if (getScrollY() < 0) newScrollY = 0; else if (getScrollY() > image.getHeight() - getHeight()) newScrollY = image.getHeight() - getHeight(); if ((newScrollX != getScrollX()) || (newScrollY != getScrollY())) { scroller.startScroll(getScrollX(), getScrollY(), newScrollX - getScrollX(), newScrollY - getScrollY()); awakenScrollBars(scroller.getDuration()); } } return true; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

これで、スクロールがわかったと自信を持って言えます。 実装したい最後のジェスチャに進むことができます-これはピンチズームジェスチャです。



横から見ると、ジェスチャは、2本の指でスマートフォンの画面上で想像上の何かを伸ばしたり絞ったりするように見えます。 段階的なジェスチャは、次のように発生します。1本の指で押す、2本目の指で押す、1本または2本の指の位置を離さずに変更する、2本目の指を離す ズームの大きさを決定するには、ジェスチャーの開始時と終了時の指の間の距離の比率を計算する必要があります。 指間の距離は、式sqrt（pow（x2-x1、2）+ pow（y2-y1、2））によって決まります。 保存する必要のあるスクロール位置に注意する必要もあります。ジェスチャーで画像を拡大すると、スクロール位置が変更されるためです（サイズ変更された画像のため）。 この位置-むしろ、Android SDKの用語で、位置を保存したいポイントはフォーカルポイントと呼ばれ、2本の指の間の中央にあります。

ジェスチャーはいつものように自分で実装できますが、幸いなことにAndroid SDKには既に実装されています（バージョン2.2以降のみ）。 ScaleGestureDetectorクラスはこれに役立ち、そのインスタンスがクラスに追加されます。 ScaleGestureDetectorは、OnScaleGestureListenerインターフェイスをサポートするオブジェクトで初期化されるため、onScaleBegin、onScale、およびonScaleEndメソッドを実装する内部クラスMyScaleGestureListenerも作成します。 onTouchEventメソッドからScaleGestureDetectorに制御を転送することを忘れないでください。 まあ、そして最も重要なこと-スケーリングデータを何らかの方法で使用する必要があります：画像の幅と高さが表示されるすべての場所でそれらを考慮する必要があります（つまり、実際にこれらのパラメーターにスケーリング係数を掛ける必要があります）。 ImageViewerクラスの最終コードは、ソースで表示できます。

以上です。 私はそれが役に立つことになることを願っています。