现在的位置: 首页 > 综合 > 正文

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

2012年01月19日 ⁄ 综合 ⁄ 共 11050字 ⁄ 字号 评论关闭

本文整理自: 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 SCROL

抱歉!评论已关闭.