您当前的位置： 首页 > 慢生活 > 程序人生 网站首页程序人生

安卓中實現區域選擇、可拖動的區域支持邊角縮放

发布时间：2021-06-29 21:18:48编辑：雪饮阅读（）

 在一些軟件中你經常會看到一些讓用戶在某個畫面中去拖動一個區域，就是從一個大的畫面中選擇一個小的區域，那個這個可拖動的區域其邊角也是可以縮放的，像是windows的窗口應用一樣。那麽典型的如格式工廠裏面的去除logo的功能就有這樣的操作方式。

但是呢畢竟是pc端的，那麽我們安卓手機端如何實現呢？且看下面我們來一步步的去實現它們。
那麽要實現這個呢，我們就需要自定義視圖了，主要是利用canvas（這家夥真出名，在web前端中js也有這個api，自html5之後出現的），那麽其實現的具體類如：DragScaleView.java:
package com.example.penguinvideoedit.videodelogo;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;

/**
 *
 * @author Cj
 *
 */
public class DragScaleView extends View implements View.OnTouchListener {
    protected int screenWidth;
    protected int screenHeight;
    protected int lastX;
    protected int lastY;
    private int oriLeft;
    private int oriRight;
    private int oriTop;
    private int oriBottom;
    private int dragDirection;
    private static final int TOP = 0x15;
    private static final int LEFT = 0x16;
    private static final int BOTTOM = 0x17;
    private static final int RIGHT = 0x18;
    private static final int LEFT_TOP = 0x11;
    private static final int RIGHT_TOP = 0x12;
    private static final int LEFT_BOTTOM = 0x13;
    private static final int RIGHT_BOTTOM = 0x14;
    private static final int CENTER = 0x19;
    private int offset = 20;
    protected Paint paint = new Paint();

    /**
     * 初始化获取屏幕宽高
     */
    protected void initScreenW_H() {
        screenHeight = getResources().getDisplayMetrics().heightPixels - 40;
        screenWidth = getResources().getDisplayMetrics().widthPixels;
    }

    public DragScaleView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        setOnTouchListener(this);
        initScreenW_H();
    }

    public DragScaleView(Context context, AttributeSet attrs) {
        super(context, attrs);
        setOnTouchListener(this);
        initScreenW_H();
    }

    public DragScaleView(Context context) {
        super(context);
        setOnTouchListener(this);
        initScreenW_H();
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        paint.setColor(Color.RED);
        //設置紅色邊框粗細
        paint.setStrokeWidth(4.0f);
        paint.setStyle(Paint.Style.STROKE);
        /*
        * 參數1紅色框默認距離左邊距離
        * 參數2紅色框默認距離頂部距離
        * 參數3右邊
        * 參數4底部
        * */
        canvas.drawRect(offset, offset, getWidth() - offset, getHeight()
                - offset, paint);
    }

    @Override
    public boolean onTouch(View v, MotionEvent event) {
        int action = event.getAction();
        if (action == MotionEvent.ACTION_DOWN) {
            oriLeft = v.getLeft();
            oriRight = v.getRight();
            oriTop = v.getTop();
            oriBottom = v.getBottom();
            lastY = (int) event.getRawY();
            lastX = (int) event.getRawX();
            dragDirection = getDirection(v, (int) event.getX(),
                    (int) event.getY());
        }
        // 处理拖动事件
        delDrag(v, event, action);
        invalidate();
        return false;
    }

    /**
     * 处理拖动事件
     *
     * @param v
     * @param event
     * @param action
     */
    protected void delDrag(View v, MotionEvent event, int action) {
        switch (action) {
            case MotionEvent.ACTION_MOVE:
                int dx = (int) event.getRawX() - lastX;
                int dy = (int) event.getRawY() - lastY;
                switch (dragDirection) {
                    case LEFT: // 左边缘
                        left(v, dx);
                        break;
                    case RIGHT: // 右边缘
                        right(v, dx);
                        break;
                    case BOTTOM: // 下边缘
                        bottom(v, dy);
                        break;
                    case TOP: // 上边缘
                        top(v, dy);
                        break;
                    case CENTER: // 点击中心-->>移动
                        center(v, dx, dy);
                        break;
                    case LEFT_BOTTOM: // 左下
                        left(v, dx);
                        bottom(v, dy);
                        break;
                    case LEFT_TOP: // 左上
                        left(v, dx);
                        top(v, dy);
                        break;
                    case RIGHT_BOTTOM: // 右下
                        right(v, dx);
                        bottom(v, dy);
                        break;
                    case RIGHT_TOP: // 右上
                        right(v, dx);
                        top(v, dy);
                        break;
                }
                if (dragDirection != CENTER) {
                    v.layout(oriLeft, oriTop, oriRight, oriBottom);
                }
                lastX = (int) event.getRawX();
                lastY = (int) event.getRawY();
                break;
            case MotionEvent.ACTION_UP:
                dragDirection = 0;
                break;
        }
    }

    /**
     * 触摸点为中心->>移动
     *
     * @param v
     * @param dx
     * @param dy
     */
    private void center(View v, int dx, int dy) {
        int left = v.getLeft() + dx;
        int top = v.getTop() + dy;
        int right = v.getRight() + dx;
        int bottom = v.getBottom() + dy;
        if (left < -offset) {
            left = -offset;
            right = left + v.getWidth();
        }
        if (right > screenWidth + offset) {
            right = screenWidth + offset;
            left = right - v.getWidth();
        }
        if (top < -offset) {
            top = -offset;
            bottom = top + v.getHeight();
        }
        if (bottom > screenHeight + offset) {
            bottom = screenHeight + offset;
            top = bottom - v.getHeight();
        }
        v.layout(left, top, right, bottom);
    }

    /**
     * 触摸点为上边缘
     *
     * @param v
     * @param dy
     */
    private void top(View v, int dy) {
        oriTop += dy;
        if (oriTop < -offset) {
            oriTop = -offset;
        }
        if (oriBottom - oriTop - 2 * offset < 200) {
            oriTop = oriBottom - 2 * offset - 200;
        }
    }

    /**
     * 触摸点为下边缘
     *
     * @param v
     * @param dy
     */
    private void bottom(View v, int dy) {
        oriBottom += dy;
        if (oriBottom > screenHeight + offset) {
            oriBottom = screenHeight + offset;
        }
        if (oriBottom - oriTop - 2 * offset < 200) {
            oriBottom = 200 + oriTop + 2 * offset;
        }
    }

    /**
     * 触摸点为右边缘
     *
     * @param v
     * @param dx
     */
    private void right(View v, int dx) {
        oriRight += dx;
        if (oriRight > screenWidth + offset) {
            oriRight = screenWidth + offset;
        }
        if (oriRight - oriLeft - 2 * offset < 200) {
            oriRight = oriLeft + 2 * offset + 200;
        }
    }

    /**
     * 触摸点为左边缘
     *
     * @param v
     * @param dx
     */
    private void left(View v, int dx) {
        oriLeft += dx;
        if (oriLeft < -offset) {
            oriLeft = -offset;
       }
        if (oriRight - oriLeft - 2 * offset < 200) {
            oriLeft = oriRight - 2 * offset - 200;
        }
    }

    /**
     * 获取触摸点flag
     *
     * @param v
     * @param x
     * @param y
     * @return
     */
    protected int getDirection(View v, int x, int y) {
        int left = v.getLeft();
        int right = v.getRight();
        int bottom = v.getBottom();
        int top = v.getTop();
        if (x < 40 && y < 40) {
            return LEFT_TOP;
        }
        if (y < 40 && right - left - x < 40) {
            return RIGHT_TOP;
        }
        if (x < 40 && bottom - top - y < 40) {
            return LEFT_BOTTOM;
        }
        if (right - left - x < 40 && bottom - top - y < 40) {
            return RIGHT_BOTTOM;
        }
        if (x < 40) {
            return LEFT;
        }
        if (y < 40) {
            return TOP;
        }
        if (right - left - x < 40) {
            return RIGHT;
        }
        if (bottom - top - y < 40) {
            return BOTTOM;
        }
        return CENTER;
    }

    /**
     * 获取截取宽度
     *
     * @return
     */
    public int getCutWidth() {
        return getWidth() - 2 * offset;
    }

    /**
     * 获取截取高度
     *
     * @return
     */
    public int getCutHeight() {
        return getHeight() - 2 * offset;
    }
}
這裏面呢，有相關注釋，只管用就行，基本上很少調整，如果要深度定制則是另外一回事了。
有了這個自定義佈局之後我們就可以直接在佈局文件中使用了，則佈局文件如：activity_video_de_logo.xml:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".videodelogo.VideoDeLogoActivity">
    <LinearLayout
        android:id="@+id/linearLayout"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal">
            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:onClick="selectVideo"
                android:text="選擇一個視頻" />
        </LinearLayout>
        <!--播放按鈕控制區域-->
        <LinearLayout
            android:id="@+id/video_control_buttons"
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:layout_gravity="center"
            android:gravity="center"
            android:orientation="horizontal"
            android:visibility="gone">

            <Button
                android:id="@+id/bt_play"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:onClick="play"
                android:text="播放"
                android:visibility="gone" />

            <Button
                android:id="@+id/bt_pause"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:onClick="pause"
                android:text="暂停" />

            <Button
                android:id="@+id/bt_stop"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:onClick="stop"
                android:text="停止" />
        </LinearLayout>
        <!--輸出標題區域-->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:visibility="gone">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="输出标题:"></TextView>

            <EditText
                android:id="@+id/cut_title"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text=""
                android:textAlignment="center" />
        </LinearLayout>
        <!--seekbar區域-->
        <LinearLayout
            android:id="@+id/seekbar_linearLayout"
            android:layout_width="match_parent"
            android:layout_height="20dp"
            android:gravity="center_vertical"
            android:orientation="horizontal"
            android:visibility="gone">

            <TextView
                android:id="@+id/seekbar_linearLayout_t1"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:text="----" />

            <SeekBar
                android:id="@+id/seekbar"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:layout_gravity="center"
                android:layout_weight="0.8"
                android:gravity="center" />

            <TextView
                android:id="@+id/seekbar_linearLayout_t2"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:text="----" />
        </LinearLayout>
        <!--x、y、cx、cy-->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal">
            <!--x與y-->
            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:orientation="vertical">

                <LinearLayout
                    android:id="@+id/x"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:orientation="horizontal">

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="x" />

                    <EditText
                        android:layout_width="50dip"
                        android:layout_height="wrap_content"
                        android:inputType="number" />

                    <Button
                        android:layout_width="50dip"
                        android:layout_height="wrap_content"
                        android:text="+" />

                    <Button
                        android:layout_width="50dip"
                        android:layout_height="wrap_content"
                        android:text="-" />
                </LinearLayout>

                <LinearLayout
                    android:id="@+id/y"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:orientation="horizontal">

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="y" />

                    <EditText
                        android:layout_width="50dip"
                        android:layout_height="wrap_content"
                        android:inputType="number" />

                    <Button
                        android:layout_width="50dip"
                        android:layout_height="wrap_content"
                        android:text="+" />

                    <Button
                        android:layout_width="50dip"
                        android:layout_height="wrap_content"
                        android:text="-" />
                </LinearLayout>
            </LinearLayout>
            <!--cx與cy-->
            <RelativeLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1">

                <LinearLayout
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_alignParentRight="true"
                    android:orientation="vertical">

                    <LinearLayout
                        android:id="@+id/cx"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:orientation="horizontal">

                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:text="cx" />

                        <EditText
                            android:layout_width="50dip"
                            android:layout_height="wrap_content"
                            android:inputType="number" />

                        <Button
                            android:layout_width="50dip"
                            android:layout_height="wrap_content"
                            android:text="+" />

                        <Button
                            android:layout_width="50dip"
                            android:layout_height="wrap_content"
                            android:text="-" />
                    </LinearLayout>

                    <LinearLayout
                        android:id="@+id/cy"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:orientation="horizontal">

                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:text="cy" />

                        <EditText
                            android:layout_width="50dip"
                            android:layout_height="wrap_content"
                            android:inputType="number" />

                        <Button
                            android:layout_width="50dip"
                            android:layout_height="wrap_content"
                            android:text="+" />

                        <Button
                            android:layout_width="50dip"
                            android:layout_height="wrap_content"
                            android:text="-" />
                    </LinearLayout>
                </LinearLayout>
            </RelativeLayout>
        </LinearLayout>
        <!--去除水印listview-->
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="去除水印"
            android:textAlignment="center" />

        <ListView
            android:id="@+id/logoList"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"></ListView>
        <FrameLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content">
            <SurfaceView
                android:id="@+id/sv"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"></SurfaceView>
            <com.example.penguinvideoedit.videodelogo.DragScaleView
                android:id="@+id/ds"
                android:layout_width="100dip"
                android:layout_height="100dip"
                android:clickable="true"
                />
        </FrameLayout>
    </LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

這裏呢，你需要注意下，首先我們上面實現這個自定義佈局的時候是以最小200來計算的，具體可以根據自身情況來調整了。

那麽另外一個就是這個佈局文件中使用這個自定義佈局了，我們可以看到這裏clickable是必須要為true的，否則是無法拖拽的。
那麽還有就是對於如何將這個可拖動可邊角縮放的家夥遮罩于視頻之上呢？在html中有所謂的z-index，雖然安卓中有類似的，但html去年的時候我就遇到有情況發生就是video標簽好像即便用了z-index也是不見得能遮罩住，那麽另外一個就是在安卓中類似z-index今天我也嘗試了，可以是可以的，但是只能將這個可拖拽的框框放上去，至於其後面的背景，好像不能，不過後面的白色背景也可能是由於我的其它bug導致的，後來發現另外一個白色背景問題，其占用了我一塊兒空白區域，什麽東西都沒有放置，真的是浪費，或許那個問題和這個問題是相同的。但不管怎樣來説。
對於視頻在安卓端被遮罩，或者説是被加入一些控件這方面來説，正確的做法我感覺不能用z-index類似的，當然了，如果你非要用，那麽你可以用：
android:translationZ="999dip"
類似這樣去實現。
這裏就先不談這個了，這裏就介紹下我覺得比較權威點的實現方案。
用FrameLayout佈局中嵌入你要放入的子view，在FrameLayout放入的view會按順序進行層級結構形成類似z-index這種效果，我感覺吧，這樣設計好像比z-index好上一丟丟，至少在代碼擺放的時候，因爲在html中z-index這種，經常會感覺這個浮動在頂層的容器，放什麽地方都可以，沒有一個規範，感覺有點凌亂。
那麽這裏如，你可以將FrameLayout中第一個放入surfaceview（這裏我用視頻佈局用的是比較原生的，今天才發現安卓其實有更好的，更簡單的好像叫videoview，不過據説沒有surfaceview靈活，那麽對於這種深度定制開發來説，建議的話就是用surfaceview更好吧）
第一個放入surfaceview之後，那麽第二個就放入我們今天的主要實現的這個可以拖拽及邊角縮放的view進去。
那麽儅我們看看具體的實現效果吧