Android中通过ViewPager实现左右滑屏上

ゝ一纸荒年。 2022-03-21 11:18 193阅读 0赞

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

[http://www.th7.cn/Program/Android/2012/01/04/53921.shtml][http_www.th7.cn_Program_Android_2012_01_04_53921.shtml]

**一、简介**

ViewPager类提供了多界面切换的效果（类似home中workspace的切换）。该效果有如下特征：

\[1\] 当前显示一组界面中的其中一个界面。

\[2\] 当用户通过左右滑动界面时，当前的屏幕显示当前界面和下一个界面的一部分。

\[3\]滑动结束后，界面自动跳转到当前选择的界面中

官方的描述：

请参考：[http://developer.android.com/sdk/compatibility-library.html\#Notes][http_developer.android.com_sdk_compatibility-library.html_Notes]

下面是一个效果图

**图1**：

![android中通过ViewPager实现左右滑屏 - hubingforever - 民主与科学][android_ViewPager_ - hubingforever -]

图2：

![android中通过ViewPager实现左右滑屏 - hubingforever - 民主与科学][android_ViewPager_ - hubingforever - 1]

**二、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控件

<a ndroid.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">

</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">

</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">

</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   startUpdat e(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" >

</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" );

下文接《 [Android中通过ViewPager实现左右滑屏（下）][Android_ViewPager] [》][Android_ViewPager]

再分享一下我老师大神的人工智能教程吧。零基础！通俗易懂！风趣幽默！还带黄段子！希望你也加入到我们人工智能的队伍中来！[https://blog.csdn.net/jiangjunshow][https_blog.csdn.net_jiangjunshow]

[http_my.oschina.net_kzhou_blog_29157]: http://my.oschina.net/kzhou/blog/29157
[http_www.th7.cn_Program_Android_2012_01_04_53921.shtml]: http://www.th7.cn/Program/Android/2012/01/04/53921.shtml
[http_developer.android.com_sdk_compatibility-library.html_Notes]: http://developer.android.com/sdk/compatibility-library.html#Notes
[android_ViewPager_ - hubingforever -]: /images/20220321/d4fc573655f74a889449ce02ac48fbe9.png
[android_ViewPager_ - hubingforever - 1]: /images/20220321/0a50663db4604bdd8ef3190ac1125104.png
[Android_ViewPager]: http://hubingforever.blog.163.com/blog/static/171040579201210231172278/
[https_blog.csdn.net_jiangjunshow]: https://blog.csdn.net/jiangjunshow/article/details/77338485