Android開發(fā)使用Viewpager實現(xiàn)程序引導(dǎo)界面

相信現(xiàn)在許多人在第一次使用某個程序的時候，會有一個程序的引導(dǎo)的界面，指引用戶如何在程序中進行操作，這個能給用戶帶來良好的用戶體驗.下面，我就來利用ViewPager來實現(xiàn)這個功能。

創(chuàng)新互聯(lián)建站專注于彭澤網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗。熱誠為您提供彭澤營銷型網(wǎng)站建設(shè)，彭澤網(wǎng)站制作、彭澤網(wǎng)頁設(shè)計、彭澤網(wǎng)站官網(wǎng)定制、成都小程序開發(fā)服務(wù)，打造彭澤網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供彭澤網(wǎng)站排名全網(wǎng)營銷落地服務(wù)。

所實現(xiàn)的功能：

1.可以左右滑動功能圖片。

2.圖片的索引看出當(dāng)前圖片所在的位置。

3.可循環(huán)滑動。

4.圖片的索引帶有動畫效果。

在這里，我們需要用到google提到的一個支持包——Android-support-v4.jar，這個包包含了一些非常有用的類，其中就是ViewPager類來實現(xiàn)頁面之間的切換操作。（viewpager一般在Android3.0 level 11以上才支持）

先上效果圖吧

Android開發(fā)使用Viewpager實現(xiàn)程序引導(dǎo)界面

界面可以實現(xiàn)左右循環(huán)滑動，下面跟蹤點也會隨著界面的滑動而變化，點擊最后一個按鈕即可進入程序主界面了

下面就逐步介紹我的實現(xiàn)方法，及代碼實現(xiàn)；

首先我們需要自定義一個ViewPager適配器，用來綁定數(shù)據(jù)和view

import java.util.ArrayList;

import android.support.v4.view.PagerAdapter;

import android.support.v4.view.ViewPager;

import android.view.View;

/**

* ViewPager適配器，用來綁定數(shù)據(jù)和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;

}

/**

* 獲取當(dāng)前頁面數(shù)

@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個是底部顯示當(dāng)前狀態(tài)點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);

// 設(shè)置無標(biāo)題

requestWindowFeature(Window.FEATURE_NO_TITLE);

// 設(shè)置全屏

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);

* 這里是每一頁要顯示的布局，根據(jù)應(yīng)用需要和特點自由設(shè)計顯示的內(nèi)容以及需要顯示多少頁等

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適配器中順序調(diào)用展示

final ArrayList views = new ArrayList();

views.add(view1);

views.add(view2);

views.add(view3);

views.add(view4);

* 每個頁面的Title數(shù)據(jù)存放到ArrayList集合中可以在ViewPager適配器中調(diào)用展示

final ArrayList titles = new ArrayList();

titles.add("tab1");

titles.add("tab2");

titles.add("tab3");

titles.add("tab4");

// 填充ViewPager的數(shù)據(jù)適配器

MyPagerAdapter mPagerAdapter = new MyPagerAdapter(views, titles);

mViewPager.setAdapter(mPagerAdapter);

}

public class MyOnPageChangeListener implements OnPageChangeListener {

public void onPageSelected(int page) {

// 翻頁時當(dāng)前page,改變當(dāng)前狀態(tài)園點圖片

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"