美文网首页
大图浏览+转场动画+图片加载进度监听

大图浏览+转场动画+图片加载进度监听

作者: 22a5d2ee8385 | 来源:发表于2017-10-11 02:27 被阅读0次
开源项目:
------------------------------------------------------------------------------------------------------------------------------------------------
1.需要手动释放资源文件。
2.不能监听back按键,通常需要在基类activity手动处理相应的监听事件和资源的释放。
------------------------------------------------------------------------------------------------------------------------------------------------
需要解决:
------------------------------------------------------------------------------------------------------------------------------------------------
1.替换window实现方式
2.自动释放资源文件,不需要关心生命周期资源释放的类似问题
3.显示图片加载进度,不引入第三方控件,自定义view方式实现进度变化
------------------------------------------------------------------------------------------------------------------------------------------------
下载地址:
------------------------------------------------------------------------------------------------------------------------------------------------
https://github.com/153437803/PhotoView
------------------------------------------------------------------------------------------------------------------------------------------------
使用方法:
------------------------------------------------------------------------------------------------------------------------------------------------
# 需要传入activity引用, 因为内部是通过dialog方式实现
new PhotoLayout.Builder(MainActivity.this)
                        .setPhotoLongPressSave(true) //长按保存图片到图库
                        .setPhotoOpenTransAnim(true) //渐变动画
                        .setPhotoBackgroundColor(Color.BLACK) //背景颜色
                        .setPhotoDefaultPosition(0) //默认索引位置
                        .setPhotoDefaultResource(R.mipmap.ic_launcher)  //默认占位图
                        .setPhotoList(image, image2, image3) //imageview集合
                        .setPhotoUrlList("http://*.jpg", "http://*.jpg", "http://*.jpg") //大图集合
                        .setPhotoLittleUrlList("http://*.jpg", "http://*.jpg", "http://*.jpg") //小图集合
                        .show();
------------------------------------------------------------------------------------------------------------------------------------------------
public class PhotoLayout extends FrameLayout implements ViewPager.OnPageChangeListener {

    private PhotoLayoutAttr attr;

    private PhotoPointView mPhotoPointView;
    private ViewPager viewPager;
    private boolean isPressedBack = false;

    private PhotoDialog mPhotoDialog;
    private Activity mActivity;

    private PhotoLayout(Activity activity, final PhotoLayoutAttr attr) {
        super(activity.getApplicationContext());

        setBackgroundColor(attr.getImageBackgroundColor());
        this.attr = attr;
        this.mActivity = activity;

        // 1.3 创建对象
        int imageDrawableIntrinsicWidth = attr.getDefaultImageDrawableIntrinsicWidth();
        int imageDrawableIntrinsicHeight = attr.getDefaultImageDrawableIntrinsicHeight();
        int imageX = attr.getDefaultImageX();
        int imageY = attr.getDefaultImageY();

        boolean openImageTransAnim = attr.isOpenImageTransAnim();
        ImageView tempImage = new ImageView(getContext());

        tempImage.setVisibility(openImageTransAnim ? View.VISIBLE : View.INVISIBLE);
        addView(tempImage);
        FrameLayout.LayoutParams params = new FrameLayout.LayoutParams(imageDrawableIntrinsicWidth, imageDrawableIntrinsicHeight);
        params.gravity = Gravity.TOP | Gravity.LEFT;
        params.leftMargin = imageX;
        params.topMargin = imageY;
        // 1.2 位置参数
        tempImage.setLayoutParams(params);
        GlideUtil.loadImageOriginal(activity, tempImage, attr.getImageOriginalUrl(), null);

        Log.e("ka22lu--11", "imageUrl = " + attr.getImageOriginalUrl());

        Log.e("ka22lu--11", "imageWidth = " + imageDrawableIntrinsicWidth + ", imageX = " + imageX);
        Log.e("ka22lu--11", "imageHeight = " + imageDrawableIntrinsicHeight + ", imageY = " + imageY);

        int imageWidth = tempImage.getWidth();
        int imageHeight = tempImage.getHeight();

        Log.e("ka22lu--22", "imageWidth = " + imageWidth + ", imageX = " + tempImage.getX());
        Log.e("ka22lu--22", "imageHeight = " + imageHeight + ", imageY = " + tempImage.getY());

        // 2.初始化ViewPager
        viewPager = new ViewPager(activity.getApplicationContext());
        viewPager.setLayoutParams(new LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT));
        viewPager.setVisibility(openImageTransAnim ? View.INVISIBLE : View.VISIBLE);
        viewPager.addOnPageChangeListener(this);
        viewPager.setOffscreenPageLimit(attr.getImageCount() + 2);
        addView(viewPager);

        // 3.指示器
        if (attr.getImageCount() > 1) {
            mPhotoPointView = new PhotoPointView(APP.getInstance().getApplicationContext());
            LayoutParams layoutParams = new LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
            mPhotoPointView.setVisibility(openImageTransAnim ? View.INVISIBLE : View.VISIBLE);
            layoutParams.gravity = Gravity.BOTTOM;
            layoutParams.bottomMargin = 100;
            mPhotoPointView.setLayoutParams(layoutParams);
            mPhotoPointView.attach2ViewPage(viewPager, attr.getImageCount());
            addView(mPhotoPointView);
        }

        // 3.显示大图
        mPhotoDialog = new PhotoDialog(activity);
        mPhotoDialog.setContentView(PhotoLayout.this);
        mPhotoDialog.show();

        mPhotoDialog.setOnBackPressedListener(new PhotoDialog.OnBackPressedListener() {
            @Override
            public void onBackPressed() {

                if (!isPressedBack) {
                    animDismiss();
                    isPressedBack = true;
                }
            }
        });

        // 4.开始动画
        animStart(tempImage);
    }

    /*******************************************************************************************/

    // 开始动画
    private void animStart(final ImageView animImage) {

        Context context = getContext().getApplicationContext();

        DisplayMetrics displayMetrics = context.getResources().getDisplayMetrics();
        int widthPixels = displayMetrics.widthPixels;
        int heightPixels = displayMetrics.heightPixels;

        int startTranX = attr.getDefaultImageX();
        int endTranX = (widthPixels - attr.getDefaultImageDrawableIntrinsicWidth()) / 2;

        int startTranY = attr.getDefaultImageY();
        int endTranY = (heightPixels - attr.getDefaultImageDrawableIntrinsicHeight()) / 2;

        float endScaleVal = widthPixels * 1.f / attr.getDefaultImageDrawableIntrinsicWidth();

        // x 方向放大
        ObjectAnimator scaleXAnima = ObjectAnimator.ofFloat(animImage, "scaleX", animImage.getScaleX(), endScaleVal);
        // y 方向放大
        ObjectAnimator scaleYAnima = ObjectAnimator.ofFloat(animImage, "scaleY", animImage.getScaleY(), endScaleVal);
        // x 方向平移
        ObjectAnimator tranXAnima = ObjectAnimator.ofFloat(animImage, "x", startTranX, endTranX);
        // y 方向平移
        ObjectAnimator tranYAnima = ObjectAnimator.ofFloat(animImage, "y", startTranY, endTranY);

        AnimatorSet animatorSet = new AnimatorSet();
        animatorSet.playTogether(scaleXAnima, scaleYAnima, tranXAnima, tranYAnima);
        boolean openImageTransAnim = attr.isOpenImageTransAnim();
        animatorSet.setDuration(openImageTransAnim ? 500 : 0);
        animatorSet.setStartDelay(100);

        animatorSet.addListener(new AnimatorListenerAdapter() {

            @Override
            public void onAnimationEnd(Animator animation) {

                animImage.setScaleX(1);
                animImage.setScaleY(1);

                // 1.删除模拟过渡动画
                removeView(animImage);
                // 2.显示轮播图
                viewPager.setVisibility(View.VISIBLE);
                if (null != mPhotoPointView) {
                    mPhotoPointView.setVisibility(View.VISIBLE);
                }
                // 3.轮播图设置数据
                PhotoImageAdapter photoImageAdapter = new PhotoImageAdapter(mActivity);
                photoImageAdapter.setImageAttr(attr);
                photoImageAdapter.setImageLayout(PhotoLayout.this);
                viewPager.setAdapter(photoImageAdapter);

                // 图片默认索引
                int imageDefaultPosition = attr.getImageDefaultPosition();
                viewPager.setCurrentItem(imageDefaultPosition);

                if (imageDefaultPosition == 0) {
                    onPageSelected(imageDefaultPosition);
                }
            }
        });
        animatorSet.start();
    }

    // 结束动画
    void animDismiss() {

        if (null != mPhotoPointView) {
            mPhotoPointView.setVisibility(View.INVISIBLE);
        }

        int currentItem = viewPager.getCurrentItem();

        float endScale = attr.getImageDrawableIntrinsicWidth(currentItem) * 1.f / getWidth();
        float endScaleY = (attr.getImageDrawableIntrinsicHeight(currentItem) * 1.f / getHeight());
        float endTranX = (getWidth() - (getWidth() * endScale)) * .5f - attr.getImageX(currentItem);
        float endTranY = (getHeight() - (getHeight() * endScaleY)) * .5f - attr.getImageY(currentItem);

        // x 方向缩小
        ObjectAnimator scaleXAnima = ObjectAnimator.ofFloat(PhotoLayout.this, "scaleX", getScaleX(), endScale);
        // y 方向缩小
        ObjectAnimator scaleYAnima = ObjectAnimator.ofFloat(PhotoLayout.this, "scaleY", getScaleY(), endScale);
        // x 方向平移
        ObjectAnimator tranXAnima = ObjectAnimator.ofFloat(PhotoLayout.this, "x", getTranslationX(), -endTranX);
        // y 方向平移
        ObjectAnimator tranYAnima = ObjectAnimator.ofFloat(PhotoLayout.this, "y", getTranslationY(), -endTranY);

        AnimatorSet animatorSet = new AnimatorSet();
        boolean openImageTransAnim = attr.isOpenImageTransAnim();
        animatorSet.setDuration(openImageTransAnim ? 500 : 0);
        animatorSet.setStartDelay(openImageTransAnim ? 100 : 0);
        animatorSet.playTogether(scaleXAnima, scaleYAnima, tranXAnima, tranYAnima);

        animatorSet.addListener(new AnimatorListenerAdapter() {

            @Override
            public void onAnimationEnd(Animator animation) {
                destoryImageData();
            }

            @Override
            public void onAnimationCancel(Animator animation) {
                super.onAnimationCancel(animation);
                destoryImageData();
            }

            @Override
            public void onAnimationPause(Animator animation) {
                super.onAnimationPause(animation);
                destoryImageData();
            }
        });

        animatorSet.start();
    }

    /**********************************************************************************************/

    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
    }

    @Override
    public void onPageSelected(final int position) {

        final PhotoSubView image = (PhotoSubView) viewPager.getChildAt(position);

        Object tag = image.getTag(image.getId());

        final String bigUrl = attr.getImageUrlList().get(position);

        if (null != tag && tag instanceof String && bigUrl.equals(tag)) {
            return;
        }

        // 1. 设置默认图片
        if (TextUtils.isEmpty(bigUrl)) {

            if (attr.getImageDefaultResource() != -1) {
                image.setImageResource(attr.getImageDefaultResource());
            }

        } else {

            image.setTag(image.getId(), bigUrl);
            GlideUtil.loadImageOriginal(mActivity, image, bigUrl, new OnGlideLoadChangeListener() {
                @Override
                public void onLoadChange(String imageUrl, long loadSize, long totalSize, long percent) {

                    image.setLoadProgress(percent);
                }
            });
        }
    }

    @Override
    public void onPageScrollStateChanged(int state) {
    }

    /**
     * 销毁释放资源文件
     */
    private void destoryImageData() {

        // 移除监听
        if (null != viewPager) {
            viewPager.removeOnPageChangeListener(PhotoLayout.this);
        }

        if (null != mPhotoDialog) {
            mPhotoDialog.cancel();
            mPhotoDialog.dismiss();
        }
    }

    /**********************************************************************************************/

    public static class Builder {

        private Activity activity;
        private OnPhotoChangeListener listener;

        private int imageDefaultPosition = 0;

        // 默认占位图
        private int imageDefaultResource = -1;

        private boolean isOpenImageTransAnim = true;
        private int imageBackgroundColor = Color.BLACK;

        public Builder(Activity activity) {
            this.activity = activity;
        }

        private List<String> imageUrlList;
        private List<String> imageLittleUrlList;

        public Builder setPhotoUrlList(List<String> imageUrlList) {
            this.imageUrlList = imageUrlList;
            return this;
        }

        public Builder setPhotoUrlList(String... imageUrl) {
            this.imageUrlList = Arrays.asList(imageUrl);
            return this;
        }

        public Builder setPhotoLittleUrlList(List<String> imageLittleUrlList) {
            this.imageLittleUrlList = imageLittleUrlList;
            return this;
        }

        public Builder setPhotoLittleUrlList(String... imageLittleUrlList) {
            this.imageLittleUrlList = Arrays.asList(imageLittleUrlList);
            return this;
        }

        private List<ImageView> imageViews;

        public Builder setPhotoList(List<ImageView> imageViews) {
            this.imageViews = imageViews;
            return this;
        }

        public Builder setPhotoList(ImageView... views) {
            this.imageViews = Arrays.asList(views);
            return this;
        }

        public Builder setPhotoOpenTransAnim(boolean isOpenImageTransAnim) {
            this.isOpenImageTransAnim = isOpenImageTransAnim;
            return this;
        }

        // 默认显示第几张图片
        public Builder setPhotoDefaultPosition(int imageDefaultPosition) {
            this.imageDefaultPosition = imageDefaultPosition;
            return this;
        }

        public Builder setPhotoBackgroundColor(int imageBackgroundColor) {
            this.imageBackgroundColor = imageBackgroundColor;
            return this;
        }

        public Builder setPhotoDefaultResource(int imageDefaultResource) {
            this.imageDefaultResource = imageDefaultResource;
            return this;
        }

        public Builder setOnPhotoClickChangeListener(OnPhotoChangeListener listener) {
            this.listener = listener;
            return this;
        }

        private boolean imageLongPressSave;

        /**
         * 长按保存
         *
         * @param imageLongPressSave 长按保存
         * @return
         */
        public Builder setPhotoLongPressSave(boolean imageLongPressSave) {
            this.imageLongPressSave = imageLongPressSave;
            return this;
        }

        public PhotoLayout show() {

            PhotoLayoutAttr attr = new PhotoLayoutAttr();

            if (imageUrlList != null && !imageUrlList.isEmpty()) {
                attr.setImageUrlList(imageUrlList);
            }

            if (imageLittleUrlList != null && !imageLittleUrlList.isEmpty()) {
                attr.setImageLittleUrlList(imageLittleUrlList);
            }

            if (null != listener) {
                attr.setOnPhotoChangeListener(listener);
            }

            attr.setOpenImageTransAnim(isOpenImageTransAnim);
            // 背景颜色
            attr.setImageBackgroundColor(imageBackgroundColor);
            // 默认显示图片位置
            attr.setImageDefaultPosition(imageDefaultPosition);
            // 默认图片占位图
            attr.setImageDefaultResource(imageDefaultResource);
            // 长按保存图片
            attr.setImageLongPressSave(imageLongPressSave);

            for (int i = 0; i < imageViews.size(); i++) {

                ImageView imageOriginal = imageViews.get(i);

                int imageWidth = imageOriginal.getWidth();
                int imageHeight = imageOriginal.getHeight();

                Drawable imageDrawable = imageOriginal.getDrawable();
                int imageDrawableIntrinsicWidth = imageDrawable.getIntrinsicWidth();
                int imageDrawableIntrinsicHeight = imageDrawable.getIntrinsicHeight();

                final int[] local = new int[2];
                imageOriginal.getLocationOnScreen(local);
                int imageX = local[0] + (imageWidth - imageDrawableIntrinsicWidth) / 2;
                int imageY = local[1] - DeviceUtil.getStatusHeight() + (imageHeight - imageDrawableIntrinsicHeight) / 2;

                PhotoLayoutAttr.PhotoImageInfo photoImageInfo = new PhotoLayoutAttr.PhotoImageInfo();
                photoImageInfo.setImageDrawableIntrinsicWidth(imageDrawableIntrinsicWidth);
                photoImageInfo.setImageDrawableIntrinsicHeight(imageDrawableIntrinsicHeight);
                photoImageInfo.setImageX(imageX);
                photoImageInfo.setImageY(imageY);
                attr.addImageLocalInfo(photoImageInfo);
            }

            return new PhotoLayout(activity, attr);
        }
    }
}
class PhotoLayoutAttr {

    // 每一个图片位置信息
    static class PhotoImageInfo{

        // 图片真实显示背景drawable宽度
        private int imageDrawableIntrinsicWidth;
        // 图片真实显示背景drawable高度
        private int imageDrawableIntrinsicHeight;
        // 开始点击图片的x坐标
        private int imageX;
        // 开始点击图片的y坐标
        private int imageY;

        int getImageDrawableIntrinsicWidth() {
            return imageDrawableIntrinsicWidth;
        }

        void setImageDrawableIntrinsicWidth(int imageDrawableIntrinsicWidth) {
            this.imageDrawableIntrinsicWidth = imageDrawableIntrinsicWidth;
        }

        int getImageDrawableIntrinsicHeight() {
            return imageDrawableIntrinsicHeight;
        }

        void setImageDrawableIntrinsicHeight(int imageDrawableIntrinsicHeight) {
            this.imageDrawableIntrinsicHeight = imageDrawableIntrinsicHeight;
        }

        int getImageX() {
            return imageX;
        }

        void setImageX(int imageX) {
            this.imageX = imageX;
        }

        int getImageY() {
            return imageY;
        }

        void setImageY(int imageY) {
            this.imageY = imageY;
        }
    }

    // 长按保存图片
    private boolean imaageLongPressSave = false;
    // 大图集合
    private List<String> imageUrlList;
    // 小图集合
    private List<String> imageLittleUrlList;

    // 图片原始位置信息集合
    private List<ImageView> imageList;
    // 图片原始位置信息集合
    private List<PhotoImageInfo> imageLocalInfoList;
    // 默认position
    private int imageDefaultPosition;
    // 背景颜色
    private int imageBackgroundColor;
    // 图片默认占位图
    private int imageDefaultResource;
    // 是否开启过度动画
    private boolean isOpenImageTransAnim = true;

    private OnPhotoChangeListener onPhotoChangeListener;

    public List<String> getImageUrlList() {
        return imageUrlList;
    }

    public void setImageUrlList(List<String> imageUrlList) {
        this.imageUrlList = imageUrlList;
    }

    public int getImageDefaultPosition() {
        return imageDefaultPosition;
    }

    public void setImageDefaultPosition(int imageDefaultPosition) {
        this.imageDefaultPosition = imageDefaultPosition;
    }

    public List<ImageView> getImageList() {
        return imageList;
    }

    public void setImageList(List<ImageView> imageList) {
        this.imageList = imageList;
    }

    public int getImageBackgroundColor() {
        return imageBackgroundColor;
    }

    public void setImageBackgroundColor(int imageBackgroundColor) {
        this.imageBackgroundColor = imageBackgroundColor;
    }

    public int getImageDefaultResource() {
        return imageDefaultResource;
    }

    public void setImageDefaultResource(int imageDefaultResource) {
        this.imageDefaultResource = imageDefaultResource;
    }

    public boolean isOpenImageTransAnim() {
        return isOpenImageTransAnim;
    }

    public void setOpenImageTransAnim(boolean openImageTransAnim) {
        isOpenImageTransAnim = openImageTransAnim;
    }

    public OnPhotoChangeListener getOnPhotoChangeListener() {
        return onPhotoChangeListener;
    }

    public void setOnPhotoChangeListener(OnPhotoChangeListener onPhotoChangeListener) {
        this.onPhotoChangeListener = onPhotoChangeListener;
    }

    public List<String> getImageLittleUrlList() {
        return imageLittleUrlList;
    }

    public void setImageLittleUrlList(List<String> imageLittleUrlList) {
        this.imageLittleUrlList = imageLittleUrlList;
    }

    public boolean isImaageLongPressSave() {
        return imaageLongPressSave;
    }

    public void setImageLongPressSave(boolean imaageLongPressSave) {
        this.imaageLongPressSave = imaageLongPressSave;
    }

    public List<PhotoImageInfo> getImageLocalInfoList() {
        return imageLocalInfoList;
    }

    public void setImageLocalInfoList(List<PhotoImageInfo> imageLocalInfoList) {
        this.imageLocalInfoList = imageLocalInfoList;
    }

    public int getImageDrawableIntrinsicWidth(int position) {
        return imageLocalInfoList.get(position).getImageDrawableIntrinsicWidth();
    }

    public int getImageDrawableIntrinsicHeight(int position) {
        return imageLocalInfoList.get(position).getImageDrawableIntrinsicHeight();
    }

    public int getImageX(int position) {
        return imageLocalInfoList.get(position).getImageX();
    }

    public int getImageY(int position) {
        return imageLocalInfoList.get(position).getImageY();
    }

    public int getDefaultImageDrawableIntrinsicWidth() {
        return imageLocalInfoList.get(imageDefaultPosition).getImageDrawableIntrinsicWidth();
    }

    public int getDefaultImageDrawableIntrinsicHeight() {
        return imageLocalInfoList.get(imageDefaultPosition).getImageDrawableIntrinsicHeight();
    }

    public int getDefaultImageX() {
        return imageLocalInfoList.get(imageDefaultPosition).getImageX();
    }

    public int getDefaultImageY() {
        return imageLocalInfoList.get(imageDefaultPosition).getImageY();
    }

    public void addImageLocalInfo(PhotoImageInfo mPhotoImageInfo) {

        if(null == imageLocalInfoList){
            imageLocalInfoList = new ArrayList<>();
        }

        imageLocalInfoList.add(mPhotoImageInfo);
    }

    public int getImageCount() {

        if (null == imageUrlList) {
            return 0;
        }

        return imageUrlList.size();
    }

    /**
     * 默认起始图片——小图url
     */
    public String getImageOriginalUrl() {
        if (null == imageLittleUrlList || imageLittleUrlList.size() == 0) {
            return "";
        } else {
            return imageLittleUrlList.get(imageDefaultPosition);
        }
    }
}

相关文章

网友评论

      本文标题:大图浏览+转场动画+图片加载进度监听

      本文链接:https://www.haomeiwen.com/subject/widiyxtx.html