【GT-安卓应用开发之图片浏览器】

前言：昨天分享了动态的发布（图片选择器），今天分享一下与之对应的一个小功能—图片浏览器。我利用ViewPager+Fragment实现这一功能，接下来一起了解一下吧。

首先，贴上两张图片，第一张是动态列表展示，第二张是点击之后进入的图片浏览器，今天只是分享这一功能的实现，请忽视界面哈哈。

【GT-安卓应用开发之图片浏览器】

接下来，便是图片浏览器的实现过程了，日常第一步界面布局，从上面贴出来的图片可以看出界面就一个ViewPager和一个TextView组成，整个界面采用相对布局，ViewPager宽高都是match_parent，TextView居右居下放置。代码：

<?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:gravity="center">
    <android.support.v4.view.ViewPager
             android:id="@+id/vp_photo_view"
             android:layout_width="match_parent"
             android:layout_height="match_parent"
             android:layout_weight="1">
         </android.support.v4.view.ViewPager>
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:layout_marginRight="@dimen/dp_20"
        android:layout_marginBottom="@dimen/dp_20"
        android:id="@+id/tv_index"
        android:text="1/10"/>
</RelativeLayout>

Step2，创建Activity

根据界面和功能需求，我们能看出这个Activity有两个必须的参数，也就是当前索引值以及一个存储图片Url的List，当用户点击预览图片的时候，利用Intent传递这两个参数并启动该Activity。

Step3，定义适配器

我们都知道安卓是利用适配器来将界面和数据进行关联的，这个图片浏览器也是一样的。我们这里所用的适配器很简单，只要创建一个类继承FragmentPagerAdapter并且实现其getItem和getCount两个方法就可以，下面贴出代码

public class PhotoViewAdapter extends FragmentPagerAdapter{
    private List<Fragment> mList = new ArrayList<Fragment>();
    public PhotoViewAdapter(FragmentManager fm,List<Fragment> mList){
        super(fm);
        this.mList = mList;
    }

    @Override
    public Fragment getItem(int position) {
        return mList.get(position);
    }

    @Override
    public int getCount() {
        return mList==null?0:mList.size();
    }
}

Step4，碎片的创建

怎么展示图片呢，由于这里加载的都是网络图片，所以我决定使用Fragment来加载并显示图片，初始Fragment的时候传递图片的url，并在碎片的onCreateView方法中利用Glide加载图片。

public class PhotoViewFragment extends Fragment{
    private String url;
    private View view;
    public PhotoViewFragment(String url){
        super();
        this.url = url;
    }
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        if(view == null){
            view = inflater.inflate(R.layout.activity_large_image,null);
        }
        ImageView iv = view.findViewById(R.id.iv_large);
        GlideLoadUtils.getInstance().glideLoad(MyApplication.getContextObject(), HttpUrl.BASE_URL2 + url, iv, R.color.default_bg);
        return view;
    }
}

Step5，初始化碎片列表

private void initFragments() {
    mList = new ArrayList<Fragment>();
    for(int i = 0;i<list.size();i++){
        PhotoViewFragment fm = new PhotoViewFragment(list.get(i));
        mList.add(fm);
    }
}

Step6，ViewPager初始化

vp.setAdapter(adapter);
vp.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

    }

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

    @Override
    public void onPageScrollStateChanged(int state) {

    }
});
vp.setCurrentItem(index);