仿微信查看大图

来源：互联网发布：如何使用淘宝购物编辑：程序博客网时间：2024/05/21 22:30

第一次写博客，好激动啊
最近公司项目里需要实现一个仿微信图片查看大图效果，纠结了很久到底用什么去写，后来考虑还是用动画来实现。
ok,开始正题，先说说需求，在聊天记录里会有图片消息，点击图片显示大图，解决思路是用两个ImageView，一个显示小图，一个全屏显示大图，当然小图是在RecyclerView里面，大图在FrameLayout的最上层，
首先获取小图片的部分信息，包括相对Activity的坐标，小图宽高，然后计算出大图初始时的位置，缩放比例，注意此处我将这些属性定义为全局变量，因为后面隐藏大图时还需要用到这些值，看代码

img_big.setVisibility(View.VISIBLE);        if(activityW == 0 || activityH == 0) {            activityW = findViewById(android.R.id.content).getWidth();            activityH = findViewById(android.R.id.content).getHeight();        }        //缩放比例e        scaleX = (smallW*1f)/activityW;        scaleY = (smallH*1f)/activityH;        //将大图缩放到指定大小        img_big.setScaleX(scaleX);        img_big.setScaleY(scaleY);        //将大图移动到指定位置        translateX = (activityW - smallW)/2 - smallX;        translateY = (activityH - smallH)/2 - smallY;        img_big.setTranslationX(-translateX);        img_big.setTranslationY(-translateY);        //开始缩放动画        ObjectAnimator oa1 = ObjectAnimator.ofFloat(img_big,"scaleX",scaleX,1f);        ObjectAnimator oa2 = ObjectAnimator.ofFloat(img_big,"scaleY",scaleY,1f);        ObjectAnimator oa3 = ObjectAnimator.ofFloat(img_big,"translationX",-translateX,0);        ObjectAnimator oa4 = ObjectAnimator.ofFloat(img_big,"translationY",-translateY,0);        AnimatorSet set = new AnimatorSet();        set.playTogether(oa1,oa2,oa3,oa4);        set.setDuration(Constant.ANIMATION_TIME_DEFAULT);        set.start();

在最开始我们需要得到小图片的位置信息，因为小图是在RecyclerView里面，而里面又有很多不同的其他类型的ViewHolder，我也就懒得写什么interface，直接在小图的点击事件里面用广播将我们需要的信息发了出来，然后在需要的地方拦截这个广播，在这里为了避免加载大图初期可能出现的未加载出图片的情况，我把小图的drawable转为bitmap也通过广播的形式发了出来，然后用Glide将这个bitmap用作placeholder，代码就不贴了。
完成了大图的查看，在缩放回去就简单了，只需要将上一步操作的动画属性修改一下就ok,然后给Animation加一个监听（为了隐藏大图面板）

        ObjectAnimator oa1 = ObjectAnimator.ofFloat(img_big,"scaleX",1f,scaleX);            ObjectAnimator oa2 = ObjectAnimator.ofFloat(img_big,"scaleY",1f,scaleY);            ObjectAnimator oa3 = ObjectAnimator.ofFloat(img_big,"translationX",0,-translateX);            ObjectAnimator oa4 = ObjectAnimator.ofFloat(img_big,"translationY",0,-translateY);            AnimatorSet set = new AnimatorSet();            set.playTogether(oa1,oa2,oa3,oa4);            set.setDuration(Constant.ANIMATION_TIME_DEFAULT);            set.addListener(new Animator.AnimatorListener() {                @Override                public void onAnimationStart(Animator animation) {                }                @Override                public void onAnimationEnd(Animator animation) {                    img_big.setVisibility(View.GONE);                }                @Override                public void onAnimationCancel(Animator animation) {                }                @Override                public void onAnimationRepeat(Animator animation) {            }        });        set.start();

至此，整个效果也就差不多完成了
另外求大神指导怎么从手机上录制gif

0 0