在上一篇文章中,我们使用 ViewFilpper实现一个滑动切换的简单例子,但是毫无疑问地是,ViewFilpper实现的效果总体显得生硬,在滑动的过程中十分地不自然。那么,有没有解决这个问题的办法呢?答案是有的,就是我们今天要说的ViewPager。ViewPager用于实现多页面的切换效果,该类存在于Google的兼容包里面,所以在引用时记得在BuilldPath中加入“android-support-v4.jar”。所以,到目前为止,可以帮助我们实现滑动切换的效果的控件有两个,ViewFilpper和ViewPager。到底两个控件在具体使用的时候,会有什么不同呢?请跟着我的思路来学习下面的程序示例。
首先来分析布局代码:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
tools:context=".MainActivity" >
<android.support.v4.view.ViewPager
android:id="@+id/ViewPager"
android:layout_width="fill_parent"
android:layout_height="fill_parent"/>
<LinearLayout
android:id="@+id/LayoutForPoint"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_marginBottom="20dip"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true">
<ImageView
android:id="@+id/ImageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:clickable="true"
android:scaleType="fitXY"
android:src="@drawable/point_normal"
android:contentDescription="@string/Description" />
<ImageView
android:id="@+id/ImageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:scaleType="fitXY"
android:src="@drawable/point_normal"
android:contentDescription="@string/Description"
android:clickable="true" />
<ImageView
android:id="@+id/ImageView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:scaleType="fitXY"
android:src="@drawable/point_normal"
android:contentDescription="@string/Description"
android:clickable="true" />
<ImageView
android:id="@+id/ImageView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:contentDescription="@string/Description"
android:scaleType="fitXY"
android:src="@drawable/point_normal"
android:clickable="true" />
</LinearLayout>
</RelativeLayout>
在上面的布局代码中,我们可以发现ViewPager节点下并没有其他的控件节点,因此,在使用ViewPager的时候,我们不需要在这里加入我们具体的布局代码,换言之,到底每一页要显示什么样的内容,可以不再这里定义。那么,到底在哪里定义呢?我们后面会提到。你也许会问,为什么下面会有四个ImageView吧?呵呵,这四个ImageView可不是用来显示每一个要显示的具体内容的,这里是四个点,用于标识当前选中的页面。好了,我们继续。在使用ViewPager的时候,我们需要继承PagerAdapter类,就像使用Gallery要继承BaseAdapter一样,具体的代码如下:
package com.Android.ViewPaper;
import java.util.ArrayList;
import android.support.v4.view.ViewPager;
import android.support.v4.view.PagerAdapter;
import android.view.View;
public class ViewAdapter extends PagerAdapter {
private ArrayList<View> Views;//存放View的ArrayList
/*
* ViewAdapter构造函数
* @author:Robin
*/
public ViewAdapter(ArrayList<View> Views)
{
this.Views=Views;
}
/*
* 返回View的个数
*/
@Override
public int getCount()
{
if(Views!=null)
{
return Views.size();
}
return 0;
}
/*
* 销毁View
*/
@Override
public void destroyItem(View container, int position, Object object)
{
((ViewPager)container).removeView(Views.get(position));
}
/*
* 初始化
*/
@Override
public Object instantiateItem(View container, int position)
{
((ViewPager)container).addView(Views.get(position),0);
return Views.get(position);
}
/*
* 判断View是否来自Object
*/
@Override
public boolean isViewFromObject(View view, Object object)
{
return (view==object);
}
}
这个类的编写大家可以参考BaseAdapter的继承,我感觉差不多啦,而且这些方法的用途都很清楚,一目了然。
下面是主要的逻辑代码,程序中有详细的注释说明,不再赘述
package com.Android.ViewPaper;
import java.util.ArrayList;
import android.os.Bundle;
import android.app.Activity;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.view.Menu;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.ImageView;
import android.widget.LinearLayout;
public class MainActivity extends Activity implements OnClickListener, OnPageChangeListener {
//存放View的ArrayList
private ArrayList<View> Views;
//ViewAdapter适配器
private ViewAdapter mAdapter;
//引导图片资源
private int[] Resources=new int[]{R.drawable.guide1,R.drawable.guide2,R.drawable.guide3,R.drawable.guide4};
//提示切换的Point
private ImageView[] Points;
//当前索引
private int index;
//ViewPager
private ViewPager mPager;
//点的状态图片资源
private int[] PointState=new int[]{R.drawable.point_normal,R.drawable.point_select};
@Override
protected void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//初始化View
Views=new ArrayList<View>();
for(int i=0;i<Resources.length;i++)
{
ImageView Image=new ImageView(this);
Image.setImageResource(Resources[i]);
Views.add(Image);
}
//初始化Points
LinearLayout Layout=(LinearLayout)findViewById(R.id.LayoutForPoint);
Points=new ImageView[Resources.length];
for(int i=0;i<Resources.length;i++)
{
Points[i]=(ImageView)Layout.getChildAt(i);
Points[i].setImageResource(PointState[0]);
Points[i].setOnClickListener(this);
Points[i].setTag(i);
}
//获取ViewPaper
mPager=(ViewPager)findViewById(R.id.ViewPager);
//实例化适配器
mAdapter=new ViewAdapter(Views);
mPager.setAdapter(mAdapter);
mPager.setOnPageChangeListener(this);
//显示第一页
index=0;
Points[index].setImageResource(PointState[1]);;
}
@Override
public boolean onCreateOptionsMenu(Menu menu)
{
getMenuInflater().inflate(R.menu.main, menu);
return true;
}
@Override
public void onClick(View v)
{
index=(Integer)v.getTag();
setPoint(index);
setView(index);
}
/*
* 设置索引为index的View
*/
private void setView(int index)
{
if(index<0||index>Resources.length)
{
return;
}
mPager.setCurrentItem(index);
}
/*
* 设置索引为position的Point
*/
private void setPoint(int position)
{
if (position < 0 || position > Resources.length - 1 || index == position) {
return;
}
for(int i=0;i<Resources.length;i++)
{
Points[i].setImageResource(PointState[0]);;
}
Points[position].setImageResource(PointState[1]);;
index = position;
}
public void onPageSelected(int position)
{
setPoint(position);
}
@Override
public void onPageScrollStateChanged(int arg0)
{
}
@Override
public void onPageScrolled(int arg0, float arg1, int arg2)
{
}
}
在这个程序中,我们必须实现的一个接口是OnPageChangeListener接口,即对页面切换行为的监听接口,这个程序中原来的作者实现了OnClickListener接口,根据本人亲自测试,这个接口是不能监听到页面切换的行为的,或者说监听那四个点的的思路本身就是有问题的,应该是监听页面的切换事件,然后让那四个点去响应这个变化。最后说一点的是,这个程序中,我使用了两张照片来表示每个点的正常、选中的状态。其实,这里还可以写个selector资源文件来解决的,好了,这个例子实现的测试效果如下:
ViewPager相关文章:
1、Android开发之ViewPager+ActionBar+Fragment实现响应式可滑动Tab
2、Android开发学习之基于ViewPager实现Gallery画廊效果
3、Android开发学习之使用ViewPager+PagerTabStrip制作可滑动的Tab
4、Android开发学习之使用ViewPager打造应用引导界面面