ViewPager多页面滑动效果

ViewPager多页面滑动效果

ViewPager在Android开发中还是很常见的，下面是一个小例子来说明ViewPager的用法
 
首先先看Main.xml布局文件

<RelativeLayout 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:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" >

    <!-- 下面是定义ViewPager的布局文件 -->
    <android.support.v4.view.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center">
        <!-- 下面是给每个布局加个标题 -->
        <android.support.v4.view.PagerTitleStrip
            android:id="@+id/pagerTitle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="top">       
        </android.support.v4.view.PagerTitleStrip>
       
    </android.support.v4.view.ViewPager>

</RelativeLayout>

因为是要实现左右滑屏，所以说这里我们还需要创建3个布局文件，分别命名为tab1,tab2,tab3.在这3个布局文件里随便加一个控件即可，不需要什么华丽的布局。
 
tab1.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:orientation="vertical" >

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button" />

</LinearLayout>

tab2.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:orientation="vertical" >

    <ProgressBar
        android:id="@+id/progressBar1"
        style="?android:attr/progressBarStyleLarge"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

</LinearLayout>

tab3.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:orientation="vertical" >

    <ProgressBar
        android:id="@+id/progressBar1"
        style="?android:attr/progressBarStyleHorizontal"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <SeekBar
        android:id="@+id/seekBar1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

</LinearLayout>

下面就需要我们在MainActivity里面实现方法

package com.example.viewpager;

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

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

public class MainActivity extends Activity {
 
 private ViewPager viewPager;
 private PagerTitleStrip pagerTitle;
 private List<View> list;//表示装载滑动的布局
 private List<String> titleList;//表示滑动每一页的标题
 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.main);
  viewPager=(ViewPager)this.findViewById(R.id.viewPager);
  pagerTitle=(PagerTitleStrip)this.findViewById(R.id.pagerTitle);
  //下面则开始动态加载布局,并转换成页面
  View view1=LayoutInflater.from(MainActivity.this).inflate(R.layout.tab1, null);
  View view2=LayoutInflater.from(MainActivity.this).inflate(R.layout.tab2, null);
  View view3=LayoutInflater.from(MainActivity.this).inflate(R.layout.tab3, null);
  //下面是把页面view1,view2,view3加载到list集合中
  list=new ArrayList<View>();
  list.add(view1);
  list.add(view2);
  list.add(view3);
 
  //然后为每一个布局文件加载一个标题
  titleList=new ArrayList<String>();
  titleList.add("left");
  titleList.add("middle");
  titleList.add("right");
 
  viewPager.setAdapter(new MyAdapter());
  viewPager.setCurrentItem(1);//设置默认进入ViewPager之后的页面是middle页面
 }
 private class MyAdapter extends PagerAdapter{

  @Override
  public int getCount() {
   // 获取布局的个数
   return list.size();
  }
 
  @Override
  public Object instantiateItem(View container, int position) {
   // 加载布局
   ((ViewPager)container).addView(list.get(position));
   return list.get(position);
   
  }
 
  @Override
  public void destroyItem(View container, int position, Object object) {
   // 销毁布局，即从一个布局页面滑动到另一个布局页面
   ((ViewPager)container).removeView(list.get(position));

  }
 
  @Override
  public CharSequence getPageTitle(int position) {
   // 获取布局页面的标题
   return titleList.get(position);
  }
 
  @Override
  public boolean isViewFromObject(View arg0, Object arg1) {
   // 判断是否是一个完整的页面
   return arg0==arg1;
  }
 
 }

}

就这样所有的布局和方法实现就完成了，这个小例子是很粗糙的，但是我们的重点是实现如何左右滑屏。