运用ViewPager实现图片简单滑屏效果【转自http://blog.csdn.net/harvic880925/article/details/38453725 】

1.在主布局文件里加入

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    tools:context="com.example.testviewpage_1.MainActivity" >

<android.support.v4.view.ViewPager
    android:id="@+id/viewpager"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center" />

</RelativeLayout>

其中 <android.support.v4.view.ViewPager /> 是ViewPager对应的组件,要将其放到想要滑动的位置

2、新建三个layout,用于滑动切换的视图

从效果图中也可以看到,我们的三个视图都非常简单,里面没有任何的控件,大家当然可以往里添加各种控件,但这里是个DEMO,只详解原理即可,所以我这里仅仅用背景来区别不用layout布局。

布局代码分别如下:

layout1.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ffffff"
    android:orientation="vertical" >
    

</LinearLayout>
layout2.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ffff00"
    android:orientation="vertical" >
    

</LinearLayout>
layout3.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ff00ff"
    android:orientation="vertical" >
    

</LinearLayout>

二、代码实战

先上整体代码,然后逐步讲解。
package com.example.testviewpage_1;
/**
 * @author  harvic
 * @date 2014.8.9
 */
import java.util.ArrayList;
import java.util.List;
import java.util.zip.Inflater;

import android.app.Activity;
import android.os.Bundle;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;


public class MainActivity extends Activity {

	private View view1, view2, view3;
	private ViewPager viewPager;  //对应的viewPager
	
	private List<View> viewList;//view数组
   
   
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        viewPager = (ViewPager) findViewById(R.id.viewpager);
        LayoutInflater inflater=getLayoutInflater();
        view1 = inflater.inflate(R.layout.layout1, null);
        view2 = inflater.inflate(R.layout.layout2,null);
        view3 = inflater.inflate(R.layout.layout3, null);
        
        viewList = new ArrayList<View>();// 将要分页显示的View装入数组中
		viewList.add(view1);
		viewList.add(view2);
		viewList.add(view3);
		
		
		PagerAdapter pagerAdapter = new PagerAdapter() {
			
			@Override
			public boolean isViewFromObject(View arg0, Object arg1) {
				// TODO Auto-generated method stub
				return arg0 == arg1;
			}
			
			@Override
			public int getCount() {
				// TODO Auto-generated method stub
				return viewList.size();
			}
			
			@Override
			public void destroyItem(ViewGroup container, int position,
					Object object) {
				// TODO Auto-generated method stub
				container.removeView(viewList.get(position));
			}
			
			@Override
			public Object instantiateItem(ViewGroup container, int position) {
				// TODO Auto-generated method stub
				container.addView(viewList.get(position));
				
				
				return viewList.get(position);
			}
		};
		
		
		viewPager.setAdapter(pagerAdapter);
		
    }


}
代码量很小,全部放在了OnCreate()函数中。

1、先看声明的变量的意义:

private View view1, view2, view3;
private List<View> viewList;//view数组
private ViewPager viewPager;  //对应的viewPager

首先viewPager对应 <android.support.v4.view.ViewPager/>控件。

view1,view2 ,view3对应我们的三个layout,即layout1.xml,layout2.xml,layout3.xml

viewList是一个View数组,盛装上面的三个VIEW

2、接下来是他们的初始化过程:

viewPager = (ViewPager) findViewById(R.id.viewpager);
LayoutInflater inflater=getLayoutInflater();
view1 = inflater.inflate(R.layout.layout1, null);
view2 = inflater.inflate(R.layout.layout2,null);
view3 = inflater.inflate(R.layout.layout3, null);

viewList = new ArrayList<View>();// 将要分页显示的View装入数组中
viewList.add(view1);
viewList.add(view2);
viewList.add(view3);
初始化过程难度不大,就是将资源与变量联系起来布局,最后将实例化的view1,view2,view3添加到viewList中

3、PageAdapter——PageView的适配器

适配器这个东东想必大家都不莫生,在ListView中也有适配器,listView通过重写GetView()函数来获取当前要加载的Item。而PageAdapter不太相同,毕竟PageAdapter是单个VIew的合集。

PageAdapter 必须重写的四个函数:

  • boolean isViewFromObject(View arg0, Object arg1)
  • int getCount() 
  • void destroyItem(ViewGroup container, int position,Object object)
  • Object instantiateItem(ViewGroup container, int position)

先看看各个函数,我们上面都做了什么吧:

@Override
public int getCount() {
	// TODO Auto-generated method stub
	return viewList.size();
}
getCount():返回要滑动的VIew的个数

@Override
public void destroyItem(ViewGroup container, int position,
		Object object) {
	// TODO Auto-generated method stub
	container.removeView(viewList.get(position));
}
destroyItem():从当前container中删除指定位置(position)的View;
@Override
public Object instantiateItem(ViewGroup container, int position) {
	// TODO Auto-generated method stub
		container.addView(viewList.get(position));
		
		
		return viewList.get(position);
	}
};
instantiateItem():做了两件事,第一:将当前视图添加到container中,第二:返回当前View
@Override
public boolean isViewFromObject(View arg0, Object arg1) {
	// TODO Auto-generated method stub
	return arg0 == arg1;
}
isViewFromObject():对于这个函数就先不做讲解,大家目前先知道它要这样重写就行了,后面我们会对它进行改写。
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
public class Touch extends Activity implements OnTouchListener, OnClickListener { private static final String TAG = "Touch" ; // These matrices will be used to move and zoom image Matrix matrix = new Matrix(); Matrix savedMatrix = new Matrix(); PointF start = new PointF(); PointF mid = new PointF(); float oldDist; private ImageView view; private Button zoomIn, zoomOut; //button zoom private float scaleWidth = 1; private float scaleHeight = 1; private Bitmap bmp, zoomedBMP; private int zoom_level = 0; private static final double ZOOM_IN_SCALE = 1.25;//放大系数 private static final double ZOOM_OUT_SCALE = 0.8;//缩小系数 // We can be in one of these 3 states static final int NONE = 0; static final int DRAG = 1; static final int ZOOM = 2; int mode = NONE; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); //放大按钮 zoomIn = (Button) findViewById(R.id.zoom_in); //缩小按钮 zoomOut = (Button) findViewById(R.id.zoom_out); zoomIn.setOnClickListener(this); zoomOut.setOnClickListener(this); view = (ImageView) findViewById(R.id.imageView); view.setOnTouchListener(this); //取得drawable中图片,放大,缩小,多点触摸的作用对象 bmp = BitmapFactory.decodeResource(Touch.this.getResources(), R.drawable.butterfly); } public boolean onTouch(View v, MotionEvent event) { // Handle touch events here... ImageView view = (ImageView) v; // Handle touch events here... switch (event.getAction() & MotionEvent.ACTION_MASK) { //设置拖拉模式 case MotionEvent.ACTION_DOWN: savedMatrix.set(matrix); start.set(event.getX(), event.getY()); Log.d(TAG, "mode=DRAG" ); mode = DRAG; break; case MotionEvent.ACTION_UP: case MotionEvent.ACTION_POINTER_UP: mode = NONE; Log.d(TAG, "mode=NONE" ); break; //设置多点触摸模式 case MotionEvent.ACTION_POINTER_DOWN: oldDist = spacing(event); Log.d(TAG, "oldDist=" + oldDist); if (oldDist > 10f) { savedMatrix.set(matrix); midPoint(mid, event); mode = ZOOM; Log.d(TAG, "mode=ZOOM" ); } break; //若为DRAG模式,则点击移动图片 case MotionEvent.ACTION_MOVE: if (mode == DRAG) { matrix.set(savedMatrix); // 设置位移 matrix.postTranslate(event.getX() - start.x, event.getX() - start.x); } //若为ZOOM模式,则多点触摸缩放 else if (mode == ZOOM) { float newDist = spacing(event); Log.d(TAG, "newDist=" + newDist); if (newDist > 10f) { matrix.set(savedMatrix); float scale = newDist / oldDist; //设置缩放比例和图片中点位置 matrix.postScale(scale, scale, mid.x, mid.y); } } break; } // Perform the transformation view.setImageMatrix(matrix); return true; // indicate event was handled } //计算移动距离 private float spacing(MotionEvent event) { float x = event.getX(0) - event.getX(1); float y = event.getY(0) - event.getY(1); return FloatMath.sqrt(x * x + y * y); } //计算中点位置 private void midPoint(PointF point, MotionEvent event) { float x = event.getX(0) + event.getX(1); float y = event.getY(0) + event.getY(1); point.set(x / 2, y / 2); } //放大,缩小按钮点击事件 @Override public void onClick(View v) { if(v == zoomIn){ enlarge(); }else if (v == zoomOut) { small(); } } //按钮点击缩小函数 private void small() { int bmpWidth = bmp.getWidth(); int bmpHeight = bmp.getHeight(); scaleWidth = (float) (scaleWidth * ZOOM_OUT_SCALE); scaleHeight = (float) (scaleHeight * ZOOM_OUT_SCALE); Matrix matrix = new Matrix(); matrix.postScale(scaleWidth, scaleHeight); zoomedBMP = Bitmap.createBitmap(bmp, 0, 0, bmpWidth, bmpHeight, matrix, true); view.setImageBitmap(zoomedBMP); } //按钮点击放大函数 private void enlarge() { try { int bmpWidth = bmp.getWidth(); int bmpHeight = bmp.getHeight(); scaleWidth = (float) (scaleWidth * ZOOM_IN_SCALE); scaleHeight = (float) (scaleHeight * ZOOM_IN_SCALE); Matrix matrix = new Matrix(); matrix.postScale(scaleWidth, scaleHeight); zoomedBMP = Bitmap.createBitmap(bmp, 0, 0, bmpWidth, bmpHeight, matrix, true); view.setImageBitmap(zoomedBMP); } catch (Exception e) { //can't zoom because of memory issue, just ignore, no big deal
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值