2013-08-25 10 views
5

は、私は以下のように世界中で3つの不規則な形状を持っている:(Androidレイアウト)不規則な形状の画像の上に配置ボタンを配置するか、画像の特定の領域のタッチ検出(タッチ可能な領域)を得るためのソリューションですか?私のAndroidのアプリケーションで

enter image description here

だから私は、レイアウト内で画像全体を置きました。 Globe is just an image .There is no role of globe here.今、私は世界中にある不規則な形の画像の上に1つのボタンを配置したいと思います。

ボタンは常に長方形ですが、I want to get touch event for irregular shape,not for rectangular area.です。どうしてこの3つの不規則な形状に3つのボタンを置くことができますか、それとも解決策がありますか?アクティビティで各ボタンの異なるイベントを処理できるようにしますか?

私はこのタスクを達成する方法について考えていません。これについて私を案内してください。

アドバイスや提案がありますか?

ご協力いただければ幸いです。

+0

タッチ位置を取得! http://stackoverflow.com/questions/3476779/how-to-get-the-touch-position-in-android –

+0

@twntee:最新の質問をご覧ください。 – Ponting

+1

これはあなたを助けます:http://stackoverflow.com/questions/11283653/real-custom-shape-of-button また、あなたのレイアウトを仮想セグメント/円弧に分割し、タッチイベントを処理することができます。 – JiTHiN

答えて

0

は、私がヒントを得て、最終的に私は以下のように解を得た:

は以下のように、XMLファイルに

ImageViewのを使用し

をRelativeLayoutを使用しました。

私が何をしたかということです

<ImageView 
     android:id="@+id/btn1" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_alignBottom="@+id/glob2" 
     android:layout_marginBottom="24dp" 
     android:layout_marginLeft="80.5dp" 
     android:contentDescription="@string/profile_picture_description" 
     android:src="@drawable/pick_matches_background" /> 

ここでは、それに応じて余白を設定します(左/右/下/上)。活動で

、のonCreateメソッドで

宣言

Bitmap btmp; and 
ImageView img; 

// initialized image view 
img = (ImageView) findViewById(R.id.btn1); 
img.setOnClickListener(new View.OnClickListener() { 

public void onClick(View v) { 

     // call your method here 

    } 
}); 

StateListDrawable sdCreateTrip = (StateListDrawable) img 
      .getDrawable(); 

btmp = ((BitmapDrawable) sdCreateTrip.getCurrent()) 
      .getBitmap(); 

あなたは今行く準備ができています。

+0

マージンがハードコードされた値を使用しているようですが、それはどのように異なる画面サイズで動作しますか? – Mike

0

フラグFLAG_WINDOW_IS_OBSCUREDフラグは過去に私にとってはうまくいきましたが、正しく動作するにはいくつかの作業が必要になることがあります。それは試してみる価値があるかもしれませんが、正直言って私はそれが何が曖昧でないのかを正確に判断する方法はまだ分かりませんので、ここでは適用できないかもしれません。

static OnTouchListener listenerMotionEvent = new OnTouchListener() { 
    @Override 
    public boolean onTouch(View view, MotionEvent motionEvent) { 
     if ((motionEvent.getFlags() | MotionEvent.FLAG_WINDOW_IS_OBSCURED) != MotionEvent.FLAG_WINDOW_IS_OBSCURED) { 
      return false; 
      // View is not obscured so we pass on the event 
     } 

     // Process the motion event here and return true if you consume it 
}; 
+0

最新の質問をご覧ください。 – Ponting

1

私はこれをテストしていませんが、うまくいくと思います。私はあなたがそれを微調整し修正する必要があると確信しています。

3つのボタンがエイリアシングのない3つの異なる色で、他のすべてのピクセルが純粋な黒色である背景画像のコピーを作成します。 JPG圧縮の成果物を持たないように、PNGである必要があります。これはあなたのマスクになります。 3つのボタンしかないので、純粋な赤、緑、青を使うことができます。アスペクト比が同じであれば、元の画像よりも解像度が低い可能性があります。

サブクラスImageViewをサブクラス化し、代わりにサブクラスを使用して背景を描画します。 ImageViewのサブクラス化されたバージョンをマスクイメージとしてBitmapとして渡します。

class TouchMaskImageView extends ImageView { 
    ...constructors 

    public void setTouchMask(Bitmap mask){ 
     this.mMask = mask; 
    } 

    public interface OnTouchedListener{ 
     public void onTouched(MotionEvent event, int colorTouched); 
     public void onTouchCanceled(); 
    } 

    public void setOnTouchedListener(OnTouchedListener listener){ 
     this.mOnTouchedListener = listener; 
    } 

    @Override 
    public boolean onTouchEvent(MotionEvent event) { 
     float x = event.getX(); 
     float y = event.getY(); 
     if (mOnTouchedListener != null && mMask != null) { 
      if (x >=0 && x < (float)getWidth() && 
       y >=0 && y < (float)getHeight()) { 
       //Next two lines will be more complicated if 
        // you aren't using scaleType fitXY 
       int maskX = (int) x * mMask.getWidth()/getWidth(); 
       int maskY = (int) y * mMask.getWidth()/getHeight(); 
       int maskColor = mask.getPixel(maskX, maskY); 
       mOnTouchedListener.onTouched(event, maskColor); 
      } else if (event.getAction()==MotionEvent.UP){ 
       //released finger outside image view 
       mOnTouchedListener.onTouchCanceled(); 
      } 
     } 
    } 
} 

ボタンに似たタッチロジックを処理するOnTouchedListenerを作成できます。状態を追跡する必要があります。ここに例がありますが、マルチタッチのときにこれが壊れるかどうかはわかりません。また、最初の指のアクションマスクを設定し、getAction()の代わりにgetActionMasked()を使用する必要があります。

public void onTouched(MotionEvent event, int colorTouched){ 
    switch(mState){ 
    case STATE_WAITING: 
     if (event.getAction()==MotionEvent.ACTION_DOWN){ 
      switch (colorTouched){ 
      case 0xffff0000: //red 
       mTouchMaskImageView.setImageResource(R.drawable.redButtonDown); 
       mState = STATE_LATCHED_RED; 
       break; 
      case 0xff00ff00: //green 
       mTouchMaskImageView.setImageResource(R.drawable.greenButtonDown); 
       mState = STATE_LATCHED_GREEN; 
       break; 
      case 0xff0000ff: //blue 
       mTouchMaskImageView.setImageResource(R.drawable.blueButtonDown); 
       mState = STATE_LATCHED_BLUE; 
       break; 
      } 
     } 
     break; 
    case STATE_LATCHED_RED: 
     switch (event.getAction()){ 
     case (MotionEvent.ACTION_MOVE): 
      if (colorTouched = 0xffff0000) 
       mTouchMaskImageView.setImageResource(R.drawable.redButtonDown); 
      else 
       mTouchMaskImageView.setImageResource(R.drawable.defaultImage); 
      break; 
     case (MotionEvent.ACTION_UP) 
      if (colorTouched = 0xffff0000) 
       performRedButtonAction(); 
      mTouchMaskImageView.setImageResource(R.drawable.defaultImage); 
      mState = STATE_WAITING; 
      break; 
     } 
     break; 
    case etc. for other two latched colors... 
     break; 
    } 
} 

public void onTouchCanceled(){ 
    mTouchMaskImageView.setImageResource(R.drawable.defaultImage); 
    mState = STATE_WAITING; 
} 

あなたは4つの可能な状態を表現するために、あなたの画像4つの異なるコピーが必要になりますので、これは、多少の粗です。時間をかけてメモリを節約し、より速く走らせたい場合は、正しい位置にオーバーレイされた3つのボタンの別々のイメージビューを使用してレイアウトを設定し、イメージの変更をターゲットにしてください。しかし、これは非常に難しいでしょう。あらゆる画面サイズに対して完璧に整列させる必要があるからです。

+0

おい、これは非常に高いレベルのコンセプトのようです。私はちょうどナイーブな開発者です。答えはありがたいです。このスレッドhttp://stackoverflow.com/questions/11283653/real-custom-shape-of-buttonは私の問題を解決します。 – Ponting

+0

その解決策は簡単ですが、ボタンのように動作するようにするには、2番目のコードブロックに似たような処理を行う必要があります(ボタン画像を押したときにボタン画像が変化し、解放する前に指を離してください)。各ボタンに別々の画像ビューを使用しますか? – Tenfour04

+0

はい。別の画像ビューを使用しています。 – Ponting

0

Photoshopで画像をスライスし、その画像をwebviewヘルプに配置しますか?答え以上のことから

関連する問題