ViewPage + DialogFragment + Bitmap项目实战

Posted 2021-09-04 我想月薪过万

前期知识

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