android中通过ViewPager实现左右滑屏(上)
本文整理自: http://my.oschina.net/kzhou/blog/29157
一、简介
ViewPager类提供了多界面切换的效果(类似home中workspace的切换)。该效果有如下特征:
[1] 当前显示一组界面中的其中一个界面。
[2] 当用户通过左右滑动界面时,当前的屏幕显示当前界面和下一个界面的一部分。
[3]滑动结束后,界面自动跳转到当前选择的界面中
下面是一个效果图
图1:
![android中通过ViewPager实现左右滑屏 - hubingforever - 民主与科学](http://www.th7.cn/d/file/p/2012/01/04/af915036f271d73acbdc93f931ea8904.png)
图2:
![android中通过ViewPager实现左右滑屏 - hubingforever - 民主与科学](http://www.th7.cn/d/file/p/2012/01/04/b0de050d06cc0fe213ba09d96694cbb4.png)
二、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");
}
}
}
huidaoli版权所有:转载请注明出处,谢谢合作!