如何创建类似于TorchLight的UI。例如：FlashLight Zaphrox

Question

我在相机闪光灯应用程序中工作。

我可以启动和停止相机LED。我有关于手电筒的图形用户界面设计的问题。

我想创建像FlashLight Zaphrox一样的图形用户界面。

我猜是：

您可以看到，当单击手电筒按钮时，图像会发生变化。视图仅在单击手电筒按钮时更改。

到目前为止，我尝试的是：

        Display display = getWindowManager().getDefaultDisplay(); 
        width = display.getWidth();
        height = display.getHeight();

        imageView=(ImageView)findViewById(R.id.imageId);

        imageView.setOnTouchListener(new OnTouchListener() {

            @Override
            public boolean onTouch(View view, MotionEvent me) {

                Toast.makeText(ImageClicker.this,me.getRawX()+" "+me.getRawY(), Toast.LENGTH_SHORT).show();

                Log.i("View--Width & Height",view.getWidth()+" "+view.getHeight());
                Log.i("View -- Measured Width & Height",view.getMeasuredWidth()+" "+view.getMeasuredHeight());
                Log.i("Simple X Y Coordiantes",me.getX()+" "+me.getY());
                Log.i("Raw Coordinates",me.getRawX()+" "+me.getRawY());
                Log.i("Display Matrix",width+" "+height);
                return false;
            }
        });

对于两个不同大小的模拟器，我得到的结果是：

对于320x480

09-07 16:32:28.439: INFO/View--Width & Height(2305): 320 43
09-07 16:32:28.439: INFO/View -- Measured Width & Height(2305): 320 43
09-07 16:32:28.449: INFO/Simple X Y Coordiantes(2305): 160.0 21.0
09-07 16:32:28.449: INFO/Raw Coordinates(2305): 160.0 264.0
09-07 16:32:28.449: INFO/Display Matrix(2305): 320 480

对于480x800

09-07 16:33:22.454: INFO/View--Width & Height(410): 480 64
09-07 16:33:22.464: INFO/View -- Measured Width & Height(410): 480 64
09-07 16:33:22.474: INFO/Simple X Y Coordiantes(410): 240.0 31.0
09-07 16:33:22.474: INFO/Raw Coordinates(410): 240.0 437.0
09-07 16:33:22.505: INFO/Display Matrix(410): 480 800

编辑过的

根据难以置信应用的回答：Code。但目前还没有结果。

我不知道如何处理这样的点击事件。

我希望拥有与Flashlight Zaphrox相同的用户界面。

我想在我的应用程序中创建同样的效果。我该怎么做呢？如果能用例子来解释就更好了。

Answer 1

创建一个在特定区域(称为标志)捕捉触摸事件的画布，如-

public class CustomView extends View{

    private int mFlagX = -1;
    private int mFlagY = -1;
    private Bitmap mBitmap = null;
    private Paint mPaint = null;
    private boolean isFlagHidden = false;
    private int mBoundX = -1;
    private int mBoundY = -1;

    //play with these values to listen the click more closer to flag
    public final int CLOSER = 50;
    public final int CLOSE = 100;

    public CustomView(Context context, AttributeSet aSet) 
    { 
        super(context, aSet); 
        //load our bitmap (flag image)
        mBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.transperent);
        //create a paint brush
        mPaint = new Paint();
        mPaint.setColor(Color.TRANSPARENT);
    }

    @Override
    public void onDraw(Canvas canvas)
    {
        //initialize
        if ((mFlagX < 1) || (mFlagY < 1)) {

                   //adjust these values for listening area
                    mFlagX = (int) (getWidth() / 2) - mBitmap.getWidth()/ 2 ;
            mFlagY = (int)getHeight() / 2) - mBitmap.getHeight() / 2 ;
            mBoundX = (int)getWidth() - mBitmap.getWidth();
            mBoundY = (int)getHeight() - mBitmap.getHeight();
        }
        //draw background
        canvas.drawRect(0, 0, getWidth(), getHeight(), mPaint);
        //draw the flag
        if (!isFlagHidden) {
            canvas.drawBitmap(mBitmap, mFlagX, mFlagY, null);
        }
    }

    public void hideTheFlag()
    {           
        isFlagHidden = true;
        //force redraw
        invalidate();   
    }

    public void giveUp(){
        isFlagHidden = false;
        //force redraw
        invalidate();
    }   

    public int takeAGuess(float x, float y)
    {   

        //this is our "pretty closer" area
        Rect prettyClose = new Rect(mFlagX - CLOSE, mFlagY - CLOSE, mFlagX+mBitmap.getWidth() + CLOSE, mFlagY+mBitmap.getHeight() + CLOSE);
        //normalize
        if (prettyClose.left < 0) prettyClose.left = 0;
        if (prettyClose.top < 0) prettyClose.top = 0;
        if (prettyClose.right > mBoundX) prettyClose.right = mBoundX;
        if (prettyClose.bottom > mBoundY) prettyClose.bottom = mBoundY;

        //this is our "really closer" area
        Rect reallyClose = new Rect(mFlagX - CLOSER, mFlagY - CLOSER, mFlagX+mBitmap.getWidth() + CLOSER, mFlagY+mBitmap.getHeight() + CLOSER);
        //normalize
        if (reallyClose.left < 0) reallyClose.left = 0;
        if (reallyClose.top < 0) reallyClose.top = 0;
        if (reallyClose.right > mBoundX) reallyClose.right = mBoundX;
        if (reallyClose.bottom > mBoundY) reallyClose.bottom = mBoundY;

        //this is the area that contains our flag
        Rect bullsEye = new Rect(mFlagX , mFlagY , mFlagX+mBitmap.getWidth(), mFlagY+mBitmap.getHeight());

        //check to see where on the board the user pressed
        if (bullsEye.contains((int) x, (int)y)) {
            //found it
            isFlagHidden = false;
            invalidate();
            return 1;
        } else if (reallyClose.contains((int) x, (int)y)) {
            //really closer
            return 2;
        } else if (prettyClose.contains((int)x, (int)y)) {
            //pretty closer
            return 3;
        } else {
            //far away
            return 4;
        }
    }
}

现在，在您的活动中，重写onTouch()以侦听触摸标志-

 @Override
public boolean onTouch(View v, MotionEvent event)
{
    if (v.getId() == R.id.the_canvas)
    {
        if (event.getAction() == MotionEvent.ACTION_DOWN)
        {
            if (isFlagHidden) 
            {
                switch (mCustomView.takeAGuess(event.getX(), event.getY()))
                {
                   case 1:
                         mCustomView.giveUp();  

                          /*
                             YOUR CODE GOES HERE
                          */
                         Toast.makeText(getApplicationContext(), "bull's eye", Toast.LENGTH_SHORT).show();                  

                         break;
                    case 2:
                        Toast.makeText(getApplicationContext(), "really closer", Toast.LENGTH_SHORT).show();
                        break;
                    case 3:                 
                        Toast.makeText(getApplicationContext(), "pretty closer", Toast.LENGTH_SHORT).show();
                        break;
                    case 4:
                        Toast.makeText(getApplicationContext(), "far away", Toast.LENGTH_SHORT).show();
                        break;
                }
            }
        }
        return true;
    }
    return false;
}   

参考：Capture the flag: A tutorial on Android’s Canvas class and Touch event handler

Answer 2

创建自定义视图，覆盖onTouchEvent并检查坐标。

Answer 3

您可以像这样使用RelativeLayout并将按钮放在ImageView上，而不是实现自定义视图的onTouch

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    <ImageView android:layout_width="wrap_content"
        android:layout_marginTop="100dp" android:layout_height="wrap_content"
        android:background="@drawable/bg" android:layout_marginLeft="100dp"
        android:id="@+id/imageView1" />
    <Button android:layout_width="wrap_content" android:background="@drawable/exit"
        android:layout_height="wrap_content" android:layout_alignTop="@+id/imageView1"
        android:layout_alignLeft="@+id/imageView1" android:layout_marginLeft="52dp"
        android:layout_marginTop="44dp"></Button>
</RelativeLayout>

检查不同的分辨率

以下是此布局中使用的图像。

main image

button image

​