前期知識

Android自定義輪播效果

ViewPager一屏多頁面顯示兩側無觸摸/滑動事件

ViewPage實作一屏多頁面顯示（進階版）

DialogFragment的簡單使用

效果展示

實作思路

1、利用 FrameLayout 父布局中 壓兩層 ImageView （穿衣服的在上面、mei穿衣服的在下面）

2、監聽 上層 ImageView onTouch 事件，當手指在上面移動時，以手指為基準 將40*40像素大小的像素點 設定為透明，

注意點：BitmapFactory.decodeResource 獲取的圖片是 只讀 的，要復制一份之后 才能進行可修改操作，要不然會報錯的，

報錯如下圖所示：

xml布局代碼：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="30dp"
        android:text="摸我試試"
        android:gravity="center"
        android:textColor="@color/aqua"
        android:layout_margin="20dp"/>
    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <ImageView
            android:id="@+id/iv_show_after"
            android:layout_width="match_parent"
            android:layout_height="match_parent"/>

        <ImageView
            android:id="@+id/iv_show_before"
            android:layout_width="match_parent"
            android:layout_height="match_parent"/>
    </FrameLayout>

    <ImageView
        android:id="@+id/iv_close"
        android:layout_width="match_parent"
        android:layout_height="30dp"
        android:src="@drawable/close"
        android:layout_margin="20dp"/>

</LinearLayout>

java邏輯代碼

package com.wust.mydialog;

import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Color;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewGroup;
import android.view.Window;
import android.view.WindowManager;
import android.widget.ImageView;

import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.fragment.app.DialogFragment;

/**
 * ClassName: MyShowPhotoFragment <br/>
 * Description: <br/>
 * date: 2021/8/9 12:35<br/>
 *
 * @author yiqi<br />
 * @QQ 1820762465
 * @微信 yiqiideallife
 * @技術交流QQ群 928023749
 */
public class MyShowPhotoFragment extends DialogFragment {

    private View mRootView;
    private ImageView iv_close;
    private ImageView iv_show_after;
    private ImageView iv_show_before;
    private int mCurNum;
    private int[] mImgData;
    private int[] mImgDataAfter;
    private Bitmap before_up_bm;

    public void setPhotoNum(int[] imgData,int[] imgDataAfter,int num) {
        this.mImgDataAfter = imgDataAfter;
        this.mImgData = imgData;
        this.mCurNum = num;
    }

    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        mRootView = getLayoutInflater().inflate(R.layout.photo_fragment, null, false);
        initBitmap();
        bindView();
        bindData();
        return mRootView;
    }

    private void initBitmap() {
        //這個獲取的是只讀的
        Bitmap before = BitmapFactory.decodeResource(getResources(), mImgData[mCurNum]);
//        Bitmap bitmap = Bitmap.createBitmap(before.getWidth(), before.getHeight(), Bitmap.Config.ARGB_8888);
        //所以需要復制一份 bm
        before_up_bm = before.copy(Bitmap.Config.ARGB_8888, true);

    }

    private void bindView() {
        iv_close = mRootView.findViewById(R.id.iv_close);
        iv_show_after = mRootView.findViewById(R.id.iv_show_after);
        iv_show_before = mRootView.findViewById(R.id.iv_show_before);
    }

    private void bindData() {
        iv_show_before.setImageResource(mImgData[mCurNum]);
        iv_show_before.setOnTouchListener(new View.OnTouchListener() {
            @Override
            public boolean onTouch(View v, MotionEvent event) {
                switch (event.getAction()){
                    case MotionEvent.ACTION_MOVE:
                    {
                        int newX = (int) event.getX();
                        int newY = (int) event.getY();
                        System.out.println(" newX -> " + newX + " newY -> " + newY);
                        for (int i = -20; i < 20; i++) {
                            for (int j = -20; j < 20; j++){
                                if (i+newX>0&&i+newX<before_up_bm.getWidth()&&j+newY>0&&j+newY<before_up_bm.getHeight()){
                                    // setPixel() 設定像素的方法
                                    before_up_bm.setPixel(newX+i,newY+j, Color.TRANSPARENT);
                                }
                            }
                        }
                    }
                    break;
                }
                iv_show_before.setImageBitmap(before_up_bm);
                return true;
            }
        });
        iv_show_after.setImageResource(mImgDataAfter[mCurNum]);
        iv_close.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                dismiss();
            }
        });
    }

}

專案完整代碼：gitee.com