Android开发使用Viewpager实现程序引导界面

相信现在许多人在第一次使用某个程序的时候，会有一个程序的引导的界面，指引用户如何在程序中进行操作，这个能给用户带来良好的用户体验.下面，我就来利用ViewPager来实现这个功能。

创新互联建站专注于彭泽网站建设服务及定制，我们拥有丰富的企业做网站经验。热诚为您提供彭泽营销型网站建设，彭泽网站制作、彭泽网页设计、彭泽网站官网定制、成都小程序开发服务，打造彭泽网络公司原创品牌,更为您提供彭泽网站排名全网营销落地服务。

所实现的功能：

1.可以左右滑动功能图片。

2.图片的索引看出当前图片所在的位置。

3.可循环滑动。

4.图片的索引带有动画效果。

在这里，我们需要用到google提到的一个支持包——Android-support-v4.jar，这个包包含了一些非常有用的类，其中就是ViewPager类来实现页面之间的切换操作。（viewpager一般在Android3.0 level 11以上才支持）

先上效果图吧

Android开发使用Viewpager实现程序引导界面

界面可以实现左右循环滑动，下面跟踪点也会随着界面的滑动而变化，点击最后一个按钮即可进入程序主界面了

下面就逐步介绍我的实现方法，及代码实现；

首先我们需要自定义一个ViewPager适配器，用来绑定数据和view

import java.util.ArrayList;

import android.support.v4.view.PagerAdapter;

import android.support.v4.view.ViewPager;

import android.view.View;

/**

* ViewPager适配器，用来绑定数据和view

* @author xhb

public class MyPagerAdapter extends PagerAdapter {

/**

* 界面列表

private ArrayList views;

@SuppressWarnings("unused")

private ArrayList titles;

public MyPagerAdapter(ArrayList views, ArrayList titles) {

this.views = views;

this.titles = titles;

}

/**

* 获取当前页面数

@Override

public int getCount() {

return this.views.size();

}

/**

* 判断是否由对象生成界面

@Override

public boolean isViewFromObject(View arg0, Object arg1) {

return arg0 == arg1;

}

/**

* 销毁position位置的界面

public void destroyItem(View container, int position, Object object) {

((ViewPager) container).removeView(views.get(position));

}

/**

* 初始化position位置的界面

public Object instantiateItem(View container, int position) {

((ViewPager) container).addView(views.get(position));

return views.get(position);

}

GuideActivity.java

[java] view plain copy

package com.example.viewpagedemo;

import java.util.ArrayList;

import android.app.Activity;

import android.content.Intent;

import android.os.Bundle;

import android.support.v4.view.ViewPager;

import android.support.v4.view.ViewPager.OnPageChangeListener;

import android.view.LayoutInflater;

import android.view.View;

import android.view.View.OnClickListener;

import android.view.Window;

import android.view.WindowManager;

import android.widget.Button;

import android.widget.ImageView;

public class GuideActivity extends Activity {

// 翻页控件

private ViewPager mViewPager;

// 这4个是底部显示当前状态点p_w_picpathView

private ImageView mPage0;

private ImageView mPage1;

private ImageView mPage2;

private ImageView mPage3;

//点击体验button

private Button whats_new_start_btn;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

// ExitApplication.getInstance().addActivity(this);

// 设置无标题

requestWindowFeature(Window.FEATURE_NO_TITLE);

// 设置全屏

getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,

WindowManager.LayoutParams.FLAG_FULLSCREEN);

setContentView(R.layout.activity_main);

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

mViewPager.setOnPageChangeListener(new MyOnPageChangeListener());

mPage0 = (ImageView) findViewById(R.id.page0);

mPage1 = (ImageView) findViewById(R.id.page1);

mPage2 = (ImageView) findViewById(R.id.page2);

mPage3 = (ImageView) findViewById(R.id.page3);

* 这里是每一页要显示的布局，根据应用需要和特点自由设计显示的内容以及需要显示多少页等

LayoutInflater mLi = LayoutInflater.from(this);

View view1 = mLi.inflate(R.layout.whats_news_gallery_one, null);

View view2 = mLi.inflate(R.layout.whats_news_gallery_two, null);

View view3 = mLi.inflate(R.layout.whats_news_gallery_three, null);

View view4 = mLi.inflate(R.layout.whats_news_gallery_four, null);

// 在第四个界面上绑定button

whats_new_start_btn = (Button) view4

.findViewById(R.id.whats_new_start_btn);

whats_new_start_btn.setOnClickListener(new buttonClickListener());

* 这里将每一页显示的view存放到ArrayList集合中可以在ViewPager适配器中顺序调用展示

final ArrayList views = new ArrayList();

views.add(view1);

views.add(view2);

views.add(view3);

views.add(view4);

* 每个页面的Title数据存放到ArrayList集合中可以在ViewPager适配器中调用展示

final ArrayList titles = new ArrayList();

titles.add("tab1");

titles.add("tab2");

titles.add("tab3");

titles.add("tab4");

// 填充ViewPager的数据适配器

MyPagerAdapter mPagerAdapter = new MyPagerAdapter(views, titles);

mViewPager.setAdapter(mPagerAdapter);

}

public class MyOnPageChangeListener implements OnPageChangeListener {

public void onPageSelected(int page) {

// 翻页时当前page,改变当前状态园点图片

switch (page) {

case 0:

mPage0.setImageDrawable(getResources().getDrawable(

R.drawable.page_now));

mPage1.setImageDrawable(getResources().getDrawable(

R.drawable.page));

break;

case 1:

mPage1.setImageDrawable(getResources().getDrawable(

R.drawable.page_now));

mPage0.setImageDrawable(getResources().getDrawable(

R.drawable.page));

mPage2.setImageDrawable(getResources().getDrawable(

R.drawable.page));

break;

case 2:

mPage2.setImageDrawable(getResources().getDrawable(

R.drawable.page_now));

mPage1.setImageDrawable(getResources().getDrawable(

R.drawable.page));

mPage3.setImageDrawable(getResources().getDrawable(

R.drawable.page));

break;

case 3:

mPage3.setImageDrawable(getResources().getDrawable(

R.drawable.page_now));

mPage2.setImageDrawable(getResources().getDrawable(

R.drawable.page));

break;

}

public void onPageScrolled(int arg0, float arg1, int arg2) {

}

public void onPageScrollStateChanged(int arg0) {

}

public class buttonClickListener implements OnClickListener {

@Override

public void onClick(View v) {

Intent it = new Intent(GuideActivity.this, HomeActivity.class);

startActivity(it); // 点击最后一页的button进入主界面

GuideActivity.this.overridePendingTransition(

R.anim.new_dync_in_from_right, R.anim.new_dync_out_to_left);

GuideActivity.this.finish();

}

下面是界面布局：

activity_main.xml

[html] view plain copy

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:background="#ffffff"

android:orientation="vertical" >

android:id="@+id/whatsnew_viewpager"

android:layout_width="wrap_content"