time 
设为首页】【收藏本站
当前位置: 主页 > 电脑网络 > 操作系统 > 嵌入式 > Android > Android使用ViewPager实现画廊效果的加强版照片墙

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

时间:2014-06-20 10:23 点击:2935次 字体:[ ]




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

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

ViewPager的基本用法我就不在本文中介绍了,如果还不了解的朋友可以看http://www.fengfly.com/plus/view-215108-1.html 。

另外,本篇文章的代码是完全在之前文章的基础上进行开发的,所以如果你还没有看过我前面所写的关于照片墙的文章,建议先去阅读一下http://www.fengfly.com/plus/view-214550-1.htmlhttp://www.fengfly.com/plus/view-214551-1.html这两篇文章。

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

  1. <?xml version="1.0" encoding="utf-8"?> 
  2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
  3.     android:layout_width="match_parent" 
  4.     android:layout_height="match_parent" > 
  5.  
  6.     <android.support.v4.view.ViewPager 
  7.         android:id="@+id/view_pager" 
  8.         android:layout_width="match_parent" 
  9.         android:layout_height="match_parent" > 
  10.     </android.support.v4.view.ViewPager> 
  11.  
  12.     <TextView 
  13.         android:id="@+id/page_text" 
  14.         android:layout_width="wrap_content" 
  15.         android:layout_height="wrap_content" 
  16.         android:layout_alignParentBottom="true" 
  17.         android:layout_centerHorizontal="true" 
  18.         android:layout_marginBottom="10dp" 
  19.         android:textColor="#fff" 
  20.         android:textSize="18sp" /> 
  21.  
  22. </RelativeLayout> 

这里我们在布局文件中放置了两个控件,ViewPager和TextView,其中ViewPager自然是用来管理所有的图片的了,而TextView则是用于显示当前图片的页数以及总页数。

 

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

  1. <?xml version="1.0" encoding="utf-8"?> 
  2. <com.example.photowallfallsdemo.ZoomImageView xmlns:android="http://schemas.android.com/apk/res/android" 
  3.     android:id="@+id/zoom_image_view" 
  4.     android:layout_width="match_parent" 
  5.     android:layout_height="match_parent" 
  6.     android:background="#000000" > 
  7.  
  8. </com.example.photowallfallsdemo.ZoomImageView> 

 

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

  1. public class ImageDetailsActivity extends Activity implements OnPageChangeListener {  
  2.  
  3.     /**  
  4.      * 用于管理图片的滑动  
  5.      */ 
  6.     private ViewPager viewPager;  
  7.  
  8.     /**  
  9.      * 显示当前图片的页数  
  10.      */ 
  11.     private TextView pageText;  
  12.  
  13.     @Override 
  14.     protected void onCreate(Bundle savedInstanceState) {  
  15.         super.onCreate(savedInstanceState);  
  16.         requestWindowFeature(Window.FEATURE_NO_TITLE);  
  17.         setContentView(R.layout.image_details);  
  18.         int imagePosition = getIntent().getIntExtra("image_position"0);  
  19.         pageText = (TextView) findViewById(R.id.page_text);  
  20.         viewPager = (ViewPager) findViewById(R.id.view_pager);  
  21.         ViewPagerAdapter adapter = new ViewPagerAdapter();  
  22.         viewPager.setAdapter(adapter);  
  23.         viewPager.setCurrentItem(imagePosition);  
  24.         viewPager.setOnPageChangeListener(this);  
  25.         // 设定当前的页数和总页数  
  26.         pageText.setText((imagePosition + 1) + "/" + Images.imageUrls.length);  
  27.     }  
  28.  
  29.     /**  
  30.      * ViewPager的适配器  
  31.      *   
  32.      * @author guolin  
  33.      */ 
  34.     class ViewPagerAdapter extends PagerAdapter {  
  35.  
  36.         @Override 
  37.         public Object instantiateItem(ViewGroup container, int position) {  
  38.             String imagePath = getImagePath(Images.imageUrls[position]);  
  39.             Bitmap bitmap = BitmapFactory.decodeFile(imagePath);  
  40.             if (bitmap == null) {  
  41.                 bitmap = BitmapFactory.decodeResource(getResources(),  
  42.                         R.drawable.empty_photo);  
  43.             }  
  44.             View view = LayoutInflater.from(ImageDetailsActivity.this).inflate(  
  45.                     R.layout.zoom_image_layout, null);  
  46.             ZoomImageView zoomImageView = (ZoomImageView) view  
  47.                     .findViewById(R.id.zoom_image_view);  
  48.             zoomImageView.setImageBitmap(bitmap);  
  49.             container.addView(view);  
  50.             return view;  
  51.         }  
  52.  
  53.         @Override 
  54.         public int getCount() {  
  55.             return Images.imageUrls.length;  
  56.         }  
  57.  
  58.         @Override 
  59.         public boolean isViewFromObject(View arg0, Object arg1) {  
  60.             return arg0 == arg1;  
  61.         }  
  62.  
  63.         @Override 
  64.         public void destroyItem(ViewGroup container, int position, Object object) {  
  65.             View view = (View) object;  
  66.             container.removeView(view);  
  67.         }  
  68.  
  69.     }  
  70.  
  71.     /**  
  72.      * 获取图片的本地存储路径。  
  73.      *   
  74.      * @param imageUrl  
  75.      *            图片的URL地址。  
  76.      * @return 图片的本地存储路径。  
  77.      */ 
  78.     private String getImagePath(String imageUrl) {  
  79.         int lastSlashIndex = imageUrl.lastIndexOf("/");  
  80.         String imageName = imageUrl.substring(lastSlashIndex + 1);  
  81.         String imageDir = Environment.getExternalStorageDirectory().getPath()  
  82.                 + "/PhotoWallFalls/";  
  83.         File file = new File(imageDir);  
  84.         if (!file.exists()) {  
  85.             file.mkdirs();  
  86.         }  
  87.         String imagePath = imageDir + imageName;  
  88.         return imagePath;  
  89.     }  
  90.  
  91.     @Override 
  92.     public void onPageScrollStateChanged(int arg0) {  
  93.  
  94.     }  
  95.  
  96.     @Override 
  97.     public void onPageScrolled(int arg0, float arg1, int arg2) {  
  98.  
  99.     }  
  100.  
  101.     @Override 
  102.     public void onPageSelected(int currentPage) {  
  103.         // 每当页数发生改变时重新设定一遍当前的页数和总页数  
  104.         pageText.setText((currentPage + 1) + "/" + Images.imageUrls.length);  
  105.     }  
  106.  
  107. }  



本文地址 : http://www.fengfly.com/plus/view-215107-1.html
标签: Android ViewPager
------分隔线----------------------------
最新评论 查看所有评论
发表评论 查看所有评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
验证码: