如何将图像作为FrameLayout中的背景和内部图像让用户在布局中拖动

时间:2014-02-01 00:08:47

标签: android xml android-layout

我正在寻找一个以图像为背景的布局,并添加一个图像,允许我只在布局中拖动。我怎样才能实现它?

所以让我们说红色区域是我的framelayout,橙色框是图像: enter image description here

应用程序加载橙色全部到底部和左侧,然后我想让用户只将它拖到红色区域。

If (orange.x goes beyond left of the red box) {
     the orange box.x = the orange box + the orange box.width;
}
else if (orange.x goes beyond the right of the red box) {
     the orange box.x = the orange box - the orange box.width;
}

else If (orange.y goes beyond top of the red box) {
     the orange box.y = the orange box + the orange box.width;
}
else if (orange.y goes beyond the bottom of the red box) {
     the orange box.y = the orange box - the orange box.width;
}
else { // do not allow use to drag outside, if they do drag it outside leave the orange box the last known position inside the red box area
     y = orange box.y; //get x coordinate of the orange box
     x = orange box.x; //get y coordinate of the orange box
}

所以我可以这样设置我的XML:

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="fill_parent"
 android:layout_height="fill_parent"
 android:background="@drawable/redboxarea">

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <ImageView  
    android:layout_width="@dimen/widthsmall" 
    android:layout_height="@dimen/heightsmall" 
    android:scaleType="fitXY"
    android:src="@drawable/orangebox"
    android:layout_alignParentBottom="true"
    android:layout_alignParentLeft="true" />

</RelativeLayout>

</FrameLayout>

如何实现Android代码以实现我想要做的事情?或者是其他推荐的东西?

1 个答案:

答案 0 :(得分:1)

您可以创建自定义视图(扩展View类)。

将位图绘制到画布(这都在您的自定义视图类中)

   @Override
public void onDraw(Canvas canvas) {
    super.onDraw(canvas);

//mPosX and mPosY default to 0, then on later redraws correspond to where the object was last dragged.

    canvas.drawBitmap(mSourceImage, mPosX, mPosY, null);    

}

然后覆盖onTouchEvent方法

   @Override
public boolean onTouchEvent(MotionEvent ev) {
    final int action = ev.getAction();
    switch (action & MotionEvent.ACTION_MASK) {
    case MotionEvent.ACTION_DOWN: {
        final float x = ev.getX();
        final float y = ev.getY();

        mLastTouchX = x;
        mLastTouchY = y;


        // Save the ID of this pointer ( this is for multitouch)
        mActivePointerId = ev.getPointerId(0);
        break;
    }

    case MotionEvent.ACTION_MOVE: {
        // Find the index of the active pointer and fetch its position
        final int pointerIndex = ev.findPointerIndex(mActivePointerId);
       //Get new location
        final float x = ev.getX(pointerIndex);
        final float y = ev.getY(pointerIndex);

        //Compare to old location
        final float dx = x - mLastTouchX;
        final float dy = y - mLastTouchY;

        //set new resting location
        mPosX += dx;
        mPosY += dy;

        mLastTouchX = x;
        mLastTouchY = y;

        //Invalidate the view and force a redraw with the new values for mPosX and mPosY.
        invalidate();
        break;
    }

在您的主要活动代码中:

//instantiate the view object                   
touchView = new YourCustomViewClass(this, mPicturePath);

//set the size of your view
                touchView.setLayoutParams(new LayoutParams(700, 200));

//add it to your main activity layout
                mainLayout.addView(touchView);