图片点击放大功能

使用技术ViewPager+PhotoView
项目需要的权限

  <uses-permission android:name="android.permission.INTERNET"/>

项目需要添加的jar

  compile 'com.squareup.picasso:picasso:2.5.2'
  compile 'com.github.chrisbanes.photoview:library:1.2.4'

一.从webView中抓出图片数组

 //在js中调用本地java方法
        webView.addJavascriptInterface(new JsInterface(this), "AndroidWebView");

 private class JsInterface {
        private Context mContext;

        public JsInterface(Context context) {
            this.mContext = context;
        }

        //在js中调用window.AndroidWebView.gallery(json)，便会触发此方法。
        @JavascriptInterface
        public void gallery(String json) {
         Log.i("galleryJson",json);

当然这个js是web开发注入的，我们点击图片就可以抓出来返回的json

galleryJson: {"current":1,"total":12,"list":["Source_new/pic/1.jpg","Source_new/pic/2.jpg","Source_new/pic/3.jpg","Source_new/pic/4.jpg","Source_new/pic/5.jpg","Source_new/pic/6.jpg","Source_new/pic/7.jpg","Source_new/pic/8.jpg","Source_new/pic/9.jpg","Source_new/pic/10.jpg","Source_new/pic/11.jpg","Source_new/pic/12.jpg"]}
这里我们点击是第二个界面

我们可以吧这个数组和当前current传入第二个页面，

Intent intent=new Intent(MainActivity.this,PhotoViewActivity.class);
                intent.putStringArrayListExtra(MainActivity.PHOTO_LIST,list1);
                intent.putExtra("current",current);
                startActivity(intent);

二。PhotoViewActivity布局
这个就是我们要显示点击出现大图的界面了

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#000"
    >
    <TextView
        android:id="@+id/indictor_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:textColor="#fff"
        android:textSize="22sp"
        />
    <android.support.v4.view.ViewPager
        android:id="@+id/photo_pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@id/indictor_view"
        android:layout_marginTop="10dp">
        <uk.co.senab.photoview.PhotoView
            android:id="@+id/iv_photo"
            android:layout_height="wrap_content"
            android:layout_width="match_parent"
            android:src="@drawable/ao"
            />
    </android.support.v4.view.ViewPager>
</RelativeLayout>

photoView 和在代码中动态生成，
这时候我们先回头写一个ViewPager 的适配器

三。PhotoPagerAdapter

public class PhotoPagerAdapter extends PagerAdapter {
    private Context mContext;
    private ArrayList<String> mPhotoList;
    public PhotoPagerAdapter(Context context, ArrayList<String>list){
        mContext=context;
        mPhotoList=list;
    }
    @Override
    public int getCount() {
        return mPhotoList.size();
    }
    //构建ViewPager的每一项
    //每一项就是一个ImageView
    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        //代码布局，手动创建ImageView
        ImageView photoView=new PhotoView(mContext);
        photoView.setScaleType(ImageView.ScaleType.FIT_XY);
        //使用图片加载组件为我们的PhotoView显示图片
        Log.i("fengfeng",mPhotoList+"");
        String imgUrl="http://undefined.cunite.cn/test/"+mPhotoList.get(position);
        Log.i("fengfeng",mPhotoList.get(position));
        //GlideUtils.loadImageView(mContext,imgUrl,photoView);
        PicassoUtil.setImg(mContext,imgUrl,photoView);
        container.addView(photoView,LayoutParams.MATCH_PARENT,
                LayoutParams.MATCH_PARENT);
        photoView.setOnLongClickListener(new View.OnLongClickListener() {
            @Override
            public boolean onLongClick(View v) {
                Toast.makeText(mContext, "图片被长点击了", Toast.LENGTH_SHORT).show();
                return false;
            }
        });
        return photoView;
    }

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

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

}

主要重写了

 @Override
    public Object instantiateItem(ViewGroup container, int position) {}
    这个方法

这时候我们回头写，activity

四。PhotoViewActivity页面

public class PhotoViewActivity extends AppCompatActivity {
    /**
     * UI
     */
    private  TextView mTextView;
    private ViewPager mPager;
    private PhotoView iv_photo;
    /**
     * Data
     */
    private  PhotoPagerAdapter mAdapter;
    private ArrayList<String> mPhotolist;//存储的图片地址
    private int mlength;//数组长度
    int currentNoInt;
    //    int nowNumber;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_photo_view);
        Intent intent=getIntent();
        String currentNo =intent.getExtras().getString("current");
        currentNoInt=Integer.parseInt(currentNo);
        initView();
        initData();
        mTextView.setText(currentNoInt+1+"/"+mPhotolist.size());

    }

    private void initView() {
        mTextView=(TextView)findViewById(indictor_view);
        mPager=(ViewPager)findViewById(R.id.photo_pager);
        iv_photo=(PhotoView)findViewById(R.id.iv_photo);
    }

    /**
     * 初始化我们要显示的图片列表
     */
    private void initData(){
        mPhotolist=getIntent().getStringArrayListExtra(MainActivity.PHOTO_LIST);
        Log.i("feng",mPhotolist+"");
        mlength=mPhotolist.size();
        Log.i("feng1",mlength+"");


        mPager.setPageMargin(Utils.dip2px(this,30));
        //为我们的ViewPager添加Adapter
        mAdapter=new PhotoPagerAdapter(this,mPhotolist);
        mPager.setAdapter(mAdapter);
        mPager.setCurrentItem(currentNoInt);
        setListener();

    }

    /**监听
     *设置
     */
    private void setListener()
    {
        mPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
            }

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

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });
    }

}

代码也比较简单，
主要注意的是

        mPager.setAdapter(mAdapter);
        mPager.setCurrentItem(currentNoInt);

显示当前是第几个item的数字传过去，这样就能显示完成了
下边是效果图

感觉骑士挺简单的，没什么难度吧，希望对大家有帮助，如果有疑问欢迎留言
发现一个不错的博客，分享下，功能一样，
http://www.jianshu.com/p/ed2ca5442664