【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);