相信現在許多人在第一次使用某個程式的時候，會有一個程式的引導的界面，指引使用者如何在程式中進行操作，這個能給使用者帶來良好的使用者體驗.下面，我就來利用ViewPager來實作這個功能。
所實作的功能：
1.可以左右滑動功能圖檔。
2.圖檔的索引 看出目前圖檔所在的位置。
3.可循環滑動。
4.圖檔的索引帶有動畫效果。
在這裡，我們需要用到google提到的一個支援包——Android-support-v4.jar，這個包包含了一些非常有用的類，其中就是ViewPager類來實作頁面之間的切換操作。（viewpager一般在Android3.0 level 11以上才支援）
先上效果圖吧
界面可以實作左右循環滑動，下面跟蹤點也會随着界面的滑動而變化，點選最後一個按鈕即可進入程式主界面了
下面就逐漸介紹我的實作方法，及代碼實作；
首先我們需要自定義一個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<View> views;
@SuppressWarnings("unused")
private ArrayList<String> titles;
public MyPagerAdapter(ArrayList<View> views, ArrayList<String> titles) {
this.views = views;
this.titles = titles;
}
* 擷取目前頁面數
@Override
public int getCount() {
return this.views.size();
* 判斷是否由對象生成界面
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
<span style="font-size:14px;">package com.example.viewpagedemo;
import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.view.LayoutInflater;
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;
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<View> views = new ArrayList<View>();
views.add(view1);
views.add(view2);
views.add(view3);
views.add(view4);
* 每個頁面的Title資料存放到ArrayList集合中 可以在ViewPager擴充卡中調用展示
final ArrayList<String> titles = new ArrayList<String>();
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:
mPage2.setImageDrawable(getResources().getDrawable(
case 2:
mPage3.setImageDrawable(getResources().getDrawable(
case 3:
}
}
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();
}</span><span style="font-size:18px;">
</span>
下面是界面布局：
activity_main.xml
[html] view plain copy
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#ffffff"
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.ViewPager>
<LinearLayout
android:layout_width="fill_parent"
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" />
android:id="@+id/page1"
android:layout_marginLeft="10dp"
android:src="@drawable/page" />
android:id="@+id/page2"
android:id="@+id/page3"
</LinearLayout>
</FrameLayout>
whats_news_gallery_one.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:background="@drawable/whats_new_bg_01"
<TextView
style="@style/whats_new_title"
android:gravity="center"
android:text="@string/whats_new_msg1" />
</LinearLayout>
剩下幾個就不一一貼出來了，後面我會放上Demo。（我另外寫了一篇文章利用SharedPreferences實作記錄使用者是否是第一次啟動程式，進而使用者再次啟動程式時，引導界面不再啟動。
最後我們需要在AndroidManifest.xml進行設定程式的開始界面入口。
<!-- 在這裡設定程式開始界面入口 -->
<activity
android:name=".WelcomeActivity"
android:label="@string/app_name" >
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
![mvp初探[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)