ViewPager常用于APP正式使用界面使用之前所加载的视图,相当于windows很多软件的splash,ViewPager一般放在APP启动之前或者APP中一个操作切换到两外一个操作之间的显示.平时微信APP均会使用.

ViewPager是一种视窗类型的组件,所以它可以加载Layout,在这个Layout中又可以添加其他UI件,所以ViewPager可以相当于是一个大型容器,下面给出使用的步骤:

<1> : 首先新建一个Android工程,然后在主类的布局xml文件中添加ViewPager如下:



<android.support.v4.view.ViewPager
android:id="@+id/whatsnew_viewpager"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center" >

<android.support.v4.view.PagerTitleStrip
android:id="@+id/pagertitle"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_gravity="bottom"
android:background="#0000"
android:textColor="#ffff" />
</android.support.v4.view.ViewPager>


<2> : 在主类中定义一个ViewPager对象:



private ViewPager mViewPager;



mViewPager=(ViewPager)findViewById(R.id.whatsnew_viewpager);


添加事件:



//添加事件
mViewPager.setOnPageChangeListener(new OnPageChangeListener(){

@Override
public void onPageScrollStateChanged(int arg0) {
// TODO Auto-generated method stub


}

@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
// TODO Auto-generated method stub

}

@Override
public void onPageSelected(int arg0) {
// TODO Auto-generated method stub
Toast.makeText(PushViewTest.this, "view page : "+arg0, Toast.LENGTH_SHORT).show();
}

});


<3> : 构建各个视窗的视图:



// ViewPager既然是视窗容器,那么就需要添加View,可以添加一个或者多个,一般是大于一个视窗
// 一个View视窗的里面需要放置一个Layout用于在View中显示
LayoutInflater inf = LayoutInflater.from(this);
View view1 = inf.inflate(R.layout.view1, null);
View view2 = inf.inflate(R.layout.view2, null);
View view3 = inf.inflate(R.layout.view3, null);
View view4 = inf.inflate(R.layout.view4, null);

// ViewPager加载视窗是依靠适配器的
// 适配器的一般是一次性加载List对象,那么下面就要先构建一个List对象
final ArrayList<View> mViewList = new ArrayList<View>();
//显示的顺序和添加的顺序是一样的
mViewList.add(view4);
mViewList.add(view3);
mViewList.add(view2);
mViewList.add(view1);


<4> ViewPager需要通过适配器添加上面的视窗:



// 然后构建适配器
PagerAdapter adapter = new PagerAdapter() {


@Override
public int getCount() {
// TODO Auto-generated method stub
return mViewList.size();
}

@Override
public boolean isViewFromObject(View arg0, Object arg1) {
// TODO Auto-generated method stub
return (arg0 == arg1);
}

@Override
public void destroyItem(View container, int position, Object object) {
// TODO Auto-generated method stub
((ViewPager) container).removeView(mViewList.get(position));

}

@Override
public Object instantiateItem(View container, int position) {
// TODO Auto-generated method stub
((ViewPager) container).addView(mViewList.get(position));
return mViewList.get(position);
}

};


<5> 添加适配器,既可以工作了:



//添加适配器
mViewPager.setAdapter(adapter);


<6> PAGE导航指示设置:

上面有四个视窗,那么就需要有四个指示去指示当前是第几个视窗,指示指针其实由四个小图标显示的,当处于当前视窗时,把与当前视窗对应的指针小图标用同样大小的但是颜色相对较深的小图标替换之,这样看起来,四个指针其中一个对应视窗的指针图片将会凸显出来:



private ImageView page1;
private ImageView page2;
private ImageView page3;
private ImageView page4;



page1 = (ImageView) findViewById(R.id.page0);
page2 = (ImageView) findViewById(R.id.page1);
page3 = (ImageView) findViewById(R.id.page2);
page4 = (ImageView) findViewById(R.id.page3);


在滑动视窗的事件中进行更换小图标用于指示作用:



@Override
public void onPageSelected(int arg0) {
// TODO Auto-generated method stub
// Toast.makeText(PushViewTest.this, "view page : " + arg0,
// Toast.LENGTH_SHORT).show();
// 这个地方需要添加一个指示单签page的"位置",起到一个指示作用.
switch (arg0) {
case 0:
page4.setImageDrawable(getResources().getDrawable(
R.drawable.page));
page1.setImageDrawable(getResources().getDrawable(
R.drawable.page_now));
page2.setImageDrawable(getResources().getDrawable(
R.drawable.page));
break;
case 1:
page1.setImageDrawable(getResources().getDrawable(
R.drawable.page));
page2.setImageDrawable(getResources().getDrawable(
R.drawable.page_now));
page3.setImageDrawable(getResources().getDrawable(
R.drawable.page));
break;
case 2:
page2.setImageDrawable(getResources().getDrawable(
R.drawable.page));
page3.setImageDrawable(getResources().getDrawable(
R.drawable.page_now));
page4.setImageDrawable(getResources().getDrawable(
R.drawable.page));
break;
case 3:
page3.setImageDrawable(getResources().getDrawable(
R.drawable.page));
page4.setImageDrawable(getResources().getDrawable(
R.drawable.page_now));
page1.setImageDrawable(getResources().getDrawable(
R.drawable.page));
break;
}
}


运行即可以看到效果:

整个工程source :



package view;

import java.util.ArrayList;

import com.example.androidfragmentd02test.R;

import android.app.Activity;
import android.graphics.Color;
import android.os.Bundle;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.view.LayoutInflater;
import android.view.MenuItem;
import android.view.View;
import android.widget.ImageView;
import android.widget.Toast;

public class PushViewTest extends Activity {

private ViewPager mViewPager;

private ImageView page1;
private ImageView page2;
private ImageView page3;
private ImageView page4;

@Override
protected void onCreate(Bundle savedInstanceState) {
// TODO Auto-generated method stub
super.onCreate(savedInstanceState);

setContentView(R.layout.pushview_test);

page1 = (ImageView) findViewById(R.id.page0);
page2 = (ImageView) findViewById(R.id.page1);
page3 = (ImageView) findViewById(R.id.page2);
page4 = (ImageView) findViewById(R.id.page3);

mViewPager = (ViewPager) findViewById(R.id.whatsnew_viewpager);
// 添加事件
mViewPager.setOnPageChangeListener(new OnPageChangeListener() {

@Override
public void onPageScrollStateChanged(int arg0) {
// TODO Auto-generated method stub

}

@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
// TODO Auto-generated method stub

}

@Override
public void onPageSelected(int arg0) {
// TODO Auto-generated method stub
// Toast.makeText(PushViewTest.this, "view page : " + arg0,
// Toast.LENGTH_SHORT).show();
// 这个地方需要添加一个指示单签page的"位置",起到一个指示作用.
switch (arg0) {
case 0:
page4.setImageDrawable(getResources().getDrawable(
R.drawable.page));
page1.setImageDrawable(getResources().getDrawable(
R.drawable.page_now));
page2.setImageDrawable(getResources().getDrawable(
R.drawable.page));
break;
case 1:
page1.setImageDrawable(getResources().getDrawable(
R.drawable.page));
page2.setImageDrawable(getResources().getDrawable(
R.drawable.page_now));
page3.setImageDrawable(getResources().getDrawable(
R.drawable.page));
break;
case 2:
page2.setImageDrawable(getResources().getDrawable(
R.drawable.page));
page3.setImageDrawable(getResources().getDrawable(
R.drawable.page_now));
page4.setImageDrawable(getResources().getDrawable(
R.drawable.page));
break;
case 3:
page3.setImageDrawable(getResources().getDrawable(
R.drawable.page));
page4.setImageDrawable(getResources().getDrawable(
R.drawable.page_now));
page1.setImageDrawable(getResources().getDrawable(
R.drawable.page));
break;
}
}

});

// ViewPager既然是视窗容器,那么就需要添加View,可以添加一个或者多个,一般是大于一个视窗
// 一个View视窗的里面需要放置一个Layout用于在View中显示
LayoutInflater inf = LayoutInflater.from(this);
View view1 = inf.inflate(R.layout.view1, null);
view1.setBackgroundColor(Color.YELLOW);
View view2 = inf.inflate(R.layout.view2, null);
view2.setBackgroundColor(Color.BLUE);
View view3 = inf.inflate(R.layout.view3, null);
view3.setBackgroundColor(Color.GREEN);
View view4 = inf.inflate(R.layout.view4, null);
view4.setBackgroundColor(Color.WHITE);

// ViewPager加载视窗是依靠适配器的
// 适配器的一般是一次性加载List对象,那么下面就要先构建一个List对象
final ArrayList<View> mViewList = new ArrayList<View>();
// 显示的顺序和添加的顺序是一样的
mViewList.add(view1);
mViewList.add(view2);
mViewList.add(view3);
mViewList.add(view4);

// 然后构建适配器
PagerAdapter adapter = new PagerAdapter() {

@Override
public int getCount() {
// TODO Auto-generated method stub
return mViewList.size();
}

@Override
public boolean isViewFromObject(View arg0, Object arg1) {
// TODO Auto-generated method stub
return (arg0 == arg1);
}

@Override
public void destroyItem(View container, int position, Object object) {
// TODO Auto-generated method stub
((ViewPager) container).removeView(mViewList.get(position));

}

@Override
public Object instantiateItem(View container, int position) {
// TODO Auto-generated method stub
((ViewPager) container).addView(mViewList.get(position));
return mViewList.get(position);
}

};

// 添加适配器
mViewPager.setAdapter(adapter);

this.getActionBar().setDisplayHomeAsUpEnabled(true);
this.getActionBar().setDisplayShowTitleEnabled(true);

}

@Override
public boolean onOptionsItemSelected(MenuItem item) {
// TODO Auto-generated method stub
int id = item.getItemId();
switch (id) {
case android.R.id.home:
finish();
}
return super.onOptionsItemSelected(item);
}

}


布局xml :



<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >

<android.support.v4.view.ViewPager
android:id="@+id/whatsnew_viewpager"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center" >

<android.support.v4.view.PagerTitleStrip
android:id="@+id/pagertitle"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_gravity="bottom"
android:background="#0000"
android:textColor="#ffff" />
</android.support.v4.view.ViewPager>

<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
>

<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:layout_marginBottom="30dp"
android:gravity="center_horizontal" >

<ImageView
android:id="@+id/page0"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="matrix"
android:src="@drawable/page_now" />
<ImageView
android:id="@+id/page1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:scaleType="matrix"
android:src="@drawable/page" />
<ImageView
android:id="@+id/page2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:scaleType="matrix"
android:src="@drawable/page" />
<ImageView
android:id="@+id/page3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:scaleType="matrix"
android:src="@drawable/page" />

</LinearLayout>


</LinearLayout>

</FrameLayout>