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

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

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

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

---

控件通过完全自定义的方式实现，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<Uri> 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<String> 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();
        }
    }

}

注：对比上篇文章就可以发现新增了什么东西。超简单。

自定义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<ImageView> 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);
        }
    }
}

自定义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<Drawable>() {
                    @Override
                    public void onResourceReady(@NonNull Drawable resource, @Nullable Transition<? super Drawable> transition) {
                        lc.onResourceReady(resource);
                    }

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

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

自定义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<Uri> 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);
        }
    }
}

---

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

---

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

附上demo源码。

源码：源码请点这里

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

---

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

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

											                               	---财财亲笔