相信現在許多人在第一次使用某個程序的時候，會有一個程序的引導的界面，指引用戶如何在程序中進行操作，這個能給用戶帶來良好的用戶體驗.下面，我就來利用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();
}
/**
* 判斷是否由對象生成界面
*/
@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
<span style="font-size:14px;">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<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:
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();
}
}
}</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_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>
</FrameLayout>
whats_news_gallery_one.xml
[html] view plain copy
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="@drawable/whats_new_bg_01"
android:orientation="vertical" >
<TextView
style="@style/whats_new_title"
android:gravity="center"
android:text="@string/whats_new_msg1" />
</LinearLayout>
剩下幾個就不一一貼出來了，後面我會放上Demo。（我另外寫了一篇文章利用SharedPreferences實現記錄用戶是否是第一次啓動程序，從而用戶再次啓動程序時，引導界面不再啓動。
最後我們需要在AndroidManifest.xml進行設置程序的開始界面入口。
[html] view plain copy
<!-- 在這裏設置程序開始界面入口 -->
<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" />
</intent-filter>
</activity>