Android自定義View控件，實現拖動和位置調換

自定義MediaView控件繼承View，實現拖動位置調用功能

重寫draw方法和touch方法

package com.example.media;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Matrix;
import android.graphics.Paint;
import android.os.Build;
import android.util.AttributeSet;
import android.util.Log;
import android.view.MotionEvent;
import android.view.View;
import androidx.annotation.Nullable;
import androidx.annotation.RequiresApi;

public class MediaView extends View {
    private float startX;
    private float endX;
    private float moveStartX;
    private float moveX;
    private float offsetX = 0;
    private float item0Left = 140.0f;
    private float item0Top = 20.0f;
    private float item1Left = 10.0f;
    private float item1Top = 60.0f;
    private float item2Left = 350.0f;
    private float item2Top = 60.0f;
    private Bitmap bitmap;//342
    private Bitmap bitmapLeftChild;//268
    private Bitmap bitmapRightChild;//268
    private float bitmapWidth = 342.0f;
    private float bitmapHeight = 342.0f;
    private Matrix matrix = null;
    private float fScale = 1.0f;

    private float item0Position = 140.0f;
    private float item1Position = 10.0f;
    private float item2Position = 350.0f;

    private int itemPosition = 0;

    private Paint mPaint = new Paint();

    public MediaView(Context context) {
        super(context);
        init();
    }

    public MediaView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    public MediaView(Context context, @Nullable AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        init();
    }

    @RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
    public MediaView(Context context, @Nullable AttributeSet attrs, int defStyleAttr, int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);
    }

    public void init() {
        Log.d("init:", "init view");
        // 獲取顯示圖片
        bitmap = BitmapFactory.decodeResource(this.getContext().getResources(), R.drawable.icon_bg);
        bitmapLeftChild = BitmapFactory.decodeResource(this.getContext().getResources(), R.drawable.icon_child_bg);
        bitmapRightChild = BitmapFactory.decodeResource(this.getContext().getResources(), R.drawable.icon_child_bg);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        // get padding
        int paddingLeft = getPaddingLeft();
        int paddingRight = getPaddingRight();
        int paddingTop = getPaddingTop();
        int paddingBottom = getPaddingBottom();
        // get view width
        int width = getWidth() - paddingLeft - paddingRight;
        // get view height
        int height = getHeight() - paddingTop - paddingBottom;
        // 繪製View，左上角座標（0+paddingLeft,0+paddingTop），右下角座標（width+paddingLeft,height+paddingTop）
        //canvas.drawRect(0 + paddingLeft,0 + paddingTop,width + paddingLeft,height + paddingTop, mPaint);

        // layer 123
        if (offsetX < 0) {
            switch (itemPosition) {
                case 0:
                    canvas.drawBitmap(bitmap, item2Left, item2Top + 40.0f,null);
                    canvas.drawBitmap(bitmap, item1Left, item1Top,null);
                    canvas.drawBitmap(bitmap, item0Left, item0Top,null);
                    break;
                case 1:
                    canvas.drawBitmap(bitmap, item0Left, item0Top,null);
                    canvas.drawBitmap(bitmap, item2Left, item2Top + 40.0f,null);
                    canvas.drawBitmap(bitmap, item1Left, item1Top,null);
                    break;
                case 2:
                    canvas.drawBitmap(bitmap, item0Left, item0Top,null);
                    canvas.drawBitmap(bitmap, item1Left, item1Top,null);
                    canvas.drawBitmap(bitmap, item2Left, item2Top + 40.0f,null);
                    break;
                default:
                    break;
            }
        } else {
            switch (itemPosition) {
                case 0:
                    canvas.drawBitmap(bitmap, item1Left, item1Top,null);
                    canvas.drawBitmap(bitmap, item2Left, item2Top + 40.0f,null);
                    canvas.drawBitmap(bitmap, item0Left, item0Top,null);
                    break;
                case 1:
                    canvas.drawBitmap(bitmap, item2Left, item2Top + 40.0f,null);
                    canvas.drawBitmap(bitmap, item0Left, item0Top,null);
                    canvas.drawBitmap(bitmap, item1Left, item1Top,null);
                    break;
                case 2:
                    canvas.drawBitmap(bitmap, item1Left, item1Top,null);
                    canvas.drawBitmap(bitmap, item0Left, item0Top,null);
                    canvas.drawBitmap(bitmap, item2Left, item2Top + 40.0f,null);
                    break;
                default:
                    break;
            }

        }
        //canvas.drawBitmap(bitmap, item2Left, item2Top + 40.0f,null);
        //canvas.drawBitmap(bitmap, item1Left, item1Top,null);
        //canvas.drawBitmap(bitmap, item0Left, item0Top,null);
        //canvas.drawBitmap(bitmap, new Rect(0,0,342,342), new Rect(50,0,250,200), null);
        //bitmap = Bitmap.createScaledBitmap(bitmap, 100, 100, true);
        //canvas.drawBitmap(bitmap, null, new Rect(0, 0, 100, 100), null);
        //scaleBitmap(bitmap, 0.1f);
        Log.d("draw:", "draw");
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                startX = event.getX();
                moveStartX = startX;
                Log.d("start x:", Float.toString(startX));
                break;
            case MotionEvent.ACTION_UP:
                endX = event.getX();
                if (Math.abs(endX - startX) < bitmap.getWidth() / 2) {
                    item0Left = item0Position;
                    item1Left = item1Position;
                    item2Left = item2Position;
                } else {
                    if (itemPosition == 0) {
                        if (item0Left <= 10.0f) {
                            item0Left = 10.0f;
                            item1Left = 350.0f;
                            item2Left = 140.0f;
                            itemPosition = 2;
                        } else if (item0Left >= 350.0f) {
                            item0Left = 350.0f;
                            item1Left = 140.0f;
                            item2Left = 10.0f;
                            itemPosition = 1;
                        }
                    } else if (itemPosition == 1) {
                        if (item1Left <= 10.0f) {
                            item0Left = 140.0f;
                            item1Left = 10.0f;
                            item2Left = 350.0f;
                            itemPosition = 0;
                        } else if (item1Left >= 350.0f) {
                            item0Left = 10.0f;
                            item1Left = 350.0f;
                            item2Left = 140.0f;
                            itemPosition = 2;
                        }
                    } else if (itemPosition == 2) {
                        if (item2Left <= 10.0f) {
                            item0Left = 350.0f;
                            item1Left = 140.0f;
                            item2Left = 10.0f;
                            itemPosition = 1;
                        } else if (item2Left >= 350.0f) {
                            item0Left = 140.0f;
                            item1Left = 10.0f;
                            item2Left = 350.0f;
                            itemPosition = 0;
                        }
                    }
                    item0Position = item0Left;
                    item1Position = item1Left;
                    item2Position = item2Left;
                }
                Log.d("end x:", Float.toString(endX));
                break;
            case MotionEvent.ACTION_MOVE:
                moveX = event.getX();
                offsetX = moveX - moveStartX;
                if (offsetX < 0) {
                    if (itemPosition == 0) {
                        item0Left -= Math.abs(offsetX);
                        //item1Left += Math.abs(offsetX);
                        //item2Left -= Math.abs(offsetX);
                    } else if (itemPosition == 1) {
                        item1Left -= Math.abs(offsetX);
                        //item0Left += Math.abs(offsetX);
                        //item2Left += Math.abs(offsetX);
                    } else if (itemPosition == 2) {
                        item2Left -= Math.abs(offsetX);
                        //item0Left += Math.abs(offsetX);
                        //item1Left -= Math.abs(offsetX);
                    } else {
                        Log.d("left move Position:", Integer.toString(itemPosition));
                    }
                } else if (offsetX > 0) {
                    if (itemPosition == 0) {
                        item0Left += Math.abs(offsetX);
                        //item1Left -= Math.abs(offsetX);
                        //item2Left += Math.abs(offsetX);
                    } else if (itemPosition == 1) {
                        item1Left += Math.abs(offsetX);
                        //item0Left -= Math.abs(offsetX);
                        //item2Left += Math.abs(offsetX);
                    } else if (itemPosition == 2) {
                        item2Left += Math.abs(offsetX);
                        //item0Left += Math.abs(offsetX);
                        //item1Left -= Math.abs(offsetX);
                    } else {
                        Log.d("right move Position:", Integer.toString(itemPosition));
                    }
                } else {
                    Log.d("offsetX:", Float.toString(offsetX));
                }

                Log.d("move:", Float.toString(offsetX));
                moveStartX = moveX;
                break;
        }
        // reset draw
        invalidate();
        return true;
    }

}

XML中使用

<com.example.media.MediaView
    android:id="@+id/media_view"
    android:background="#ff0989"
    android:layout_width="654dp"
    android:layout_height="318dp"
    android:layout_marginLeft="560dp"
    android:layout_marginRight="66dp"
    android:layout_marginTop="84dp"
    android:visibility="gone"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    />

MainJava中獲取引用

MediaView mMediaView = (MediaView) findViewById(R.id.media_view);