`

图片浏览zoom效果

阅读更多
不仅实现了Lollipop中打开新的activity 的zoom效果(根据点击位置逐步展开过渡到新的界面),还实现了一个弹簧效果的ViewPager





public class MainActivity extends FragmentActivity {

	private Context context;
    private GridView gridView;
    private ArrayList<Integer> imgList = new ArrayList<>();
    private ArrayList<ImageInfo> imgImageInfos = new ArrayList<>();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        context=this;
        imgList.add(0, R.drawable.p1);
        imgList.add(1, R.drawable.p2);
        imgList.add(2, R.drawable.p3);
        imgList.add(3, R.drawable.p4);
        imgList.add(4, R.drawable.p1);
        imgList.add(5, R.drawable.p2);
        imgList.add(6, R.drawable.p3);
        imgList.add(7, R.drawable.p4);
        imgList.add(8, R.drawable.p1);
        gridView = (GridView) findViewById(R.id.gridview);
        final ImageAdapter adapter = new ImageAdapter();
        gridView.setAdapter(adapter);

        gridView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
                Bundle bundle = new Bundle();
                bundle.putIntegerArrayList("imgs", imgList);
                bundle.putParcelable("info", ((PhotoView) view).getInfo());
                bundle.putInt("position", position);
                imgImageInfos.clear();
                //NOTE:if imgList.size >= the visible count in single screen,i will cause NullPointException
                //because item out of screen have been replaced/reused
                for(int i = 0; i < imgList.size(); i++){
                    imgImageInfos.add(((PhotoView)parent.getChildAt(i)).getInfo());
                }
                parent.getChildAt(position);
                bundle.putParcelableArrayList("infos", imgImageInfos);
                getSupportFragmentManager().beginTransaction().replace(R.id.fragment_viewpager, ViewPagerFragment.getInstance(bundle), "ViewPagerFragment")
                        .addToBackStack(null).commit();

            }
        });
    }


    class ImageAdapter extends BaseAdapter {

        @Override
        public int getCount() {
            return imgList.size();
        }

        @Override
        public Object getItem(int i) {
            return imgList.get(i);
        }

        @Override
        public long getItemId(int i) {
            return i;
        }

        @Override
        public View getView(int i, View view, ViewGroup viewGroup) {
        	int size=(int) (getResources().getDisplayMetrics().density * 100);
            PhotoView p = new PhotoView(MainActivity.this);
            p.setLayoutParams(new AbsListView.LayoutParams(size, size));
            p.setScaleType(ImageView.ScaleType.CENTER_CROP);
            p.setImageResource(imgList.get(i));
            p.touchEnable(false);//disable touch
            return p;
        }
    }
}


import java.util.ArrayList;

import com.example.testimage.widget.ImageInfo;
import com.example.testimage.widget.PhotoView;
import com.example.testimage.widget.ReboundViewPager;

import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.KeyEvent;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.view.animation.AccelerateInterpolator;
import android.view.animation.AlphaAnimation;
import android.view.animation.Animation;
import android.widget.TextView;

public class ViewPagerFragment extends Fragment{

    private ReboundViewPager viewPager;
    private TextView  tips; //viewpager indicator
    private ArrayList<Integer> imgs;
    private ImageInfo imageInfo;
    private View mask;//background view
    private ArrayList<ImageInfo> imageInfos;
    private int position;

    public static ViewPagerFragment getInstance(Bundle imgs){
        ViewPagerFragment fragment = new ViewPagerFragment();
        fragment.setArguments(imgs);
        return fragment;
    }

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        return inflater.inflate(R.layout.fragment_viewpager,null);
    }

    @Override
    public void onViewCreated(View view, @Nullable Bundle savedInstanceState) {
        super.onViewCreated(view, savedInstanceState);

        viewPager = (ReboundViewPager) view.findViewById(R.id.viewpager);
        tips = (TextView) view.findViewById(R.id.text);
        mask = view.findViewById(R.id.mask);

        runEnterAnimation();
        Bundle bundle = getArguments();
        imgs = bundle.getIntegerArrayList("imgs");
        imageInfo = bundle.getParcelable("info");
        imageInfos = bundle.getParcelableArrayList("infos");

        position = bundle.getInt("position", 0);
        tips.setText((position + 1) + "/" + imgs.size());

        viewPager.getOverscrollView().setAdapter(new PagerAdapter() {
            @Override
            public int getCount() {
                return imgs.size();
            }

            @Override
            public boolean isViewFromObject(View view, Object object) {
                return view == object;
            }

            @Override
            public Object instantiateItem(ViewGroup container, int pos) {
                PhotoView view = new PhotoView(getActivity());
                view.touchEnable(true);
                view.setImageResource(imgs.get(pos));
                if(position == pos){//only animate when position equals u click in pre layout
                    view.animateFrom(imageInfo);
                }
                //force to get focal point,to listen key listener
                view.setFocusableInTouchMode(true);
                view.requestFocus();
                view.setOnKeyListener(pressKeyListener);//add key listener to listen back press
                view.setOnClickListener(onClickListener);
                view.setTag(pos);
                container.addView(view);
                return view;
            }

            @Override
            public void destroyItem(ViewGroup container, int position, Object object) {
                container.removeView((View) object);
            }
        });

        viewPager.getOverscrollView().addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }

            @Override
            public void onPageSelected(int position) {
                tips.setText((position + 1) + "/" + imgs.size());
            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });

        //set current position
        viewPager.getOverscrollView().setCurrentItem(position);
    }

    private View.OnClickListener onClickListener = new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            exitFragment(v);
        }
    };

    private void exitFragment(View v) {
        //退出时点击的位置
        int position = (int) v.getTag();
        //回到上个界面该view的位置
        runExitAnimation(v);
        ((PhotoView)v).animateTo(imageInfos.get(position), new Runnable() {
            @Override
            public void run() {
                if (!ViewPagerFragment.this.isResumed()) {//fragment被回收
                    return;
                }
                final FragmentManager fragmentManager = getFragmentManager();
                if (fragmentManager != null) {
                    fragmentManager.popBackStack();//回退栈
                }
            }
        });
    }


    private View.OnKeyListener pressKeyListener = new View.OnKeyListener() {
        @Override
        public boolean onKey(View v, int keyCode, KeyEvent event) {
            if (keyCode == KeyEvent.KEYCODE_BACK) {//只监听返回键
                if (event.getAction() != KeyEvent.ACTION_UP) {
                    return true;
                }
                exitFragment(v);
                return true;
            }
            return false;
        }
    };


    private void runEnterAnimation() {
        AlphaAnimation alphaAnimation = new AlphaAnimation(0,1);
        alphaAnimation.setDuration(300);
        alphaAnimation.setInterpolator(new AccelerateInterpolator());
        mask.startAnimation(alphaAnimation);
    }

    public void runExitAnimation(final View view) {
        AlphaAnimation alphaAnimation = new AlphaAnimation(1,0);
        alphaAnimation.setDuration(300);
        alphaAnimation.setInterpolator(new AccelerateInterpolator());
        alphaAnimation.setAnimationListener(new Animation.AnimationListener() {
            @Override
            public void onAnimationStart(Animation animation) {

            }

            @Override
            public void onAnimationEnd(Animation animation) {
                mask.setVisibility(View.GONE);
                view.setVisibility(View.GONE);
            }

            @Override
            public void onAnimationRepeat(Animation animation) {

            }
        });
        mask.startAnimation(alphaAnimation);
    }

}
  • 大小: 1.5 MB
  • 大小: 643.3 KB
分享到:
评论

相关推荐

    图片 Zoom 变换动画效果.zip

    这种效果在很多场景下都非常有用,比如在浏览图片、地图应用或者进行页面过渡时。ZoomTransitioning项目通过自定义转换实现了这一效果,使得图片不仅能够平滑地放大或缩小,而且在变换过程中增加了动画元素,使得...

    cloud_zoom图片放大展示效果

    "cloud_zoom图片放大展示效果"是一种广泛应用于网页设计中的技术,它使得用户在浏览列表中的小图时,可以通过鼠标悬停或点击实现图片的放大预览,从而提供更清晰、更详细的视图,提高用户体验。Cloud_Zoom是实现这一...

    ZoomImage jQuery图片浏览放大插件

    ZoomImage是一款基于jQuery的图片浏览放大插件,它旨在为用户提供一种优雅的方式来查看网页上的大图,无需离开当前页面或打开新的窗口。该插件通过简单的API调用和自定义选项,可以轻松集成到任何网站中,提升用户...

    zoomimage(图片放大镜效果)

    这个效果通常用于电商网站的商品展示,提升用户的浏览体验。 "事件是onclick"这部分描述意味着触发图片放大镜效果的交互行为是通过点击事件来实现的。在JavaScript中,`onclick`是一个内联事件处理程序,当用户点击...

    cloud zoom.js商品图片放大镜效果插件

    Cloud Zoom.js是一款广泛应用于电商网站的商品图片放大镜效果插件,它能够为用户提供直观、细腻的产品查看体验。这款插件以其高效、易用的特点,在网页开发中颇受欢迎。通过集成Cloud Zoom.js,开发者可以轻松地在...

    jQueryZoom放大图片插件例子.zip

    jQueryZoom是一款广泛应用于网页设计中的JavaScript插件,它专门用于实现图片的放大效果。这个插件的出现使得网站开发者能够轻松地为用户提供更加直观、细腻的图片查看体验,特别是对于电商网站上的产品展示或者艺术...

    jQuery zoom图片弹出层插件简单的图片相册弹出层窗口

    也可以用于摄影网站或个人博客,增强图片浏览体验。配合弹出层技术,可以创建一个优雅且功能齐全的图片相册,使用户在不离开当前页面的情况下,轻松浏览和欣赏图片。 **总结** jQuery zoom图片弹出层插件结合弹出层...

    Jquery.jqueryzoom+jcarousel+实现图片滚动和局部图片放大镜效果

    在这个项目中,`jQuery` 被用来实现两种关键功能:图片滚动(通过 `jcarousel` 插件)和局部图片放大镜效果(通过 `jqueryzoom` 插件)。下面我们将详细介绍这两个功能及其背后的原理。 1. **`jcarousel` 插件**:`...

    模拟微信图片浏览效果

    在iOS开发中,模拟微信图片浏览效果是一项常见的需求,它涉及到滚动视图(UIScrollView)的使用,特别是其内置的zoom缩放功能,以及如何实现图片的分页浏览。本项目"NewPhotoScvDemo"提供了一个简单的入门级示例,...

    超强jQuery插件cloud-zoom实现图片局部放大显示效果.zip

    这段代码会在文档加载完成后,为ID为"zoom"的元素应用Cloud-Zoom效果。 Cloud-Zoom提供了许多可配置的选项,以满足不同需求。例如,你可以调整放大镜的大小、位置、鼠标跟随速度等。这些选项可以在初始化插件时作为...

    jquery图片放大插件ZoomIt

    通过分析这些文件,你可以了解`ZoomIt.js`的使用方法,并将其集成到自己的项目中,为用户提供更加丰富的图片浏览体验。同时,对于前端开发者来说,深入研究这个插件的源代码也是一个学习jQuery插件开发的好机会。

    android简单的图片浏览程序

    在Android平台上,开发一个简单的图片浏览程序是常见的需求,它能帮助用户查看并管理设备上的图像文件。这个程序的核心功能包括加载图片、显示图片、以及可能的图片滑动和缩放效果。以下是一些关键的知识点,它们是...

    图片浏览 使用tjpzoom.js实现放大功能

    在IT领域,图片浏览体验是用户体验中的重要一环,特别是在网页设计中。为了提升用户体验,很多开发者会采用JavaScript库来实现图片的放大功能。这里提到的"图片浏览 使用tjpzoom.js实现放大功能",是一种利用...

    Cloud Zoom V3.1

    Cloud Zoom V3.1 是一款基于...使用 Cloud Zoom V3.1,网站设计师和开发者可以为用户提供更加生动、直观的图像浏览体验,提升网站的专业性和用户体验。只需简单地引入相关文件,并按照文档配置,就能轻松实现这一功能。

    实现图片局部放大显示效果的超强jQuery插件cloud-zoom

    在本文中,我们将深入探讨如何使用Cloud-Zoom jQuery插件来实现图片的局部放大效果,类似于Mac OS X Lion中的lanchPad特效。Cloud-Zoom是一款功能强大的jQuery插件,它能够在用户鼠标悬停在图像上时,提供一个高质量...

    浏览图片有3D效果

    在Android平台上,为用户提供3D效果的图片浏览体验是一种创新且引人入胜的设计。这种技术可以增强用户体验,使图片看起来更加生动立体。本篇将深入探讨如何在Android应用中实现这一功能,主要涵盖以下几个核心知识点...

    Android图片浏览,放大平移

    在Android平台上,为用户提供图片浏览、放大和缩小以及平移功能是常见的需求,尤其是在开发图像处理或媒体类应用时。本文将深入探讨如何在Android应用中实现这些功能,主要涉及多点触控、双击手势识别以及图片的平滑...

    jq zoom实现图片放大缩小

    jQuery Zoom插件就是为此目的而设计的,它允许用户在不离开页面的情况下,通过鼠标悬停或者点击来查看图片的高分辨率版本。在本教程中,我们将深入探讨如何使用jQuery和相关HTML、CSS技术实现这一功能。 首先,我们...

    基于qt实现的图片浏览程序 目前实现的功能: 1,基本图片浏览 2,图片缩放、移动

    《基于Qt实现的图片浏览程序详解》 Qt是一款强大的跨平台应用程序开发框架,它提供了丰富的图形用户界面(GUI)工具,使得开发者可以便捷地创建出功能完善的桌面应用。本篇文章将详细探讨如何利用Qt框架来实现一个...

Global site tag (gtag.js) - Google Analytics