这里主要还是用到了Android自带的ViewPager控件,用于实现水平切换,并且它自带了滑动效果。将每一张需要展示的图片放在独立的Fragment中,ViewPager每滑动一次,展示新的Fragment。
1.设计Fragment的布局
2.建立自定义的PictureSlideFragment类继承自Fragment
由于每一个Fragment展示的图片不同,因此需要在创建PictureSlideFragment时传入需要加载的图片url。添加静态方法newInstance()获得一个包含图片url的PictureSlideFragmen的实例。接着在其执行onCreate()方法时,对url赋值,接着就能在onCreateView()方法中通过findViewById()找到ImageView的实例,并将其图片来源设置为指定的url.这里使用强大的Glide工具为ImageView加载网络图片。Glide的load()方法有很多重载,可以直接传入drawable的ResourceId加载本地图片,也可以传入url加载网络图片。此时,Fragment中显示的ImageView还是静态的,它不可移动,不可缩放,显然不符合查看高清大图时的需求。因此在使用Glide为ImageView填充图片之前,我们使用PhotoViewAttacher为图片添加支持缩放、平移的属性。至此,应该能符合我们的要求了,但是由于使用了PhotoViewAttacher,它有一个特性,就是在图片填充完毕后,需要调用update()方法。由于Glide加载网络图片的方式是异步的,因此Glide的into()方法中不能简单地传入需要填充的ImageView了,而是需要传入一个基于imageView的GlideDrawableImageViewTarget对象,并重写它的onResourceReady()方法,在该方法中调用PhotoViewAttacher的update()方法,使图片重新适配布局。注意,如果只是单纯地在Glide填充ImageView之后再调用上述update()方法,将会出现图片显示错位的情况。一开始我以为这是PhotoViewAttacher运用到ViewPager中的bug,困扰许久后我终于解决了这个小问题。
public class PictureSlideFragment extends Fragment {
private String url;
private PhotoViewAttacher mAttacher;
private ImageView imageView;
public static PictureSlideFragment newInstance(String url) {
PictureSlideFragment f = new PictureSlideFragment();
Bundle args = new Bundle();
args.putString("url", url);
f.setArguments(args);
return f; //获得一个包含图片url的PictureSlideFragmen的实例
}
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
url = getArguments() != null ? getArguments().getString("url") : "http://www.zhagame.com/wp-content/uploads/2016/01/JarvanIV_6.jpg";
}
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View v=inflater.inflate(R.layout.fragment_picture_slide,container,false);
imageView= (ImageView) v.findViewById(R.id.iv_main_pic);
mAttacher = new PhotoViewAttacher(imageView);//使用PhotoViewAttacher为图片添加支持缩放、平移的属性
Glide.with(getActivity()).load(url).crossFade().into(new GlideDrawableImageViewTarget(imageView) {
@Override
public void onResourceReady(GlideDrawable resource, GlideAnimation animation) {
super.onResourceReady(resource, animation);
mAttacher.update();//调用PhotoViewAttacher的update()方法,使图片重新适配布局
}
});
return v;
}
}
3.定义PicViewerActivity布局
至此,单个Fragment就算设计好了。现在需要设计装载这些Fragment的Activity。它的布局文件如下:
同样十分简单,它只包含了一个ViewPager与一个简单的TextView,后者用于显示当前页数以及总页数。
4.定义一个PicViewerActivity完成页面滑动显示的逻辑
首先定义PictureSlidePagerAdapter继承自FragmentStatePagerAdapter,并重写它的getItem()方法,它返回的是一个Fragment对象,这里我们返回的是展示不同网络图片的PictureSlideFragment。getCount()方法用于指定ViewPager的总页数,这里我们返回url地址的总个数。
接着,我们在Activity的onCreate()方法中获得ViewPager的实例,并为它指定一个PictureSlidePagerAdapter适配器。至此,已经实现了左右滑动页面,加载网络图片的基本功能了。最后我们为ViewPager设定页面滑动的监听器OnPageChangeListener,重写它的onPageScrolled()方法,在当前页面滑动至其他页面后,获取position值,并将其显示到TextView构成的简易页面指示器上。
/**Simple TouchGallery demo based on ViewPager and Photoview.
* Created by Trojx on 2016/1/3.
*/
public class PicViewerActivity extends AppCompatActivity {
private ViewPager viewPager;
private TextView tv_indicator;
private ArrayList urlList;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_pic_viewer);
String [] urls={"http://www.zhagame.com/wp-content/uploads/2016/01/JarvanIV_0.jpg",
"http://www.zhagame.com/wp-content/uploads/2016/01/JarvanIV_1.jpg",
"http://www.zhagame.com/wp-content/uploads/2016/01/JarvanIV_2.jpg",
"http://www.zhagame.com/wp-content/uploads/2016/01/JarvanIV_3.jpg",
"http://www.zhagame.com/wp-content/uploads/2016/01/JarvanIV_4.jpg",
"http://www.zhagame.com/wp-content/uploads/2016/01/JarvanIV_5.jpg",
"http://www.zhagame.com/wp-content/uploads/2016/01/JarvanIV_6.jpg",};//需要加载的网络图片
urlList = new ArrayList<>();
Collections.addAll(urlList, urls);
viewPager = (ViewPager) findViewById(R.id.viewpager);
tv_indicator = (TextView) findViewById(R.id.tv_indicator);
viewPager.setAdapter(new PictureSlidePagerAdapter(getSupportFragmentManager()));
viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
tv_indicator.setText(String.valueOf(position+1)+"/"+urlList.size());//在当前页面滑动至其他页面后,获取position值
}
@Override
public void onPageSelected(int position) {
}
@Override
public void onPageScrollStateChanged(int state) {
}
});
}
private class PictureSlidePagerAdapter extends FragmentStatePagerAdapter{
public PictureSlidePagerAdapter(FragmentManager fm) {
super(fm);
}
@Override
public Fragment getItem(int position) {
return PictureSlideFragment.newInstance(urlList.get(position));//返回展示不同网络图片的PictureSlideFragment
}
@Override
public int getCount() {
return urlList.size();//指定ViewPager的总页数
}
}
}
我把这个简单功能的实现单独做成了一个小Demo,以备以后参考使用。完整代码在此处,项目地址:MyTouchGallery
以下是运行展示:
参考文章:
1.使用ViewPager实现图片滑动展示 http://blog.csdn.net/liujianjun_1985/article/details/40114393
2.glide的配置 http://blog.csdn.net/lijinhua7602/article/details/45624157