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

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

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

        接下来,便是图片浏览器的实现过程了,日常第一步界面布局,从上面贴出来的图片可以看出界面就一个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);