ゼロからカスタムコンポーネントを作成します。 パート1

エントリー

ご挨拶、同僚！



多くの場合、マルチメディアAndroidアプリケーション（以下、単に「アプリケーション」）を開発するとき、システムで提供されていない独自のコンポーネントを作成するタスクに直面します。 あらゆる種類のスイッチノブ、スペクトルビジュアライザーなどを使用できます。それらの一部は、単にグラフィックリソースを交換したり、キャンバスを90度回転させたりすることで取得できます。しかし、ゼロ。」

この記事では、Viewクラスからの継承を使用し、すべての内部を「独立して」実装するシンプルなピアノキーボードであるコンポーネントの作成について説明します。 引用符で囲む理由-詳細を参照してください。



一連の記事では、次のような問題を強調します。

1. コンポーネントレンダリング
2. 標準のスクロールバーを使用してスクロールを追加する
3. キーのセレクターを使用した相互作用
4. 画面を回転させるときにコンポーネントの状態を保存する
5. オーバースクロールのバックライトを追加する
6. パラメータをXMLに渡す
7. ピンチズーム

最初の記事は、最初の3つのポイントについてです。



これらのトピックに興味がある場合は、catにようこそ。

背景

むかしむかし、以前の記事で話した音楽アプリを書いたとき、ピアノを切る必要に直面しました。 これは私の最初のAndroidアプリケーションであり、Androidは現在とまったく同じではなかったので、最初のバージョンでは、多かれ少なかれ機能するコンポーネントを作成するために1つ以上のバージョンを作成しました。 スクロールのために、特定の間隔でスクロールの速度を周期的に低下させ、次のタスクが受信されるまで眠り込んだ別のストリームがありました。 対話性はゼロでした。

今、しばらくして、私は最初のプロジェクトに似た多くの方法でプロジェクトを書いていますが、品質と機能がまったく異なるレベルであり、再びピアノが必要です。 それが私が話すことです。

コンポーネント開発

ビューまたはSurfaceView？

私が自分のために出した経験則は、できるだけ複雑なグラフィックス（ゲーム、ビデオ）である種の変化する状態を常に描画するコンポーネントが必要でない限り、可能な限りViewを使用し、SurfaceViewを避けることです。 その他の場合はすべて、ビューが選択されます。 また、SurfaceViewを使用すると、レイアウトでこのコンポーネントをアニメーション化する機能が失われることを考慮する必要があります。

初期段階

それでは、始めましょう。最初に行うことは、android.view.Viewの継承者である新しいクラスを作成することです。 PianoViewと呼びましょう。

public class PianoView extends View { public PianoView(Context context, AttributeSet attrs) { super(context, attrs); } @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ご覧のとおり、コンテキストと一連の属性が渡されるコンストラクターがあります。 onDrawメソッドで、コンポーネントを描画します。 このメソッドは、たとえばアニメーションのフレームごとにビューを再描画する必要が生じるたびに呼び出されます。

キーボードレンダリング。 グラフィックリソース。

キーを描画するには、標準のAndroidツールを使用します：セレクター、9パッチ描画可能。

白鍵については、次の9パッチイメージを用意しました。 Holoの標準の青いバックライトを使用して、強調表示状態にすることにしました。





黒の場合：





そして、それぞれに対してセレクターを作成しました：

 <?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:drawable="@drawable/white_key_pressed" android:state_pressed="true"></item> <item android:drawable="@drawable/white_key"></item> </selector>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

あとは、 context.getResourses.getDrawable();



を使用してコード内でこれらのDrawableを取得するだけcontext.getResourses.getDrawable();

キーボードレンダリング。 コード

そのため、コンポーネントコードをきれいに保つために、すべてのキーボードレンダリングを削除し、これに必要な情報をKeyboardクラスに保存しました。 onDraw



そのメソッドを呼び出すだけです。

 protected void onDraw(Canvas canvas) { if (measurementChanged) { measurementChanged = false; keyboard.initializeInstrument(getMeasuredHeight(), getContext()); instrumentWidth = keyboard.getWidth(); } keyboard.draw(canvas); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ピアノがどのようにレンダリングされるかについては、退屈なテキストとコードでスペースを取りすぎているため、詳細に説明しません。 詳細を検討したい人は誰でも私のコードを受け取って見ることができます。 ここでは、原理のみを説明します。



最初のステップは初期化です。 初期化には、キーの配列の計算が含まれます。

 Key[] keysArray;
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

これが私たちのモデルです。 各アイテムはキーです。 キーは、その座標（コンポーネント座標系）と寸法、黒か白か、または現在押されているかどうかを知っています。

 class Key { float startX; float endX; float startY; float endY; int midiCode; boolean black; boolean pressed = false; void setBounds(float startX, float endX, float startY, float endY) { this.startX = startX; this.startY = startY; this.endX = endX; this.endY = endY; } boolean containsPoint(float x, float y) { return startX <= x && endX > x && startY <= y && endY > y; } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

このプロセスは、コンポーネントの物理サイズが変更されるたびに発生し、キーボードが初期化されます（onMeasureメソッドで単純にtrueに設定されるのは、measurementChangedフラグの役割です）。 したがって、描画するたびにキーの位置を計算しません。







ここでは、コンポーネントの高さに基づいてキーの幅を計算し、キーの配列を作成します。 最初に、最初のオクターブが構築され、次に、残りのオクターブを取得するために必要な回数だけ複製され、X軸に沿ってシフトされます。 また、各キーにはMIDIコードがあり、それに応じてサウンドを再生できます。 Midiコードには、エンドツーエンドの番号付けがあります。 最初のキーコードはSTART_MIDI_CODEです。 キーのコードは、配列内のキーの開始コードとインデックスを追加することで計算されます。



次は、キーのレンダリングです。 キーの配列全体のループでは、次のように描画します。

 private void drawSingleKey(Canvas canvas, Key key, int firstVisibleKey, int lastVisibleKey) { Drawable drawable = key.black ? blackKeyDrawable : whiteKeyDrawable; drawable.setState(new int[] { key.pressed ? android.R.attr.state_pressed : -android.R.attr.state_pressed }); drawable.setBounds((int) key.startX, (int) key.startY, (int) key.endX, (int) key.endY); drawable.draw(canvas); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

レンダリングは2段階で行われます。最初に白いキーを描画し、次にオーバーレイがないように黒を描画する必要があるためです。 9キーパッチが長方形ではなく、切り抜きで作成されている場合、これを回避できます。 さらに、これは余分な再描画されたピクセルを削除するのに役立ちますが、この記事の目的のために、すべてをできるだけプリミティブに保ちましょう。



完了、ツールは正常に描画されました：







悪くない。 もちろん、キーをクリックしても何も起こりません。 それを修正しましょう。

主要な相互作用

ユーザーのクリックとの相互作用では、通常onTouchEventメソッドが再定義され、ユーザーが何をしたかを決定します-指のタッチ、ジェスチャの実行、ダブルタッチ、ロングタッチなど。

プラットフォームから最初に提供されたGestureDetectorクラスを使用します。



ツールにprivate GestureDetector gestureDetector;



フィールドを追加しましょうprivate GestureDetector gestureDetector;



そしてそれを初期化する

 private void init() { if (!isInEditMode()) { gestureDetector = new GestureDetector(getContext(), gestureListener); } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

リスナーGestureListenerをコンストラクターに渡します。これは、ジェスチャーが検出されたときに検出器からコールバックを取得する場所です。

  private OnGestureListener gestureListener = new GestureDetector.SimpleOnGestureListener() { public boolean onDown(MotionEvent e) { if (keyboard.touchItem(e.getX(), e.getY())) { invalidate(); } return true; } public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY) { resetTouchFeedback(); return true; } public boolean onSingleTapUp(MotionEvent e) { resetTouchFeedback(); return super.onSingleTapUp(e); } };
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

そのため、操作アルゴリズムは単純です.onDownメソッドでは、キーストロークの座標をキーボードに渡し、そこで押されたキーを検索します（touchItemメソッドは、配列全体をスキャンすることなく、キーの座標によってインデックスを計算します）。 キーが見つかった場合、そのキーは押されたものとしてマークされ、無効化と呼ばれ、再描画につながります。

他の方法では、押されたキーをリセットします（スクロール、指を離したときなど）。 これは、たとえばListViewの場合と同様に行われます。シートのスクロールを開始すると、選択がリセットされます。

次のステップは、検出器をコンポーネントに接続することです。 これは非常に簡単に行われます：

 public boolean onTouchEvent(MotionEvent event) { int action = event.getAction(); if (action == MotionEvent.ACTION_CANCEL) { resetTouchFeedback(); } return super.onTouchEvent(event) || gestureDetector.onTouchEvent(event); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

また、アクションがACTION_CANCEL



であるかどうACTION_CANCEL



確認します。この場合、選択もリセットします。これは、GestureDetectorが何らかの方法でそれに反応しないためです。突然発生した場合、永久に選択されたキーが残る可能性があります



私たちはチェックします：







やあ、今はもう少し生きているようだ。 しかし、まだキーボードの一部しか表示されていません...問題ではありません。スクロールを止めましょう。

コンポーネントへのスクロールの追加

それでは、まず、コンテンツをどのようにシフトするかを考えてみましょう。 最も簡単な方法は、何もシフトせず、同じ方法で描画することですが、キャンバス自体を移動することです。 Canvasクラスを使用すると、自分でアフィン変換を実行できます。

シンプルなフィールドを追加しましょう

 private int xOffset;
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

クラスに。



次のような構造でonDrawメソッドを拡張します。

 protected void onDraw(Canvas canvas) { if (measurementChanged) { measurementChanged = false; keyboard.initializeInstrument(getMeasuredHeight(), getContext()); instrumentWidth = keyboard.getWidth(); } canvas.save(); canvas.translate(-xOffset, 0); keyboard.updateBounds(xOffset, canvasWidth + xOffset); keyboard.draw(canvas); canvas.restore(); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

私たちがやったことを見てみましょう：

• canvas.save（）-キャンバスの現在の状態を記憶します。 一種のブレークポイントを作成します
• canvas.translate（）-キャンバスを指定された距離だけシフトします
• canvas.restore（）-キャンバスを元の状態に復元します。

また、キーボードクラスにupdateBoundsメソッドを追加しました。 これにより、画面を超えてキーが描画されないように、左右の表示境界線を渡すことができます。 そのような最適化。



描画段階でのスクロールのサポートを追加したので、ユーザーインタラクション-GestureDetectorにスクロールを追加します。 onScrollの変更：

 public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY) { resetTouchFeedback(); xOffset += distanceX; if (xOffset < 0) { xOffset = 0; } if (xOffset > instrumentWidth - getMeasuredWidth()) { xOffset = instrumentWidth - getMeasuredWidth(); } invalidate(); return true; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

完了しました。今、キーボード上で指を動かすと、キーボードを離れることなくキュートにスクロールします。 しかし、これだけでは十分ではありません。 指を引っ張り、キーボードの慣性を起動できるようにしたい-投げる。

幸いなことに、画面上で指の速度と指が移動した距離を計算する必要はありません。 これらはすべて、最愛のGestureDetectorによって行われます。 onFlingメソッドをオーバーライドするだけです。 彼は、ユーザーが逃げていることと、彼の最初の特性を見つけるのに役立ちます。 しかし、スクロールの状態を追跡し、開始ポイントともちろんポイントの間を補間するには、別のコンポーネント-Scroller、またはその兄弟-OverScroller（今後グロー効果を追加したい）が必要です。 Scrollerは、Androidのあらゆるタイプのスクロールに非常に役立つコンポーネントであり、無数の内部コンポーネントで使用され、標準のスクロール動作を実装しています。

スクローラーを追加します。

 private OverScroller scroller;
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

コンポーネントコンストラクターで初期化します。



次に、GestureDetectorを次のように変更します。

 private OnGestureListener gestureListener = new GestureDetector.SimpleOnGestureListener() { public boolean onDown(MotionEvent e) { scroller.forceFinished(true); if (keyboard.touchItem(e.getX() / scaleX + xOffset, e.getY())) { invalidate(); } return true; } public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) { scroller.fling(xOffset, 0, (int) -velocityX, 0, 0, instrumentWidth - getMeasuredWidth(), 0, 0); return true; } // ... };
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

コードからわかるように、最初のオフセットと速度でスクローラーを起動し、スクロールの最小と最大を示します。



次のステップはonDrawです

 protected void onDraw(Canvas canvas) { if (scroller.computeScrollOffset()) { xOffset = scroller.getCurrX(); } if (measurementChanged) { measurementChanged = false; keyboard.initializeInstrument(getMeasuredHeight(), getContext()); instrumentWidth = keyboard.getWidth(); } canvas.save(); canvas.scale(scaleX, 1.0f); canvas.translate(xOffset , 0); keyboard.updateBounds(xOffset , canvasWidth + xOffset ); keyboard.draw(canvas); canvas.restore(); if (!scroller.isFinished()) { ViewCompat.postInvalidateOnAnimation(this); } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ここで何が変わったのですか？ scroller.computeScrollOffset（）を呼び出すアニメーションの各フレームで、このメソッドは、スクローラーがアニメーション化されている場合にtrueを返し、xOffset変数の現在の値を取得します。

アニメーションには一連の再描画が含まれるため、メソッドの最後で、スクローラーのアニメーション化が完了しているかどうかを確認し、完了していない場合は、アニメーションの次のフレームを割り当てます。 したがって、スクローラーが作業を完了するか、強制的に停止されるまで、onDrawメソッドが可能な限り頻繁に呼び出され、コンポーネントを描画します。



これで、コンポーネントはうまくスクロールし、フリングをサポートします。 しかし、何か不足していますよね？ 以下の標準スクロールバーが十分ではありません。 問題ありません。

標準のコールバーを追加する

標準のスクロールバーを追加することは呪文のようなもので、特別な秘密はなく、一連のアクションがあります。

最初に、すべての標準のスクロール属性をサポートすることをコンポーネントに伝える必要があります。 これを行うには、valuesディレクトリにattrs.xmlファイルを作成し、次の定義を追加します。

 <declare-styleable name="View"> <attr name="android:fadeScrollbars" /> <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" /> </declare-styleable>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

次に、コンストラクタに追加します。

 setVerticalScrollBarEnabled(false); setHorizontalScrollBarEnabled(true); TypedArray a = context.obtainStyledAttributes(R.styleable.View); initializeScrollbars(a); a.recycle();
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

次のステップは、スクロールバーのサイズと位置を制御する3つの最も簡単な方法を再定義することです。

  protected int computeHorizontalScrollExtent() { return canvasWidth; } @Override protected int computeHorizontalScrollOffset() { return xOffset; } @Override protected int computeHorizontalScrollRange() { return instrumentWidth; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

コードはそれ自体を物語っています-最初の方法ではコンポーネントの幅を指定し、2番目ではスクロールの現在のオフセットを指定し、3番目ではキーボード全体のサイズを指定します（画面を超えます）。 これで、必要なときにこれらのスクロールバーを「起動」することができます。 基本Viewクラスは、このための特別なawakenScrollBars（）メソッドを提供します。 次の行を追加します。

 if (!awakenScrollBars()) { invalidate(); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

GestureDetectorListenerのonScrollおよびonFlingメソッドへ。



結果-標準のスクロールバーは私たちの目を楽しませます。

おわりに

そのため、このパートでは、コンポーネントの作成、Drawableを使用した描画、さまざまなDrawableの状態、対話時の視覚フィードバック、スクロール、フリングジェスチャ、スクロールバーの作成について検討しました。



この記事は十分に長かったので、いくつかの部分に分けることにしました。



次の部分では、以下について説明します。

1. 画面を回転させるときにコンポーネントの状態を保存する
2. オーバースクロールのバックライトを追加する
3. XMLでパラメーターを渡す
4. ピンチズーム

また、最適化、既製ビットマップの使用とキャンバスへの描画（drawCircle、drawTextなど）の違い、再描画の削除などについて説明する第3部の計画もあります。 2つは読者を喜ばせ、3つ目の外観に関心があります:)



この一連の記事の完成したプロジェクトのソースは、githubのgoo.gl/VDeuwにあります。 これらは開発中のプロジェクトからの切り抜きであり、必要ではないと思われるコードを見つけた場合は、気付かずに切り落とすのを忘れた可能性があります。