android 查看图片可以放大缩小

哈哈，小伙伴们，我们有见面了，这次给大家带来的是一款高效的图片查看器。只要使用的是viewpager+fragment+photoview。项目比较简单，是使用mvp框架编写的。大牛请略过。。。下面我们正式开始吧。我会一步一步的为大家讲解。1：首先你得有图片的地址吧，小编是这样的

private String imageId[] = new String[]{"https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2129390034,2297929709&fm=11&gp=0.jpg",
        "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3878847766,3988120331&fm=200&gp=0.jpg",
        "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1229233613,1232336907&fm=27&gp=0.jpg",
        "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2701408155,2184514200&fm=27&gp=0.jpg",
        "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=212113414,3107706925&fm=27&gp=0.jpg"};

这样图片的地址就有了是吧，欧了。第一步完成。

2：使用gridview或者listview展示你的图片，请看如下：   gv_photos.setAdapter(new ImageShowAdapter(this, urls));下面是适配器啦，我使用的是glide简单加载，在实际项目中，图片一般需要缓存和默认图处理，这里就略过。嘻嘻public class ImageShowAdapter extends CommonAdapter<String> {
    private Context context;

    public ImageShowAdapter(Context context, List<String> datas) {
        super(context, R.layout.item_imageshow, datas);
        this.context = context;
    }

    @Override
    protected void convert(ViewHolder viewHolder, String item, int position) {
        ImageView iv_photo = viewHolder.getView(R.id.iv_photo);
        Glide.with(context).load(item).into(iv_photo);
    }
}

这样，我们的第二步也差不多完成了，现在我们来给这个GridView设置点击事件，添加点击事件

gv_photos.setOnItemClickListener(new AdapterView.OnItemClickListener() {
    @Override
    public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
        ImagePagerActivity.startActivity(ImageShowActivity.this, urls, position);
    }
});

如上，我是点击图片的时候把整个图片的地址传和当前点击位置传给了另外一个全屏的activity。下面是最重要的部分咯

3:先说说这个ImageShowActivity 的布局吧，使用的是如下

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <TextView
        android:id="@+id/tv_indicator"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="@dimen/px60dp"
        android:text="0/0"
        android:textColor="@android:color/darker_gray"
        android:textSize="15sp" />

</RelativeLayout>好了，接下来看看我们的activity怎么写吧，首先你的得到上一个页面传过来的参数吧

urls = getIntent().getStringArrayListExtra("urls");
position = getIntent().getIntExtra("position", 0);然后设置当前位置是tv_indicator.setText("1/" + urls.size());

现在需要干正事的时候到了，设置viewpager的事件监听

private void initEvent(Bundle savedInstanceState) {
    	viewpager.setAdapter(new ImagePagerAdapter(getSupportFragmentManager(), urls));
    	viewpager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

        }

设置viewpager选择的时候改变图片位置的提示
        @Override
        public void onPageSelected(int position) {
            String page = position + 1 + "/" + urls.size();
            tv_indicator.setText(page);
        }

        @Override
        public void onPageScrollStateChanged(int state) {

        }
    	});

保存缓存的位置
    	if (savedInstanceState != null) {
        position = savedInstanceState.getInt("STATE_POSITION");
    	}

    	viewpager.setCurrentItem(position);
}

/**

*这个用于fragment有缓存的时候直接显示图片

**/

@Override
protected void onSaveInstanceState(Bundle outState) {
    outState.putInt("STATE_POSITION", viewpager.getCurrentItem());
}

里面有个自定义的ImagePagerAdapter，下面来看这个imagepageradapter的内容吧，先解释一下，这个

FragmentPagerAdapter 是我MVP框架封装的，小伙伴们可以换成你自己熟悉的fragmentadapter使用哦，

首先这个adapter呢，用一个数据源data接收数据吗，在getitem方法中再实例化一个fragment去承载图片的大图显示

这样一张图片就是一个fragment，不冲突。可能有点资源浪费。

public class ImagePagerAdapter extends FragmentPagerAdapter {
    private List<String> data;

    public ImagePagerAdapter(FragmentManager fm, List data) {
        super(fm);
        this.data = data;
    }

    @Override
    public Fragment getItem(int position) {
        return new ImageFragment().newInstance(data.get(position));
    }

    @Override
    public int getCount() {
        return data.size();
    }
}下面我们来看这个ImageFragment是怎么写的吧，布局其实就是一个第三方框架photoview，然后拿到你上一个

adapter传过来的数据直接设置给photoview进行显示没用的过朋友没关系用

下面的引入即可：

compile 'com.bm.photoview:library:1.4.1'

public class ImageFragment extends BaseMVPFragment {
    public static ImageFragment newInstance(String url) {
        ImageFragment fragment = new ImageFragment();
        Bundle bundle = new Bundle();
        bundle.putString(Constant.BundleKey.URL, url);
        fragment.setArguments(bundle);
        return fragment;
    }

    @Override
    public IBasePresenter createPresenter() {
        return null;
    }

    @Override
    protected int setContentView4ResId() {
        return R.layout.fragment_image;
    }

    @Override
    protected void initWidgets(View view, Bundle savedInstanceState) {
        String url = getArguments().getString(Constant.BundleKey.URL);
        PhotoView img = (PhotoView) view.findViewById(R.id.img);
        img.enable();
        GlideUtils.showImage(img, url);
    }
}到这一步，其实已经走通了。

内容篇幅比较长，关于一个布局文件我就不贴了，给出了关键的代码，相信大家看一遍就有点眉目了吧。我这使用的

是viewpager+fragment的方法实现的图片查看器，效率很高，还可以这只导航图片的位置，挺不错的。