Android 图片查看器实现 PhotoView + ViewPager

今天看了今日头条APP的图片查看的效果，就自己实现了一下。

效果如下

首先引入两个库

一个是图片缩放的功能：PhotoView框架

compile 'com.github.chrisbanes:PhotoView:1.2.6'

一个界面滑动退出效果（比如自己滑动空白区域，就退出界面，而不用按手机返回键。我这里实现上下滑动退出界面）Slider框架

compile 'com.komi.slider:slider:0.4.0'

项目目录如下：

布局文件activity_main.xml

activity_photoview.xml

PhotoViewActivity

package com.example.gps;

import android.content.Intent;
import android.graphics.Color;
import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;
import com.komi.slider.SliderConfig;
import com.komi.slider.SliderUtils;
import com.komi.slider.position.SliderPosition;
import java.util.ArrayList;
import uk.co.senab.photoview.PhotoViewAttacher;


public class PhotoViewActivity extends FragmentActivity {
    private ViewPager viewPager;
    private PagerAdapter pagerAdapter;
    private SliderConfig mConfig;
    private ArrayList mList;
    private TextView textView;
    private int imageIds[]={R.mipmap.photo_1,R.mipmap.photo_2,R.mipmap.photo_3};

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_photoview);
        initSilder();
        initView();
        initShowphoto();
    }

    private void initShowphoto() {
        //Bundle bundle = getIntent().getExtras();
        Intent intent = getIntent();
        int i = intent.getIntExtra("showphoto",0);
        setSelect(i);//通过传值获取点击图片位置,从而显示当前图片
    }
    //实现界面上下滑动退出界面效果
    private void initSilder() {
        mConfig = new SliderConfig.Builder()
                .secondaryColor(Color.TRANSPARENT)
                .position(SliderPosition.VERTICAL)  //设置上下滑动
                .edge(false)  //是否允许有滑动边界值,默认是有的true
                .build();
        SliderUtils.attachActivity(this, mConfig);
    }

    private void initView() {
            viewPager=(ViewPager)findViewById(R.id.ViewPager);
            textView=(TextView)findViewById(R.id.text);

            mList = new ArrayList();

           pagerAdapter = new PagerAdapter() {

               // 获取要滑动的控件的数量，在这里我们以滑动的广告栏为例，那么这里就应该是展示的广告图片的ImageView数量
               @Override
               public int getCount() {
                   return imageIds.length;

                   //return Integer.MAX_VALUE;    返回一个比较大的值，目的是为了实现无限轮播
               }

               // 来判断显示的是否是同一张图片，这里我们将两个参数相比较返回即可
               @Override
               public boolean isViewFromObject(View view, Object object) {
                   return view == object;
               }

               // 当要显示的图片可以进行缓存的时候，会调用这个方法进行显示图片的初始化，
               // 我们将要显示的ImageView加入到ViewGroup中，然后作为返回值返回即可
               @Override
               public Object instantiateItem(ViewGroup container, int position) {
                   ImageView imageView = new ImageView(PhotoViewActivity.this);
                   imageView.setImageResource(imageIds[position]);

                   //使图片具有放缩功能
                   PhotoViewAttacher mAttacher=new PhotoViewAttacher(imageView);
                   mAttacher.update();

                   container.addView(imageView);
                   mList.add(imageView);
                   return imageView;
               }

               //PagerAdapter只缓存三张要显示的图片，如果滑动的图片超出了缓存的范围，就会调用这个方法，将图片销毁
               @Override
               public void destroyItem(ViewGroup container, int position, Object object) {
                   container.removeView(mList.get(position));
               }


           };

            viewPager.setAdapter(pagerAdapter);

            //设置滑动监听事件
            viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
                @Override
                public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

                }

                //滑动到第几张图片的调用的方法，position当前显示图片位置
                @Override
                public void onPageSelected(int position) {
                    switch (position){
                        case 0:
                            setSelect(0);
                            textView.setText("1/3");
                            break;
                        case 1:
                            setSelect(1);
                            textView.setText("2/3");
                            break;
                        case 2:
                            textView.setText("3/3");
                            setSelect(2);
                            break;
                    }
                }

                @Override
                public void onPageScrollStateChanged(int state) {

                }
            });

    }

    //启动查看图片时，显示你点击图片
    public void setSelect(int i) {
        switch (i){
            case 0:
                viewPager.setCurrentItem(0);
                break;
            case 1:
                viewPager.setCurrentItem(1);
                break;
            case 2:
                viewPager.setCurrentItem(2);
                break;
        }
    }

}

MainActivity

package com.example.gps;

import android.content.Intent;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.ImageView;

public class MainActivity extends AppCompatActivity implements View.OnClickListener{
    private ImageView imageView_01,imageView_02,imageView_03;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initView();

    }


    private void initView() {
        imageView_01=(ImageView)findViewById(R.id.photo_1);
        imageView_02=(ImageView)findViewById(R.id.photo_2);
        imageView_03=(ImageView)findViewById(R.id.photo_3);

        imageView_01.setOnClickListener(this);
        imageView_02.setOnClickListener(this);
        imageView_03.setOnClickListener(this);
    }

    @Override
    public void onClick(View v) {
        Intent intent = new Intent(MainActivity.this,PhotoViewActivity.class);
        switch (v.getId()){
            case R.id.photo_1:
                intent.putExtra("showphoto",0);
                startActivity(intent);
                break;
            case R.id.photo_2:
                intent.putExtra("showphoto",1);
                startActivity(intent);
                break;
            case R.id.photo_3:
                intent.putExtra("showphoto",2);
                startActivity(intent);
                break;
        }
    }
}