微信查看朋友圈图片源码

说明

现在市场的应用都会有查看头像或者照片墙的功能，很简单的一个功能，但是呢，你可以打开市场上的应用比较一下，其实微信的查看图片功能做的非常不错，今天就实现类似于微信的查看图片的功能

实现的效果

实现思路

1. 拿到每个条目的矩形区域在屏幕中的坐标，并且保存到集合中
2. 缩放比例的计算
3. 播放缩放动画
4. 图片展示

代码展示

1. 获取点击区域坐标

       // 检查动画进程
        if (mCurrentAnimator != null) {
            mCurrentAnimator.cancel();
        }

        // 设置适配器
        viewPager.setAdapter(pagerAdapter);
        viewPager.setCurrentItem(position);

        //准备白点
        if (mData.size() > 1) {
            preparePoints(position);
        }

        // 计算图片的区域坐标
        final Rect startBounds = new Rect();
        final Rect finalBounds = new Rect();
        final Point globalOffset = new Point();

        view.getGlobalVisibleRect(startBounds);
        container.getGlobalVisibleRect(finalBounds, globalOffset);
        startBounds.offset(-globalOffset.x, -globalOffset.y);
        finalBounds.offset(-globalOffset.x, -globalOffset.y);

2. 计算缩放比例

//计算缩放比例
        float startScale;
        if ((float) finalBounds.width() / finalBounds.height()
                > (float) startBounds.width() / startBounds.height()) {
            // Extend start bounds horizontally
            startScale = (float) startBounds.height() / finalBounds.height();
            float startWidth = startScale * finalBounds.width();
            float deltaWidth = (startWidth - startBounds.width()) / 2;
            startBounds.left -= deltaWidth;
            startBounds.right += deltaWidth;
        } else {
            // Extend start bounds vertically
            startScale = (float) startBounds.width() / finalBounds.width();
            float startHeight = startScale * finalBounds.height();
            float deltaHeight = (startHeight - startBounds.height()) / 2;
            startBounds.top -= deltaHeight;
            startBounds.bottom += deltaHeight;
        }

3. 设置动画并且播放，展示图片

viewPager.setVisibility(View.VISIBLE);
        firstClickView.setVisibility(View.INVISIBLE);

        viewPager.setPivotX(0f);
        viewPager.setPivotY(0f);

        //创建动画
        ObjectAnimator backgroundColor = ObjectAnimator.ofInt(viewPager, "backgroundColor", Color.TRANSPARENT, Color.BLACK);

        backgroundColor.setEvaluator(new ArgbEvaluator());

        AnimatorSet set = new AnimatorSet();
        set
                .play(ObjectAnimator.ofFloat(viewPager, View.X, startBounds.left,
                        finalBounds.left))
                .with(ObjectAnimator.ofFloat(viewPager, View.Y, startBounds.top,
                        finalBounds.top))
                .with(ObjectAnimator.ofFloat(viewPager, View.SCALE_X, startScale, 1f))
                .with(ObjectAnimator.ofFloat(viewPager, View.SCALE_Y, startScale, 1f))
                .with(backgroundColor);
        set.setDuration(mShortAnimationDuration);
        set.setInterpolator(new DecelerateInterpolator());
        set.addListener(new AnimatorListenerAdapter() {
            @Override
            public void onAnimationEnd(Animator animation) {
                points.setVisibility(View.VISIBLE);
                mCurrentAnimator = null;
                isZooming = false;
            }
            @Override
            public void onAnimationCancel(Animator animation) {
                points.setVisibility(View.GONE);
                mCurrentAnimator = null;
                isZooming = false;
            }
        });
        set.start();
        mCurrentAnimator = set;

4. 消失时监听和动画

image.setOnViewTapListener(new PhotoViewAttacher.OnViewTapListener() {
                @Override
                public void onViewTap(View view, float x, float y) {

                    if (!isZooming) {
                        if (firstClickPosition != position) {
                            firstClickView.setVisibility(View.VISIBLE);
                            itemView.get(position).setVisibility(View.INVISIBLE);
                        }

                        points.setVisibility(View.GONE);
                        if (mCurrentAnimator != null) {
                            mCurrentAnimator.cancel();
                        }


                        ObjectAnimator backgroundColor = ObjectAnimator.ofInt(viewPager, "backgroundColor", Color.BLACK, Color.TRANSPARENT);

                        backgroundColor.setEvaluator(new ArgbEvaluator());

                        AnimatorSet set = new AnimatorSet();
                        set
                                .play(ObjectAnimator.ofFloat(viewPager, View.X, startBounds.left))
                                .with(ObjectAnimator.ofFloat(viewPager, View.Y, startBounds.top))
                                .with(ObjectAnimator
                                        .ofFloat(viewPager, View.SCALE_X, startScale))
                                .with(ObjectAnimator
                                        .ofFloat(viewPager, View.SCALE_Y, startScale))
                                .with(backgroundColor);
                        set.setDuration(mShortAnimationDuration);
                        set.setInterpolator(new DecelerateInterpolator());
                        set.addListener(new AnimatorListenerAdapter() {
                            @Override
                            public void onAnimationEnd(Animator animation) {

                                itemView.get(position).setVisibility(View.VISIBLE);
                                viewPager.setVisibility(View.GONE);
                                mCurrentAnimator = null;
                                photoGone = true;
                            }

                            @Override
                            public void onAnimationCancel(Animator animation) {
                                itemView.get(position).setVisibility(View.VISIBLE);
                                viewPager.setVisibility(View.GONE);
                                mCurrentAnimator = null;
                                photoGone = true;
                            }
                        });
                        set.start();
                        mCurrentAnimator = set;
                    }

                }
            });

5. 准备的小点代码

 private void preparePoints(int position) {

        points.removeAllViews();
        for (int i = 0; i < mData.size(); i++) {

            ImageView point = new ImageView(UiUtils.getContext());

            LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(
                    LinearLayout.LayoutParams.WRAP_CONTENT,
                    LinearLayout.LayoutParams.WRAP_CONTENT);

            params.rightMargin = UiUtils.dip2px(8);
            params.bottomMargin = UiUtils.dip2px(6);
            point.setLayoutParams(params);

            if (position == i) {
                point.setImageResource(R.drawable.ic_page_indicator_focused2);
            } else {
                point.setImageResource(R.drawable.ic_page_indicator2);
            }
            points.addView(point);
        }
    }

更多

更多内容请关注微信公共号：AppCode,可扫面下面二维码，或者直接搜索AppCode