Android照片墙加强版,使用ViewPager实现画廊效果

转载请注明出处:

记得关于照片墙的文章我已经写过好几篇了,有最基本的照片墙,有瀑布流模式的照片墙,后来又在瀑布流的基础之上加入了查看大图和多点触控缩放的功能。总体来说,照片墙这个Demo在这几篇文章的改进中已经变得较为完善了,本想关于这个功能的系列到此为止,但有朋友跟我反应,觉得在查看大图的时候最好能通过左右滑动来浏览前后的图片。恩,确实,好像比较高端的一些应用都有这样的效果,那么本篇文章中我们来继续对照片墙这个Demo进行改进,让它变得更加高端大气上档次!

整理了一下思路,感觉自己去实现一套通过左右滑动来切换图片的功能非常不划算,需要编写不少的代码。这里为了要让实现简单化,我们准备使用Android提供的ViewPager来完成这个功能。

ViewPager的基本用法我就不在本文中介绍了,如果还不了解的朋友可以到王鹏兄那里先学习一下。

另外,本篇文章的代码是完全在之前文章的基础上进行开发的,所以如果你还没有看过我前面所写的关于照片墙的文章,建议先去阅读一下 Android瀑布流照片墙实现,体验不规则排列的美感和 Android多点触控技术实战,自由地对图片进行缩放和移动这两篇文章。

下面就让我们开始动手吧,打开PhotoWallFallsDemo这个项目,首先修改image_details.xml这个布局文件中的代码,如下所示:

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android=""android:layout_width="match_parent"android:layout_height="match_parent" ><android.support.v4.view.ViewPagerandroid:id="@+id/view_pager"android:layout_width="match_parent"android:layout_height="match_parent" ></android.support.v4.view.ViewPager><TextViewandroid:id="@+id/page_text"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_alignParentBottom="true"android:layout_centerHorizontal="true"android:layout_marginBottom="10dp"android:textColor="#fff"android:textSize="18sp" /></RelativeLayout>这里我们在布局文件中放置了两个控件,ViewPager和TextView,其中ViewPager自然是用来管理所有的图片的了,而TextView则是用于显示当前图片的页数以及总页数。

然后新建一个zoom_image_layout.xml,在这里放入ZoomImageView控件,如下所示:

<?xml version="1.0" encoding="utf-8"?><com.example.photowallfallsdemo.ZoomImageView xmlns:android=""android:id="@+id/zoom_image_view"android:layout_width="match_parent"android:layout_height="match_parent"android:background="#000000" ></com.example.photowallfallsdemo.ZoomImageView>

接下来修改ImageDetailsActivity中的代码,在这里去实现ViewPager的具体功能,代码如下所示:

public class ImageDetailsActivity extends Activity implements OnPageChangeListener {/** * 用于管理图片的滑动 */private ViewPager viewPager;/** * 显示当前图片的页数 */private TextView pageText;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);requestWindowFeature(Window.FEATURE_NO_TITLE);setContentView(R.layout.image_details);int imagePosition = getIntent().getIntExtra("image_position", 0);pageText = (TextView) findViewById(R.id.page_text);viewPager = (ViewPager) findViewById(R.id.view_pager);ViewPagerAdapter adapter = new ViewPagerAdapter();viewPager.setAdapter(adapter);viewPager.setCurrentItem(imagePosition);viewPager.setOnPageChangeListener(this);// 设定当前的页数和总页数pageText.setText((imagePosition + 1) + "/" + Images.imageUrls.length);}/** * ViewPager的适配器 * * @author guolin */class ViewPagerAdapter extends PagerAdapter {@Overridepublic Object instantiateItem(ViewGroup container, int position) {String imagePath = getImagePath(Images.imageUrls[position]);Bitmap bitmap = BitmapFactory.decodeFile(imagePath);if (bitmap == null) {bitmap = BitmapFactory.decodeResource(getResources(),R.drawable.empty_photo);}View view = LayoutInflater.from(ImageDetailsActivity.this).inflate(R.layout.zoom_image_layout, null);ZoomImageView zoomImageView = (ZoomImageView) view.findViewById(R.id.zoom_image_view);zoomImageView.setImageBitmap(bitmap);container.addView(view);return view;}@Overridepublic int getCount() {return Images.imageUrls.length;}@Overridepublic boolean isViewFromObject(View arg0, Object arg1) {return arg0 == arg1;}@Overridepublic void destroyItem(ViewGroup container, int position, Object object) {View view = (View) object;container.removeView(view);}}/** * 获取图片的本地存储路径。 * * @param imageUrl *图片的URL地址。 * @return 图片的本地存储路径。 */private String getImagePath(String imageUrl) {int lastSlashIndex = imageUrl.lastIndexOf("/");String imageName = imageUrl.substring(lastSlashIndex + 1);String imageDir = Environment.getExternalStorageDirectory().getPath()+ "/PhotoWallFalls/";File file = new File(imageDir);if (!file.exists()) {file.mkdirs();}String imagePath = imageDir + imageName;return imagePath;}@Overridepublic void onPageScrollStateChanged(int arg0) {}@Overridepublic void onPageScrolled(int arg0, float arg1, int arg2) {}@Overridepublic void onPageSelected(int currentPage) {// 每当页数发生改变时重新设定一遍当前的页数和总页数pageText.setText((currentPage + 1) + "/" + Images.imageUrls.length);}}这个类也是实现滑动切换图片功能最主要的一个类了,由于ViewPager的用法并不复杂,所以这个类的代码也不多,下面我们来仔细地分析一下。自信的生命最美丽!

Android照片墙加强版,使用ViewPager实现画廊效果

相关文章:

你感兴趣的文章:

标签云: