android常用的控件ViewPager的使用

ViewPager是android扩展包v4包中的类，这个类可以让用户左右切换当前的view,这个控件可用跟fragment使用，Fragment这个下次会单独讲到用法，ViewPager类需要一个PagerAdapter适配器类给它提供数据。跟listview一样需要适配器来填充数据。我们先来看看主界面的xml<LinearLayout xmlns:androi

Guo_IT

29574人浏览 · 2016-06-05 22:14:49

Guo_IT · 2016-06-05 22:14:49 发布

ViewPager是android扩展包v4包中的类，这个类可以让用户左右切换当前的view,这个控件可用跟fragment使用，Fragment 这个下次会单独讲到用法，ViewPager类需要一个PagerAdapter适配器类给它提供数据。跟listview一样需要适配器来填充数据。

我们先来看看主界面的xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#FFBA55"
    android:orientation="vertical"
    tools:context=".MainActivity" >
  
    <android.support.v4.view.ViewPager
        android:id="@+id/pageview"
        android:layout_width="fill_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:flipInterval="30"
        android:persistentDrawingCache="animation" >
    </android.support.v4.view.ViewPager>
    <ImageView 
         android:id="@+id/imagevie"
         android:layout_width="fill_parent"
         android:layout_height="wrap_content"
         android:scaleType="matrix"
         android:src="@drawable/line"
         />

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal" >

        <TextView
            android:id="@+id/tv1"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_weight="1"
            android:gravity="center"
            android:text="C语言"
            android:textAlignment="center" />

        <TextView
            android:id="@+id/tv2"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_weight="1"
            android:gravity="center"
            android:text="JAVA语言"
            android:textAlignment="center" />

        <TextView
            android:id="@+id/tv3"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_weight="1"
            android:gravity="center"
            android:text="C#语言"
            android:textAlignment="center" />
    </LinearLayout>

</LinearLayout>

xml比较简单，底部为3个TextView后面可用点击切换ViewPager 在上面为一个游标一样根据选择的页数来进行移动，这个等下代码里会有就是一些逻辑，其实也很简单。最上面则是ViewPager 。

注意：有的新手不懂android.support.v4.view.ViewPager 东西怎么打出来，其实就是一个空间可用在Activity中先申明一个ViewPager 然后鼠标悬停在类上就可以看到android.support.v4.view.ViewPager 。

接下来看下适配器的工作原理：

package com.example.viewpager;

import java.util.ArrayList;
import java.util.List;

import android.R.dimen;
import android.support.v4.view.PagerAdapter;
import android.util.Log;
import android.view.View;
import android.view.ViewGroup;

public class MyViewPageAdapter extends PagerAdapter
{
       private ArrayList<View> listviews=null;
       public MyViewPageAdapter()
	{
		// TODO 自动生成的构造函数存根
	}
	MyViewPageAdapter(ArrayList<View> listViews)
	{
		Log.w("INFOMATION", "1:构造函数");
		this.listviews=listViews;
	}
	@Override
	public int getCount()
	{
		// TODO 自动生成的方法存根
		Log.w("INFOMATION", "2:getCount()");
		return listviews.size();
	}
        @Override
	public boolean isViewFromObject(View arg0, Object arg1)
	{
		Log.w("INFOMATION", "isViewFromObject");
		// TODO 自动生成的方法存根
		return  arg0==arg1;
	}
	@Override
	public Object instantiateItem(ViewGroup container, int position)
	{
		Log.w("INFOMATION", "instantiateItem");
		container.addView(listviews.get(position));
		
		return listviews.get(position);
	}
  @Override
public void destroyItem(ViewGroup container, int position, Object object)
{
	  Log.w("INFOMATION", "destroyItem");
	// TODO 自动生成的方法存根
	 container.removeView(listviews.get(position));
}
}

这些要实现的方法作用可用去 android developer 官网找到这个适配器里面有详细的介绍。

其实适配器的工作原理可用在方法里打个日志我们可以在Log 里面清楚得看到执行顺序。

接下来看下主Activity的代码：

package com.example.viewpager;

import java.util.ArrayList;

import android.os.Bundle;
import android.app.Activity;
import android.graphics.BitmapFactory;
import android.graphics.Matrix;
import android.support.v4.view.PagerTabStrip;
import android.support.v4.view.PagerTitleStrip;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.util.DisplayMetrics;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.animation.Animation;
import android.view.animation.TranslateAnimation;
import android.widget.ImageView;
import android.widget.TextView;

public class MainActivity extends Activity implements OnClickListener,OnPageChangeListener {


	private  ViewPager vPager_one;
	private TextView tv1,tv2,tv3;
	private ImageView imageView;
	private ArrayList<View> alist;
	//偏移量
	private int offset;
	//当前的PAGE的编号
	private int index; 
	private int bmpWidth;//图片宽度
	private int one=0;
	private int two=0;
	private MyViewPageAdapter mAdapter;
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		initControl();

		//获取图片的宽度
		bmpWidth=BitmapFactory.decodeResource(getResources(), R.drawable.line).getWidth();
		DisplayMetrics dMetrics=new DisplayMetrics();
		getWindowManager().getDefaultDisplay().getMetrics(dMetrics);
		//获取屏幕分辨率
		int screen=dMetrics.widthPixels;
		//偏移量
		offset=(screen/3-bmpWidth)/2;
		one=offset*2+bmpWidth;
		two=one*2;
		Matrix matrix=new Matrix();
		matrix.postTranslate(offset, 0);
		imageView.setImageMatrix(matrix);

		//viewpager里面要显示的布局
		LayoutInflater li=getLayoutInflater();
		alist.add(li.inflate(R.layout.item_one, null));
		alist.add(li.inflate(R.layout.item_two, null));
		alist.add(li.inflate(R.layout.item_tree, null));
		mAdapter=new MyViewPageAdapter(alist);
		vPager_one.setAdapter(mAdapter);
		vPager_one.setCurrentItem(0);
    }
	private void initControl()
	{
		vPager_one=(ViewPager)findViewById(R.id.pageview);
		tv1=(TextView)findViewById(R.id.tv1);
		tv2=(TextView)findViewById(R.id.tv2);
		tv3=(TextView)findViewById(R.id.tv3);
		imageView=(ImageView)findViewById(R.id.imagevie);
		alist=new ArrayList<View>();
		tv1.setOnClickListener(this);
		tv2.setOnClickListener(this);
		tv3.setOnClickListener(this);
		vPager_one.setOnPageChangeListener(this);
	}

	@Override
	public boolean onCreateOptionsMenu(Menu menu) {
		// Inflate the menu; this adds items to the action bar if it is present.
		getMenuInflater().inflate(R.menu.main, menu);
		return true;
	}
	@Override
	public void onPageScrollStateChanged(int arg0)
	{
		// TODO 自动生成的方法存根

	}
	@Override
	public void onPageScrolled(int arg0, float arg1, int arg2)
	{
		// TODO 自动生成的方法存根

	}
	@Override
	public void onPageSelected(int arg0)
	{
		Log.w("TAG", "onPageSelected");
		Animation animation=null;
		switch (arg0)
		{
			case 0 :
				if(index==1)
				{
					 animation=new TranslateAnimation(one,0,0,0);
				}
				else if (index==2)
				{
					animation=new TranslateAnimation(two, 0, 0, 0);
				}
				break;
			case 1 :
				if (index==0)
				{
					animation=new TranslateAnimation(offset, one, 0, 0);
					
				}
				else if (index==2)
				{
					animation=new TranslateAnimation(two, one, 0, 0);
					
				}
				break;
			case 2 :
				if (index==0)
				{
					animation=new TranslateAnimation(offset, two, 0, 0);
					
				}
				else if (index==1)
				{
					//------------------------------fromX toX
					animation=new TranslateAnimation(one, two, 0, 0);
				 }
				break;
 
		}
		  index=arg0;
		  animation.setFillAfter(true);
		  animation.setDuration(300);
		  imageView.startAnimation(animation);

	}
	@Override
	public void onClick(View v)
	{
		switch (v.getId())
		{
			case R.id.tv1 :
				vPager_one.setCurrentItem(0);

				break;
			case R.id.tv2 :
				vPager_one.setCurrentItem(1);

				break;
			case R.id.tv3 :
				vPager_one.setCurrentItem(2);

				break;
              }
              }
             }

首先对一些控件进行初始化。最重要的一步当滑动ViewPager的时候那个imageView 图片进行移动这个imageView在xml一定要设置android:scaleType="matrix"

其实对图片的偏移量是很好计算的

offset=(screen/3-bmpWidth)/2;
one=offset*2+bmpWidth;
two=one*2;

读者可用在画图上画出一个模拟手机然后对一些偏移量进行计算进行计算这个就跟以前数学的几何一样咯。

底部imageview点击事件更改ViewPager的当前索引这个也是很简单的；

在onPageSelected 方法中我们判断上一次的索引和当前索引的变化然后对那个游标图片进行动画处理动画其实也是平移 TranslateAnimation类

就是动画平移类，有兴趣可用取看下更多动画效果。

大概ViewPager介绍到这里，因为用了很久博客一直都在学习，这个第一篇博客，写的不太好，不过自己会加油的！