实现图片浏览器

图片浏览器在App中很常见，如新闻类app中，其具有可滑动，双指缩放，图片标识等特点。其中用到控件主要是viewpager，下面我就试着实现自己一个自己的图片浏览器，废话不说先看效果图，这个图片浏览器是在上一篇自动轮播的基础上实现的。

其实点击轮播器后是跳转到一个铺满viewpager的activity中了，只不过这个activity的背景色为黑色而已，就是这么简单。那些先看这个activity的布局文件吧

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ff000000">

    <android.support.v4.view.ViewPager
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/news_picture_vp"
        android:persistentDrawingCache="animation"
         />
    <ImageView
        android:id="@+id/back"
        android:layout_width="35dp"
        android:layout_height="30dp"
        android:layout_marginLeft="15dp"
        android:layout_marginTop="20dp"
        android:scaleType="fitCenter"
        android:src="@drawable/car_picture_ic_back"
        />
    <TextView
        android:id="@+id/new_picture_index"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal|bottom"
        android:layout_marginBottom="20dp"
        android:text="1/4"
        android:textColor="@android:color/white"
        android:textSize="18sp"/>
</FrameLayout>

viewpager铺满整个屏幕，textview显示图片索引，imageview显示返回按键。

图片浏览器中的图片是支持手势缩放的，这里的item布局用到的是github上的一个开源控件photoView而不是imageview，布局如下：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/black"
    android:gravity="center">
    
    <jim.com.photoview.PhotoView
        android:id="@+id/picture_iv_item"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</LinearLayout>

然后是一大段非常简单的代码，初始化控件，设置adapter加载图片，监听滑动事件

public class NewsPictureActivity extends Activity implements ViewPager.OnPageChangeListener, View.OnClickListener {

    private ViewPager viewPager;
    private ImageView back;
    private TextView index;
    private String url[];

    public static void startNewsPictureActivity(Context context) {

        Intent intent = new Intent(context, NewsPictureActivity.class);
        context.startActivity(intent);
    }

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.news_picture_main);
        url = Images.imageArray;
        initView();
    }

    private void initView() {
        viewPager = (ViewPager) findViewById(R.id.news_picture_vp);
        back = (ImageView) findViewById(R.id.back);
        index = (TextView) findViewById(R.id.new_picture_index);
        back.setOnClickListener(this);
        index.setText("1/" + url.length);
        viewPager.setAdapter(new VpAdapter());
        viewPager.setOnPageChangeListener(this);
        viewPager.setCurrentItem(0);
    }

    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.back:
                finish();
                break;
        }
    }

    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

    }

    @Override
    public void onPageSelected(int position) {
        //动态改变图片的索引
        index.setText(position + 1 + "/" + url.length);
    }

    @Override
    public void onPageScrollStateChanged(int state) {

    }

    private class VpAdapter extends PagerAdapter {
        boolean isShow = true;

        @Override
        public int getCount() {
            return url.length;
        }

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

        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            View view = getLayoutInflater().inflate(R.layout.news_picture_item, null);

            //viewpager中的item，这里用到了github上的一个支持手势的开源控件
            PhotoView imageView = (PhotoView) view.findViewById(R.id.picture_iv_item);
            //触摸屏幕的时候可以动态隐藏和显示索引和返回键
            imageView.setOnPhotoTapListener(new PhotoViewAttacher.OnPhotoTapListener() {
                @Override
                public void onPhotoTap(View view, float x, float y) {
                    if (!isShow) {
                        back.setVisibility(View.VISIBLE);
                        index.setVisibility(View.VISIBLE);
                        isShow = true;
                    } else {
                        back.setVisibility(View.GONE);
                        index.setVisibility(View.GONE);
                        isShow = false;
                    }
                }
            });
            //图片都是从网上下载的
            ImageLoader.getInstance().displayImage(url[position], imageView, MyApplication.getOptions());
            container.addView(view);
            return view;
        }

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

代码中把startactivity写在这个方法中是为了提高代码重用，因为一个app中肯定不止一个地方会用到图片浏览器，这样就不用在每个地方都new一个intent了。在startNewPictureActivity中还可以把图片的URL地址传进去。