Question

我正在尝试在Android中创建一个board game，其中包含一个顶部有许多磁贴的电路板，可以在电路板上以及从播放器的机架中拖动。这与Wordfeud游戏非常相似。

电路板尺寸固定。我希望用户能够捏缩放，并在电路板周围平移，并在电路板周围拖动瓷砖。放大/缩小时，瓷砖必须与电路板一起缩放。

我正在努力寻找正确的方法进行设置。我想过并试过两种方法：

使用HorizontalScrollView结合ScrollView和RelativeLayout作为孩子。然后，此RelativeLayout包含所有图块。这样可以正常工作，但是如何实现缩放以进行缩放？
使用此示例缩放和平移视图：http://android-developers.blogspot.nl/2010/06/making-sense-of-multitouch.html。但是，我如何在此视图的顶部添加平铺缩放＆amp;和这个观点一起平移？

这两个选项似乎都不是正确的解决方案。我有兴趣了解其他Android开发者如何设置它并希望它们为我提供正确的方向。

Answer 1

好的，首先，我建议忘记第一个解决方案，这不是很简单。第二个是一个好的开始。

这是我的解决方案：

活动类

import android.os.Bundle;
import android.app.Activity;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Point;
import android.view.Window;
import android.view.WindowManager;
import android.widget.ImageView;
import android.widget.RelativeLayout;

public class MainActivity extends Activity {

    private RelativeLayout mMainLayout;
    private InteractiveView mInteractiveView;

    private int mScreenWidth;
    private int mScreenHeight;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);     

        // Set fullscreen mode
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,
                WindowManager.LayoutParams.FLAG_FULLSCREEN);

        setContentView(R.layout.activity_main);  

        // Retrieve the device dimensions to adapt interface
        mScreenWidth = getApplicationContext().getResources()
                .getDisplayMetrics().widthPixels;
        mScreenHeight = getApplicationContext().getResources()
                .getDisplayMetrics().heightPixels;        

        mMainLayout = (RelativeLayout)findViewById(R.id.mainlayout);

        // Create the interactive view holding the elements
        mInteractiveView = new InteractiveView(this);
        mInteractiveView.setLayoutParams(new RelativeLayout.LayoutParams(-2,-2 ));
        mInteractiveView.setPosition(-mScreenWidth/2, -mScreenHeight/2);

        mMainLayout.addView(mInteractiveView);

        // Adding a background to this view
        ImageView lImageView = new ImageView(this);
        lImageView.setLayoutParams(new RelativeLayout.LayoutParams(-1,-1));
        lImageView.setImageResource(R.drawable.board);

        mInteractiveView.addView(lImageView);

        // Adding a tile we can move on the top of the board
        addElement(50, 50);     
    }

    // Creation of a smaller element
    private void addElement(int pPosX, int pPosY) {

        BoardTile lBoardTile = new BoardTile(this);
        Bitmap lSourceImage = BitmapFactory.decodeResource(getResources(), R.drawable.tile);
        Bitmap lImage = Bitmap.createScaledBitmap(lSourceImage, 100, 100, true);
        lBoardTile.setImage(lImage);        
        Point lPoint = new Point();
        lPoint.x = pPosX;
        lPoint.y = pPosY;
        lBoardTile.setPosition(lPoint);

        mInteractiveView.addView(lBoardTile);       
}

InteractiveView类只是一个简单的RelativeLayout，可以对夹点和拖动作出反应并保留更多元素：

InteractiveView类

import android.content.Context;
import android.graphics.Canvas;
import android.util.FloatMath;
import android.view.MotionEvent;
import android.view.View;
import android.widget.RelativeLayout;

public class InteractiveView extends RelativeLayout{

    private float mPositionX = 0;
    private float mPositionY = 0;
    private float mScale = 1.0f;

    public InteractiveView(Context context) {
        super(context);     
        this.setWillNotDraw(false);
        this.setOnTouchListener(mTouchListener);
    }   

    public void setPosition(float lPositionX, float lPositionY){
        mPositionX = lPositionX;
        mPositionY = lPositionY;
    }

    public void setMovingPosition(float lPositionX, float lPositionY){
        mPositionX += lPositionX;
        mPositionY += lPositionY;
    }

    public void setScale(float lScale){ 
        mScale = lScale;
    }

    @Override
    protected void dispatchDraw(Canvas canvas) {        
        canvas.save();      
        canvas.translate(getWidth() / 2, getHeight() / 2);  
        canvas.translate(mPositionX*mScale, mPositionY*mScale);     
        canvas.scale(mScale, mScale);
        super.dispatchDraw(canvas);
        canvas.restore();
    }   

    // touch events
    private final int NONE = 0;
    private final int DRAG = 1;
    private final int ZOOM = 2;
    private final int CLICK = 3;

    // pinch to zoom
    private float mOldDist;
    private float mNewDist;
    private float mScaleFactor = 0.01f;

    // position
    private float mPreviousX;
    private float mPreviousY;

    int mode = NONE;

    @SuppressWarnings("deprecation")
    public OnTouchListener mTouchListener = new  OnTouchListener(){
        public boolean onTouch(View v, MotionEvent e) {
            float x = e.getX();
            float y = e.getY();
            switch (e.getAction()) {
            case MotionEvent.ACTION_DOWN: // one touch: drag            
                mode = CLICK;
                break;
            case MotionEvent.ACTION_POINTER_2_DOWN: // two touches: zoom            
                mOldDist = spacing(e);          
                mode = ZOOM; // zoom
                break;
            case MotionEvent.ACTION_UP: // no mode          
                mode = NONE;
                break;
            case MotionEvent.ACTION_POINTER_2_UP: // no mode
                mode = NONE;            
                break;
            case MotionEvent.ACTION_MOVE: // rotation
                if (e.getPointerCount() > 1 && mode == ZOOM) {
                    mNewDist = spacing(e) - mOldDist;   

                    mScale += mNewDist*mScaleFactor;
                    invalidate();

                    mOldDist = spacing(e);  

                } else if (mode == CLICK || mode == DRAG) {
                    float dx = (x - mPreviousX)/mScale;
                    float dy = (y - mPreviousY)/mScale;

                    setMovingPosition(dx, dy);
                    invalidate();
                    mode = DRAG;                        
                }
                break;
            }
            mPreviousX = x;
            mPreviousY = y;
            return true;
        }
    };

    // finds spacing
    private float spacing(MotionEvent event) {
        float x = event.getX(0) - event.getX(1);
        float y = event.getY(0) - event.getY(1);
        return FloatMath.sqrt(x * x + y * y);
    }
}

然后，我们有一个＆＃34;元素＆＃34;将在此InteractiveView上创建切片的类（称为BoardTile）。这个类更复杂，因为视图不占用整个屏幕，我们必须测试触摸事件是否在对象的边界内。

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.Point;
import android.graphics.Rect;
import android.graphics.Region;
import android.view.MotionEvent;
import android.view.View;

public class BoardTile extends View
{
    private Bitmap mCardImage;
    private final Paint mPaint = new Paint();
    private final Point mSize = new Point();
    private final Point mStartPosition = new Point();
    private Region mRegion;

    public BoardTile(Context context)
    {
        super(context);
        mRegion = new Region();
        this.setOnTouchListener(mTouchListener);
    }

    public final Bitmap getImage() { return mCardImage; }
    public final void setImage(Bitmap image)
    {
        mCardImage = image;
        setSize(mCardImage.getWidth(), mCardImage.getHeight());
    }

    @Override
    protected void onDraw(Canvas canvas)
    {
        Point position = getPosition();
        canvas.drawBitmap(mCardImage, position.x, position.y, mPaint);
    }

    public final void setPosition(final Point position)
    {
        mRegion.set(position.x, position.y, position.x + mSize.x, position.y + mSize.y);
    }

    public final Point getPosition()
    {
        Rect bounds = mRegion.getBounds();
        return new Point(bounds.left, bounds.top);
    }

    public final void setSize(int width, int height)
    {
        mSize.x = width;
        mSize.y = height;

        Rect bounds = mRegion.getBounds();
        mRegion.set(bounds.left, bounds.top, bounds.left + width, bounds.top + height);
    }

    public final Point getSize() { return mSize; }

    public OnTouchListener mTouchListener = new  OnTouchListener(){
        @Override
        public boolean onTouch(View v, MotionEvent event) {

            // Is the event inside of this view?
            if(!mRegion.contains((int)event.getX(), (int)event.getY()))
            {
                return false;
            }

            if(event.getAction() == MotionEvent.ACTION_DOWN)
            {
                mStartPosition.x = (int)event.getX();
                mStartPosition.y = (int)event.getY();
                bringToFront();
                return true;
            }
            else if(event.getAction() == MotionEvent.ACTION_MOVE)
            {
                int x = 0, y = 0;

                x = (int)event.getX() - mStartPosition.x;            
                y = (int)event.getY() - mStartPosition.y;            

                mRegion.translate(x, y);
                mStartPosition.x = (int)event.getX();
                mStartPosition.y = (int)event.getY();

                invalidate();

                return true;
            }
            else
            {   
                return false;
            }
        }
    };
}

这不是一个完整的解决方案，您还必须在磁贴上调度触摸事件，以便它们考虑InteractiveView的规模。

希望它会帮助你开始！

Answer 2

感谢@PopGorn，他指出了我正确的方向。我四处寻找一些包括调度触摸事件的例子。我最终使用了这个很好的答案：https://stackoverflow.com/a/12497670/757073

如何创建zoomable＆amp;在它上面有很多可拖动视图的pannable视图？

2 个答案: