`

图片浏览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
分享到:
评论

相关推荐

    模拟微信图片浏览效果

    非常小的一个简单demo,供入门者参考用,主要就是针对scrollView自带的zoom缩放功能结合分页浏览做的图片浏览效果。

    JavaScript_JQuery_CSS_CSS_DIV漂亮的实例123个

    58. jquery黑色风格左右带箭头的图片浏览控制插件下载 59. jQuery鼠标滑动图片显示标题与简介的滑动动感特效代码 60. jQuery鼠标移上小图显示大缩略图功能 61. js仿淘宝网鼠标经过缩略图放大图片效果的jQuery ...

    100多个JQuery效果示例(实例)div+css+javascrpit

    58. jquery黑色风格左右带箭头的图片浏览控制插件下载 59. jQuery鼠标滑动图片显示标题与简介的滑动动感特效代码 60. jQuery鼠标移上小图显示大缩略图功能 61. js仿淘宝网鼠标经过缩略图放大图片效果的jQuery ...

    jquery 动态示例

    58. jquery黑色风格左右带箭头的图片浏览控制插件下载 59. jQuery鼠标滑动图片显示标题与简介的滑动动感特效代码 60. jQuery鼠标移上小图显示大缩略图功能 61. js仿淘宝网鼠标经过缩略图放大图片效果的jQuery ...

    JavaScript_JQuery_CSS_DIV漂亮的实例

    58. jquery黑色风格左右带箭头的图片浏览控制插件下载 59. jQuery鼠标滑动图片显示标题与简介的滑动动感特效代码 60. jQuery鼠标移上小图显示大缩略图功能 61. js仿淘宝网鼠标经过缩略图放大图片效果的jQuery ...

    JQuery&CSS;&CSS;+DIV实例大全.rar

    58.jquery黑色风格左右带箭头的图片浏览控制插件下载 59.jQuery鼠标滑动图片显示标题与简介的滑动动感特效代码 60.jQuery鼠标移上小图显示大缩略图功能 61.js仿淘宝网鼠标经过缩略图放大图片效果的jQuery ...

    Zoom for ASP.NET试用版:一款用于Web下的图片放大功能控件

    Zoom for ASP.NET 试用版 试用版 开发语言: .NET 可用平台: Visual Studio 2005-...只需要一行代码即可让应用程序中的图像交互浏览实现类似Google Maps和Windows Live Local的效果。只需拖、拽即可运行您的应用程序。

    支持全屏浏览模式的功能

    支持全屏浏览模式的功能源码,源码XHImageViewer,实现图片浏览功能,点击图片,开启图片全屏浏览模式,支持下载和显示网络图片,该效果也比较简单的,希望能够帮到大家的学习。XHImageViewer is images viewer, ...

    wordpress漂亮主题 Semding v1.0

    *zoom:1,页面中加入了图片延时载入的效果lazyload,个人测试lazyload仅仅是改善了显示的效果而已,并没有实现按需请求的。新安装的主题默认是没有“keywords”和“description”,虽然可以实现采用TAG和截取文章的...

    jQuery_plugins

    #jQuery 插件! ###访问: ... 这些插件是为了实现面向对象编程的... Side-Scroll :给定图片列表,Side-Scroll 获取这些图片并允许用户循环浏览每张图片。 Zoom :在给定的图片上实现放大镜,让用户看到更精细的细节。

    Premiere.Pro.1.5影视后期编辑技法.pdf

    3.3.2 浏览效果 149 3.3.3 修改特技 150 3.3.4 使用关键帧自定效果 152 第4章 抠像、透明与迭加画面应用 4.1 认识抠像与迭加 155 4.2 常用抠像、透明迭加方式 156 4.2.1 抠像技巧与色键透明 156 4.2.2 Luminance透明...

    OpenLayers 2.7

    OpenLayers是一个开源的js框架,用于在您的浏览器中实现地图浏览的效果和基本的zoom,pan等功能。OpenLayers支持的地图来源包括了WMS,GoogleMap,KaMap,MSVirtualEarth等等,您也可以用简单的图片作为源,在这一...

    OpenLayers-2.7

    OpenLayers是一个开源的js框架,用于在您的浏览器中实现地图浏览的效果和基本的zoom,pan等功能。OpenLayers支持的地图来源包括了WMS,GoogleMap,KaMap,MSVirtualEarth等等,您也可以用简单的图片作为源,在这一...

    Android通过多点触控的方式对图片进行缩放的实例代码

    在上一篇文章中我带着大家一起实现了Android瀑布流照片墙的效果,虽然这种效果很炫很酷,但其实还只能算是一个半成品,因为照片墙中所有的图片都是只能看不能点的。因此本篇文章中,我们就来对这一功能进行完善,...

    openlayers.js及入门事例

    OpenLayers是一个开源的js框架,用于在您的浏览器中实现地图浏览的效果和基本的zoom,pan等功能。OpenLayers支持的地图来源包括了WMS,GoogleMap,KaMap,MSVirtualEarth等等,您也可以用简单的图片作为源,在这一...

    PicView:具有紧凑UI的快速图片查看器,可以隐藏。 具有图像效果,画廊,图像信息等。 该应用程序可以自动适应您的屏幕

    具有图像效果,画廊,图像信息等。 该应用程序可以自动根据您的屏幕进行调整。 可定制的主题 可以在设置菜单F4找到深色主题和浅色主题之间的选择,以及12种强调色。 配置用户界面 通过按Alt + Z可以将界面切换为...

    Android多点触控技术实战 针对图片自由缩放和移动

    在上一篇文章中我带着大家一起实现了Android瀑布流照片墙的效果,虽然这种效果很炫很酷,但其实还只能算是一个半成品,因为照片墙中所有的图片都是只能看不能点的。因此本篇文章中,我们就来对这一功能进行完善,...

    imageviewer:一个简单且可自定义的Android全屏图像查看器

    提供查看缩略视图到原视图的无缝过渡转变的视觉效果,优雅的浏览普通图,长图,动图。 主要功能 过渡动画到到大图或大图到更高时提供无缝衔接动画 浏览手势浏览大图时可使用常势操作。如缩放图片等。( ) 超大图...

    wordpress漂亮主题 Semding源代码

    本主题是蓝色类别的两栏博客类主题,主题比较简单、明了,页面宽度是960px,其中左栏700px,右栏250px,用标准的浏览器如火狐等可以获得最佳的浏览效果,当然在IE6还没完全消失的目前,还是作了最大限度的兼容,但...

Global site tag (gtag.js) - Google Analytics