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

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

作者: 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