以下我們來做一個新浪微博的導航，是怎麼利用ViewPager來完成的。
首先，我們先創建一個新的項目名爲：ViewPagerDemo
創建一個新的Activity做爲導航界面。GuideActivity 的佈局文件如下：
備註：ViewPager是在V4包中的，所以必須從android.support.v4.view.ViewPager中獲取。
<android.support.v4.view.ViewPager
android:id="@+id/view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@android:color/black"
>
</android.support.v4.view.ViewPager>ViewPager與LisstView類似，我們也需要一個適配器，他就是PagerAdapter。先創建一個ViewPagerAdapter類繼承PagerAdapter.
ViewPagerAdapte類代碼：
package com.example.viewpagerdemo;
import java.util.List;
import android.content.Context;
import android.support.v4.view.PagerAdapter;
import android.view.View;
import android.view.ViewGroup;
/**
* ViewPagerAdapter類
* @author user11
*
*/
public class ViewPagerAdapter extends PagerAdapter{
//創建一個集合，存放所有的View
private List<View> views;
//創建一個Context，承接上下文
private Context context;
//創建一個構造方法，傳遞參數
public ViewPagerAdapter(List<View> views,Context context) {
this.views = views;
this.context = context;
}
@Override
public int getCount() {
// TODO Auto-generated method stub
return views.size();
}
//添加View
@Override
public Object instantiateItem(ViewGroup container, int position) {
container.addView(views.get(position));
return views.get(position);
}
//銷燬View
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView(views.get(position));
}
@Override
public boolean isViewFromObject(View arg0, Object arg1) {
// TODO Auto-generated method stub
return arg0 == arg1;
}
}
先定義三個對象：
<pre name="code" class="html">//ViewPager對象
private ViewPager vp;
//ViewPager對象的適配器
private ViewPagerAdapter vpAdapter;
//存放View集合
private List<View> views;/**
* 初始化控件
*/
private void initWidget() {
vp = (ViewPager) findViewById(R.id.view_pager);
views = new ArrayList<View>();
}接下來就可以將導航的界面添加到ViewPager中。動態生成View
/**
* 動態加載View
*/
private void initView() {
LayoutInflater inflater = LayoutInflater.from(this);
// 加載View
views.add(inflater.inflate(R.layout.guide_one, null));
views.add(inflater.inflate(R.layout.guide_two, null));
views.add(inflater.inflate(R.layout.guide_three, null));<span style="white-space:pre"> </span>//將views集合傳遞到適配器中
vpAdapter = new ViewPagerAdapter(views, this);<span style="white-space:pre"> </span>//配置ViewPager的適配器
vp.setAdapter(vpAdapter);<span style="white-space:pre"> </span>｝添加到View的佈局文件，根據自己的項目需求，可自定義佈局文件。這邊只是簡單的設置一個ImageView文件
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="center"
android:src="@drawable/guide_1"
/>
</RelativeLayout>
這樣就可以實現ViewPager的左右滑動了。爲了更好的導航，在圖片的下方，有些小點，來提示用戶當前是第幾張圖片。那麼這是如何做到的呢？
其實很簡單。請大家耐心的讀下去。
首先設置ViewPager的佈局文件如下：
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<android.support.v4.view.ViewPager
android:id="@+id/view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@android:color/black"
>
</android.support.v4.view.ViewPager>
<LinearLayout
android:id="@+id/linear_layout_dot"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:gravity="center_horizontal"
>
<ImageView
android:id="@+id/dot1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="16dp"
android:src="@drawable/login_point_selected"
/>
<ImageView
android:id="@+id/dot2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/login_point"
/>
<ImageView
android:id="@+id/dot3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="16dp"
android:src="@drawable/login_point"
/>
</LinearLayout>
</RelativeLayout>和之前的相比較，底下多了三個ImageView，用來存放提示點。
那麼如何控制，當滑動圖片的時候，只有當前頁下方的點是亮的，其餘點是不亮的呢。首先我們必須獲取點的id,來改變ImageView的圖片資源。
創建點的圖片集合和點的id集合 對象
private ImageView[] dots;
private Integer[] ids = { R.id.dot1, R.id.dot2, R.id.dot3 };利用一個for循環來獲取點的id
/**
* 對點的操作方法
*/
private void initDots() {
dots = new ImageView[views.size()];
// 通過for循環獲取點的id
for (int i = 0; i < views.size(); i++) {
dots[i] = (ImageView) findViewById(ids[i]);
}
}**
* ViewPager的監聽事件
*/
// 滑動狀態改變的時候調用
@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 position) {
for (int i = 0; i < ids.length; i++) {
if (i == position) {
dots[i].setImageResource(R.drawable.login_point_selected);
} else {
dots[i].setImageResource(R.drawable.login_point);
}
}
}這樣，左右滑動的時候，底下的亮就會跟着一起變。
那麼導航界面，一般只有在第一次啓動程序的時候，纔會跳轉到導航界面。第二次在啓動程序，就直接跳轉到主界面了。那麼如何實現呢？
大家一起來學習下吧！
創建一個歡迎界面，啓動程序，一般都有個歡迎界面，從歡迎界面中判斷是跳轉到導航界面還是主界面。
package com.example.viewpagerdemo;
import android.app.Activity;
import android.content.Intent;
import android.content.SharedPreferences;
import android.content.SharedPreferences.Editor;
import android.os.Bundle;
import android.os.Handler;
public class Welcome extends Activity{
private boolean isFirstIn = false;
private static final int TIME = 2000;
private static final int GO_HOME = 1000;
private static final int GO_GUIDE = 1001;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.welcome);
init();
}
//只有第一次安裝程序進入導航界面 ，否則進入主界面
private void init(){
SharedPreferences preferences = getSharedPreferences("imcore", MODE_PRIVATE);
isFirstIn = preferences.getBoolean("isFirstIn", true);
if(!isFirstIn){
mHandler.sendEmptyMessageDelayed(GO_HOME, TIME);
}else{
mHandler.sendEmptyMessageDelayed(GO_GUIDE, TIME);
//修改isFirstIn爲false
Editor editor = preferences.edit();
editor.putBoolean("isFirstIn", false);
editor.commit();
}
}
private Handler mHandler = new Handler(){
public void handleMessage(android.os.Message msg) {
switch (msg.what) {
case GO_HOME:
//
goHome();
break;
case GO_GUIDE:
//
goGuide();
break;
}
};
};
//進入主界面
private void goHome(){
Intent intent = new Intent(Welcome.this,MainActivity.class);
startActivity(intent);
}
//進入引導界面
private void goGuide(){
Intent intent = new Intent(Welcome.this,GuideActivity.class);
startActivity(intent);
}
}