• 安卓实现微信朋友圈查看图片功能

    没有效果图的示例简直就是扯淡

    本文主要讲查看大图的功能，九宫格图片的话可以看这一篇文章👇

    👉👉👉安卓自定义加载九宫格图片（完全动态，超简单）👈👈👈

    在这里插入图片描述

    控件通过完全自定义的方式实现，demo里面的全部都是源码，不用以来第三方库，纯原生实现查看图片功能，带拖拽效果，带动画效果。

    源码在最下面👇

    废话不多说，直接看代码吧，因为本篇时基于## 安卓自定义加载九宫格图片（完全动态，超简单） 上修改的，所以大家可以先看看上一篇文章，你会发现从显示图片到查看图片简直很简单。

    MainActivity.class

    import android.net.Uri;
import android.os.Bundle;
import android.util.Log;
import android.widget.ImageView;

import androidx.appcompat.app.AppCompatActivity;

import com.cc.imageiwatcherdemo.imagewatcher.ImageWatcher;
import com.cc.imageiwatcherdemo.imagewatcher.ImageWatcherHelper;
import com.google.android.material.snackbar.Snackbar;

import java.util.ArrayList;
import java.util.List;



/**
 * 主界面
 *
 * @author 小口口、
 */
public class MainActivity extends AppCompatActivity {

    //获取布局
    MyCustomImageLayout mPhotoGridView;

    //查看大图
    public ImageWatcherHelper iwHelper;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mPhotoGridView = findViewById(R.id.image_layout);
        //监听长按事件
        mPhotoGridView.setOnImageLongClickListener((i, imageGroupList, urlList) -> {
            //图片下标+1
            int index = (int) i.getTag() + 1;
            //单个图片的长按事件
            Snackbar.make(findViewById(R.id.cl), "你长按了第" + index + "个图片", 3000).show();
        });
        //监听点击事件
        mPhotoGridView.setOnImageClickListener((i, imageGroupList, urlList) -> {
            List str = new ArrayList<>();
            for (int j = 0; j < urlList.size(); j++) {
                str.add(Uri.parse(urlList.get(j)));
            }
            //方式二
            if (null != iwHelper) {
                iwHelper.show(i, imageGroupList, str);
            }
        });


        //查看大图工具实例化
        //图片长按事件
        iwHelper = ImageWatcherHelper.with(this, new GlideSimpleLoader()) // 一般来讲， ImageWatcher 需要占据全屏的位置
                .setErrorImageRes(R.mipmap.error_picture) // 配置error图标 如果不介意使用lib自带的图标，并不一定要调用这个API
                .setOnPictureLongPressListener((v, uri, pos) -> {
                    //大图模式下长按事件
                    Snackbar.make(findViewById(R.id.cl), "你长按了第" + pos++ + "个图片", 3000).show();
                })
                .setOnStateChangedListener(new ImageWatcher.OnStateChangedListener() {
                    @Override
                    public void onStateChangeUpdate(ImageWatcher imageWatcher, ImageView clicked, int position, Uri uri, float animatedValue, int actionTag) {
                        Log.e("IW", "onStateChangeUpdate [" + position + "][" + uri + "][" + animatedValue + "][" + actionTag + "]");
                    }

                    @Override
                    public void onStateChanged(ImageWatcher imageWatcher, int position, Uri uri, int actionTag) {
                        if (actionTag == ImageWatcher.STATE_ENTER_DISPLAYING) {
                            //点击
                            Snackbar.make(findViewById(R.id.cl), "你点击了第" + position++ + "个图片", 3000).show();
                        } else if (actionTag == ImageWatcher.STATE_EXIT_HIDING) {
                            //退出
                            Snackbar.make(findViewById(R.id.cl), "你退出了第" + position++ + "个图片", 3000).show();
                        }
                    }
                })
                .setIndexProvider(new CustomDotIndexProvider()); //设置指示器


        //点击事件
        findViewById(R.id.txt_1).setOnClickListener(v -> setImage(1));
        findViewById(R.id.txt_2).setOnClickListener(v -> setImage(2));
        findViewById(R.id.txt_3).setOnClickListener(v -> setImage(3));
        findViewById(R.id.txt_4).setOnClickListener(v -> setImage(4));
        findViewById(R.id.txt_6).setOnClickListener(v -> setImage(6));
        findViewById(R.id.txt_9).setOnClickListener(v -> setImage(9));
        findViewById(R.id.txt_15).setOnClickListener(v -> setImage(15));
    }

    /**
     * 根据要求生成集合个数
     *
     * @param number
     */
    private void setImage(int number) {
        //动态相册集合
        ArrayList imageList = new ArrayList<>();
        for (int i = 0; i < number; i++) {
            imageList.add("https://img2.baidu.com/it/u=4067224682,690721702&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=450");
        }
        //设置数据
        mPhotoGridView.setUrlListData(imageList);
    }


    /**
     * 界面返回方法
     */
    @Override
    public void onBackPressed() {
        //必须实现这个方法，不然的话图片大图模式的话，点击返回直接就退出当前界面了
        //正确的应该是图片大图模式的话，点击返回先关闭大图再退出当前界面
        if (!iwHelper.handleBackPressed()) {
            super.onBackPressed();
        }
    }

}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
    • 95
    • 96
    • 97
    • 98
    • 99
    • 100
    • 101
    • 102
    • 103
    • 104
    • 105
    • 106
    • 107
    • 108
    • 109
    • 110
    • 111
    • 112
    • 113
    • 114
    • 115
    • 116
    • 117
    • 118
    • 119
    • 120
    • 121
    • 122
    注：对比上篇文章就可以发现新增了什么东西。超简单。

    • 1

    自定义IndicatorView.class

    import android.content.Context;
import android.util.AttributeSet;
import android.util.DisplayMetrics;
import android.view.WindowManager;
import android.widget.ImageView;
import android.widget.LinearLayout;

import androidx.annotation.Nullable;

import java.util.ArrayList;
import java.util.List;

public class IndicatorView extends LinearLayout {
    private final List dotList = new ArrayList<>();
    private final int size;

    public IndicatorView(Context context) {
        this(context, null);
    }

    public IndicatorView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        DisplayMetrics d = new DisplayMetrics();
        ((WindowManager)context.getSystemService(Context.WINDOW_SERVICE))
                .getDefaultDisplay().getMetrics(d);
        size = (int)(6 * d.density + 0.5);
        setPadding(size, 0, 0, 0);
    }

    public void reset(int count, int select, int normalRes, int selectRes) {
        if (count < 0) {
            count = 0;
        }
        if (select > count) {
            select = count;
        }

        dotList.clear();
        removeAllViewsInLayout();

        if (count > 1) {
            LayoutParams lpDot = new LayoutParams(size, size);
            lpDot.setMargins(0, 0, size, 0);
            for (int i = 0; i < count; i++) {
                ImageView vDot = new ImageView(getContext());
                vDot.setLayoutParams(lpDot);

                vDot.setImageResource(i == select ? selectRes : normalRes);

                dotList.add(vDot);
                addView(vDot);
            }
        }
    }

    public void select(int pos, int normalRes, int selectRes) {
        if (dotList.size() == 0) {
            return;
        }

        pos = pos % dotList.size();

        for (int i = 0; i < dotList.size(); i++) {
            final ImageView vDot = dotList.get(i);
            vDot.setImageResource(i == pos ? selectRes :
                    normalRes);
        }
    }
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69

    自定义GlideSimpleLoader.class

    import com.bumptech.glide.Glide;
import com.bumptech.glide.request.target.SimpleTarget;
import com.bumptech.glide.request.transition.Transition;
import com.cc.imageiwatcherdemo.imagewatcher.ImageWatcher;


/**
 * @author Admin
 */
public class GlideSimpleLoader implements ImageWatcher.Loader {
    @Override
    public void load(Context context, Uri uri, final ImageWatcher.LoadCallback lc) {
        Glide.with(context).load(uri)
                .into(new SimpleTarget() {
                    @Override
                    public void onResourceReady(@NonNull Drawable resource, @Nullable Transition transition) {
                        lc.onResourceReady(resource);
                    }

                    @Override
                    public void onLoadFailed(@Nullable Drawable errorDrawable) {
                        lc.onLoadFailed(errorDrawable);
                    }

                    @Override
                    public void onLoadStarted(@Nullable Drawable placeholder) {
                        lc.onLoadStarted(placeholder);
                    }
                });
    }
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31

    自定义CustomDotIndexProvider.class

    import android.content.Context;
import android.net.Uri;
import android.util.DisplayMetrics;
import android.view.Gravity;
import android.view.View;
import android.view.WindowManager;
import android.widget.FrameLayout;

import com.cc.imageiwatcherdemo.imagewatcher.ImageWatcher;

import java.util.List;



/**
 * 自定义查看图片导航器
 *
 * @author Admin
 */
public class CustomDotIndexProvider implements ImageWatcher.IndexProvider {

    private boolean initLayout;
    private IndicatorView indicatorView;

    @Override
    public View initialView(Context context) {
        FrameLayout.LayoutParams lp = new FrameLayout.LayoutParams(FrameLayout.LayoutParams.WRAP_CONTENT, FrameLayout.LayoutParams.WRAP_CONTENT);
        lp.gravity = Gravity.BOTTOM | Gravity.CENTER_HORIZONTAL;
        indicatorView = new IndicatorView(context);
        indicatorView.setLayoutParams(lp);

        DisplayMetrics d = new DisplayMetrics();
        ((WindowManager) context.getSystemService(Context.WINDOW_SERVICE))
                .getDefaultDisplay().getMetrics(d);
        int size = (int) (50 * d.density + 0.5);
        lp.setMargins(0, 0, 0, size);

        initLayout = false;
        return indicatorView;
    }

    @Override
    public void onPageChanged(ImageWatcher imageWatcher, int position, List dataList) {
        if (!initLayout) {
            initLayout = true;
            indicatorView.reset(dataList.size(), position, R.drawable.b_gray_dcdcdc_oval, R.drawable.b_yellow_ffb100_oval);
        } else {
            indicatorView.select(position, R.drawable.b_gray_dcdcdc_oval, R.drawable.b_yellow_ffb100_oval);
        }
    }
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51

    查看大图的核心代码在demo里面，强烈推荐下载demo，没有积分的可以通过手机号或者email联系我，我发源码给你。因为类比较多，所以这里就不一一贴出来了。

    呐，代码就这些啦，简单吧~~

    附上demo源码。

    源码：源码请点这里

    如果下不了源码，请联系我。

    phone：18588400509
    email：mr.cai_cai@foxmail.com

    如果有什么问题，欢迎大家指导。并相互联系，希望能够通过文章互相学习。

    											                               	---财财亲笔

    • 1
  • 相关阅读:
    SQL server中字段自增：IDENTITY、序列Sequence
    【23真题】碰瓷重邮成电，题目Mini版本！
    QT使用MSVC编译器时中文报错问题
    跟我学Python图像处理丨何为图像的灰度非线性变换
    【洛谷】P3378 【模板】堆
    硕士论文章节划分
    MATLAB使用速成 第五章（MATLAB编程基础）
    02-Linux
    容器批量计算调度引擎Volcano v1.2版本后的资源预留
    docker基本使用
  • 原文地址：https://blog.csdn.net/qq_35840038/article/details/126519313