android中通过ViewPager实现左右滑屏（上）

本文整理自： http://my.oschina.net/kzhou/blog/29157

一、简介
ViewPager类提供了多界面切换的效果（类似home中workspace的切换）。该效果有如下特征：
[1] 当前显示一组界面中的其中一个界面。
[2] 当用户通过左右滑动界面时，当前的屏幕显示当前界面和下一个界面的一部分。
[3]滑动结束后，界面自动跳转到当前选择的界面中
下面是一个效果图
图1：
android中通过ViewPager实现左右滑屏 - hubingforever - 民主与科学
 
图2：
android中通过ViewPager实现左右滑屏 - hubingforever - 民主与科学
 
二、ViewPager的下载与安装
   ViewPager来源于google 的补充组件android-support-v13.jar.
首先启动Android SDK Manager的,然后选中Extras的“Android support package”进行下载更新。
在下载更新后，在eclipse中工程上点击右键，选择android tools -> add compatibility library即可完成安装。
另外也可以手工通过工程属性中的"Java Build Path"->"Libraries"->"Add External JARS..."把android-support-v13.jar导到Android工程中，
jar包所在位置是\android-sdk\extras\android\compatibility\v4\android-support-v13.jar
二、使用ViewPager控件
2.1 在布局文件中引用ViewPager控件
     <android.support.v4.view.ViewPager
         android:id="@+id/viewPager1"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_alignLeft="@+id/textView1"
            android:layout_above="@id/adLayout"
            android:layout_below="@id/topText"
            android:layout_centerVertical="true"  />
 
2.2 设置ViewPager控件的适配器
   ViewPager的适配器必须继承于PagerAdapter，并实现以下四个方法
//获取当前窗体界面数
public int getCount()
 //初始化position位置的界面
public Object instantiateItem(View collection, int position)
//销毁position位置的界面
public void destroyItem(View collection, int position, Object view)
// 判断是否由对象生成界面
public boolean isViewFromObject(View arg0, Object arg1)
2.3  初始化ViewPager控件
 初始化ViewPager控件的适配器
viewPager1 = (ViewPager) findViewById(R.id.viewPager1);
viewPager1.setAdapter(new ImgPagerAdapter(this,lists));
配置适配器的页面变化事件
viewPager1
       .setOnPageChangeListener(new OnPageChangeListener() {
            //页面选择
           @Override
  / /当一个页面即将被加载时，调用此方法
           public void onPageSelected(int position) {
              topText.setText(String.valueOf(position+1)+"/"+String.valueOf(lists.length));
           }
           @Override
           // 状态有三个0空闲，1是增在滑行中，2目标加载完毕
           public void onPageScrollStateChanged(int state) {
           }
 
           @Override
           / /当在一个页面滚动时，调用此方法
           public void onPageScrolled(int position,
                  float positionOffset, int positionOffsetPixels) {
           }
       });
 另外，需要注意的是在ViewPager中，它除了加载当前页，还会加载当前页的左右页（无论它们实际可不可见）。除了当前页的View算是可见的，其左右页的View算是可见的（无论它们实际可不可见），即onWindowVisibilityChanged（int visibility）中的参数是View.VISIBLE。
 实例1
viewpager_layout.xml文件
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" android:orientation="vertical">
<!-- 此处需要给出全路径 -->
<android.support.v4.view.ViewPager
    android:id="@+id/viewpagerLayout" android:layout_height="fill_parent" android:layout_width="fill_parent"/>
</LinearLayout>
layout1.xml文件
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" android:orientation="vertical">
    <TextView android:textAppearance="?android:attr/textAppearanceLarge" android:layout_height="wrap_content" android:id="@+id/textView1" android:layout_width="fill_parent" android:text="第一页"></TextView>
    <EditText android:layout_width="match_parent" android:layout_height="wrap_content" android:id="@+id/editText1">
        <requestFocus></requestFocus>
    </EditText>
</LinearLayout>
layout2.xml文件
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" android:orientation="vertical">
    <TextView android:textAppearance="?android:attr/textAppearanceLarge" android:layout_height="wrap_content" android:id="@+id/textView1" android:layout_width="fill_parent" android:text="第二页"></TextView>
    <EditText android:layout_width="match_parent" android:layout_height="wrap_content" android:id="@+id/editText1">
        <requestFocus></requestFocus>
    </EditText>
</LinearLayout>
layout3.xml文件
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" android:orientation="vertical">
    <TextView android:textAppearance="?android:attr/textAppearanceLarge" android:layout_height="wrap_content" android:id="@+id/textView1" android:layout_width="fill_parent" android:text="第三页"></TextView>
    <EditText android:layout_width="match_parent" android:layout_height="wrap_content" android:id="@+id/editText1">
        <requestFocus></requestFocus>
    </EditText>
</LinearLayout>
TestViewPager.java文件
package com.teleca.robin;
import java.util.ArrayList;
import java.util.List;
import android.app.Activity;
import android.os.Bundle;
import android.os.Parcelable;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.EditText;
import com.teleca.robin.R;
 
public class TestViewPager extends Activity {
final static String tag = "robin";
private ViewPager myViewPager;
private MyPagerAdapter myAdapter;
 
private LayoutInflater mInflater;
private List<View> mListViews;
private View layout1 = null;
private View layout2 = null;
private View layout3 = null;
 
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.viewpager_layout);
myAdapter = new MyPagerAdapter();
myViewPager = (ViewPager) findViewById(R.id.viewpagerLayout);
myViewPager.setAdapter(myAdapter);
mListViews = new ArrayList<View>();
mInflater = getLayoutInflater();
layout1 = mInflater.inflate(R.layout.layout1, null);
layout2 = mInflater.inflate(R.layout.layout2, null);
layout3 = mInflater.inflate(R.layout.layout3, null);
mListViews.add(layout1);
mListViews.add(layout2);
mListViews.add(layout3);
// 初始化当前显示的view
myViewPager.setCurrentItem(1);
// 初始化第二个view的信息
EditText v2EditText = (EditText) layout2.findViewById(R.id.editText1);
v2EditText.setText("动态设置第二个view的值");
myViewPager.setOnPageChangeListener(new OnPageChangeListener() {
@Override
public void onPageSelected(int arg0) {
Log.d(tag, "onPageSelected - " + arg0);
// view从1到2滑动，2被加载后掉用此方法
View v = mListViews.get(arg0);
EditText editText = (EditText) v.findViewById(R.id.editText1);
editText.setText("动态设置#" + arg0 + "edittext控件的值");
}
@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
Log.d(tag, "onPageScrolled - " + arg0);
// 从1到2滑动，在1滑动前调用
}
@Override
public void onPageScrollStateChanged(int arg0) {
Log.d(tag, "onPageScrollStateChanged - " + arg0);
// 状态有三个0空闲，1是增在滑行中，2目标加载完毕
/**
 * 
 * Indicates that the pager is in an idle, settled state. The
 * current page
 * 
 * is fully in view and no animation is in progress.
 */
// public static final int SCROLL_STATE_IDLE = 0;
/**
 * 
 * Indicates that the pager is currently being dragged by the
 * user.
 */
// public static final int SCROLL_STATE_DRAGGING = 1;
/**
 * 
 * Indicates that the pager is in the process of settling to a
 * final position.
 */
// public static final int SCROLL_STATE_SETTLING = 2;
}
 
});
 
}
private class MyPagerAdapter extends PagerAdapter {
@Override
public void destroyItem(View arg0, int arg1, Object arg2) {
Log.d(tag, "destroyItem");
((ViewPager) arg0).removeView(mListViews.get(arg1));
}
@Override
public void finishUpdate(View arg0) {
Log.d(tag, "finishUpdate");
}
@Override
public int getCount() {
Log.d(tag, "getCount");
return mListViews.size();
}
@Override
public Object instantiateItem(View arg0, int arg1) {
Log.d(tag, "instantiateItem");
((ViewPager) arg0).addView(mListViews.get(arg1), 0);
return mListViews.get(arg1);
}
@Override
public boolean isViewFromObject(View arg0, Object arg1) {
Log.d(tag, "isViewFromObject");
return arg0 == (arg1);
}
@Override
public void restoreState(Parcelable arg0, ClassLoader arg1) {
Log.d(tag, "restoreState");
}
@Override
public Parcelable saveState() {
Log.d(tag, "saveState");
return null;
}
@Override
public void startUpdate(View arg0) {
Log.d(tag, "startUpdate");
 
}
 
}
 
}
实例2
循环显示
viewpager_layout.xml文件

 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" android:orientation="vertical">
<!-- 此处需要给出全路径 -->
<android.support.v4.view.ViewPager
    android:id="@+id/viewpagerLayout" android:layout_height="fill_parent" android:layout_width="fill_parent"/>
</LinearLayout>
pager_layout.xml文件

 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" android:orientation="vertical">
    <TextView android:textAppearance="?android:attr/textAppearanceLarge" android:layout_height="wrap_content" android:id="@+id/textView1" android:layout_width="fill_parent" android:text="第一页"></TextView>
    <EditText android:layout_width="match_parent" android:layout_height="wrap_content" android:id="@+id/editText1">
        <requestFocus></requestFocus>
    </EditText>
</LinearLayout>
TestViewPagerActivity.java文件

 

package com.lenovo.robin;
 
import java.util.ArrayList;
import java.util.List;
 
import android.app.Activity;
import android.os.Bundle;
import android.os.Parcelable;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.EditText;
import android.widget.TextView;
 
public class TestViewPagerActivity extends Activity{
    final static String tag = "robin";
    private ViewPager myViewPager;
    private MyPagerAdapter myAdapter;
 
    private LayoutInflater mInflater;
    private List<View> mListViews;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
     super.onCreate(savedInstanceState);
     setContentView(R.layout.viewpager_layout);
     myAdapter = new MyPagerAdapter();
     myViewPager = (ViewPager) findViewById(R.id.viewpagerLayout);
     myViewPager.setAdapter(myAdapter);
     mListViews = new ArrayList<View>();
     mInflater = getLayoutInflater();
     for(int i=0;i<5;i++){
     View layout = mInflater.inflate(R.layout.pager_layout, null);
     TextView textView = (TextView) layout.findViewById(R.id.textView1);
     textView.setText("这是第"+i+"页");
     mListViews.add(layout);
     }
     /* 初始化第二页当前页view*/
     if(mListViews.size()>2)
         myViewPager.setCurrentItem(100*mListViews.size()+1);
     else
         myViewPager.setCurrentItem(1);
     myViewPager.setOnPageChangeListener(new OnPageChangeListener() {
      @Override
      public void onPageSelected(int position) {
       Log.d(tag, "onPageSelected - " +position);
       /* view从1到2滑动，2被加载后调用此方法*/
       position=position%mListViews.size();
       View v = mListViews.get(position);
       EditText editText = (EditText) v.findViewById(R.id.editText1);
       editText.setText("动态设置第" + position + "页的edittext控件的值");
      }
      @Override
      public void onPageScrolled(int arg0, float arg1, int arg2) {
       Log.d(tag, "onPageScrolled - " + arg0);
       /*从1到2滑动，在1滑动前调用*/
      }
      @Override
      public void onPageScrollStateChanged(int arg0) {
       Log.d(tag, "onPageScrollStateChanged - " + arg0);
       /* 状态有三个0空闲，1是增在滑行中，2目标加载完毕*/
       /**
        * 
        * Indicates that the pager is in an idle, settled state. The
        * current page
        * 
        * is fully in view and no animation is in progress.
        */
       /* public static final int SCROLL_STATE_IDLE = 0;*/
       /**
        * 
        * Indicates that the pager is currently being dragged by the
        * user.
        */
       /* public static final int SCROLL_STATE_DRAGGING = 1;*/
       /**
        * 
        * Indicates that the pager is in the process of settling to a
        * final position.
        */
       /* public static final int SCROLL_STATE_SETTLING = 2;*/
      }
 
     });
 
    }
    private class MyPagerAdapter extends PagerAdapter {
     @Override
     public void destroyItem(View viewPager, int i, Object view) {
      Log.d(tag, "destroyItem");
      i=i%mListViews.size();
      ((ViewPager) viewPager).removeView((View)view);
     }
     @Override
     public void finishUpdate(View arg0) {
      Log.d(tag, "finishUpdate");
     }
     @Override
     public int getCount() {
      Log.d(tag, "getCount");
      if(mListViews.size()>2)
          return Integer.MAX_VALUE;
      else
          return mListViews.size();
     }
     @Override
     public Object instantiateItem(View view, int i) {
         i=i%mListViews.size();
      Log.d(tag, "instantiateItem");
      ((ViewPager) view).addView(mListViews.get(i), 0);
      return mListViews.get(i);
     }
     @Override
     public boolean isViewFromObject(View view, Object object) {
      Log.d(tag, "isViewFromObject");
      return view == object;
     }
     @Override
     public void restoreState(Parcelable arg0, ClassLoader arg1) {
      Log.d(tag, "restoreState");
     }
     @Override
     public Parcelable saveState() {
      Log.d(tag, "saveState");
      return null;
     }
     @Override
     public void startUpdate(View arg0) {
      Log.d(tag, "startUpdate");
 
     }
 
    }
 
}
posted @ 2014-05-16 17:57  huidaoli  阅读(412)  评论(0)  编辑  收藏  举报