新浪微博（2）之点击图片放大至全屏---ViewPager用法

为了学习抓去微博资料而使用的ViewPager控件

需要实现一下功能：

1. 点击图片放大到全屏
2. 图片可放大缩小移动
3. 图片可左右切换（在同一条微博内容内的配图之间）
4. 额外---添加图片当前位置/图片总数的count功能

一开始使用了OnTouchListener去实现左右滑动切换图片的功能，但是因为放大缩小的功能是通过OnTouchListener实现的，所以如果滑动切换功能也通过这个listener实现的话就无法同时实现放大缩小功能了。

使用了以下控件：

1. ImageView ---第三方有放大缩小功能插件
2. TextView
3. ViewPager
4. ImageLoader --- 第三方显示图片插件

首先是布局部分

1、ViewPager控件自己单独一个布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/image"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="#000000"
    android:orientation="vertical" >

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="fill_parent"
        android:layout_height="match_parent" >
    </android.support.v4.view.ViewPager>

</LinearLayout>
           

2、ImageView 和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:orientation="vertical" >
    
     <TextView
        android:id="@+id/count"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="40dp"
        android:textColor="#FFFFFF" />
     
     <com.example.intergrationpro.PinchImageView
            android:id="@+id/large_photo"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_below="@+id/count" />

</RelativeLayout>
           

！！！重点在于点击A图，打开的就是A图，并不是博文配图的第一张图，因为这样才能在左右滑动的时候切换到相应的下一张图或者上一张图。 只要使用这行代码就可以实现定位图片index的功能，但是必须要按照这个顺序。要在设定adapter之后写上才行。

viewpager.setAdapter(adapter);
	viewpager.setCurrentItem(index);
           

这样就能实现点击A图进入A图，点击B图进入B图，然后按index的顺序切换上下图。

以下这个方法其实不是很清楚意思，不过应该是固定这么写的。所以作为记录也记一下。

@Override

		public boolean isViewFromObject(View arg0, Object arg1) {

			// TODO Auto-generated method stub

			return arg0==arg1;

		}
           

下面这两个方法比较重要，因为一直出了很多问题都是这两个方法没写对。

@Override
		public void destroyItem(ViewGroup container,int position,Object o){

			((ViewPager)container).removeView((View)o);
		}



		//设置ViewPager指定位置要显示的view
		@Override
		public Object instantiateItem(ViewGroup container,int position){
			
			//imageview单独放一个layout，然后new 一个view来返回。
			View view = View.inflate(context, R.layout.viewpager_image,  null);

			ImageView large = (ImageView) view.findViewById(R.id.large_photo);   
			ImageLoader.getInstance().displayImage(list.get(position), large);
			
			TextView count = (TextView) view.findViewById(R.id.count);
			count.setText(position+1+"/"+list.size());

			large.setOnClickListener(new OnClickListener(){

				@Override
				public void onClick(View v) {
					// TODO Auto-generated method stub
					finish();
				}				
			});
			
			container.addView(view);
			return view;

		}
	}
           

需要新声明一个View去处理ImageView， 然后把View添加到container返回这个view。 使用OnClickListener去关闭当前Activity是避免跟OnTouchListener的放大缩小功能有冲突。

效果图：

此post用于记下避免日后自己忘记。