Android中用ViewPager製作引導頁-劉宇

我們通常看到在安裝一個新應用的時候他會跳出一個引導頁，然後翻到最後一頁會有按鈕讓你點擊，隨後就會進入應用，第二次打開這個引導頁就會消失。那麼這樣一個功能就是用Android中support包中的ViewPager來完成的，下面我們開始製作。

 

源碼下載：http://download.csdn.net/detail/liuyu973971883/9597609

 

效果圖：

——————————————————————————————————————

首先，我們先將佈局布好

佈局文件分6個文件，分別是

點擊歡迎頁面：activity_welcome.xml、引導頁：guide.xml

引導頁內容佈局文件：one.xml;two.xml;three.xml,分爲三個內容佈局文件

然後還有最後一個佈局文件，主內容佈局：activity_main.xml

代碼如下：

activity_welcome.xml

 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >
    
	<ImageView 
	    android:layout_height="match_parent"
	    android:layout_width="match_parent"
	    android:background="@drawable/welcome_android"/>
</LinearLayout>

 

guide.xml

<?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/viewpager"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:background="#00000000" >
        
    </android.support.v4.view.ViewPager>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:gravity="center_horizontal"
        android:orientation="horizontal" >

        <ImageView
            android:id="@+id/iv_one"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/login_point" />

        <ImageView
            android:id="@+id/iv_two"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/login_point" />

        <ImageView
            android:id="@+id/iv_three"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/login_point" />
    </LinearLayout>

</RelativeLayout>

 

one.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <ImageView
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:background="@drawable/guide_1" />

</LinearLayout>

 

two.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <ImageView
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:background="@drawable/guide_2" />

</LinearLayout>

 

three.xml

<?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="fill_parent"
        android:layout_height="fill_parent"
        android:background="@drawable/guide_3" />

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:gravity="center_horizontal"
        android:orientation="horizontal" >

        <Button
            android:id="@+id/start_btn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="進入" />
    </LinearLayout>

</RelativeLayout>

activity_main.xml的代碼默認就好，隨後我們修改AndroidManifest.xml文件，將activity_welcome設置爲啓動窗口，代碼如下：

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.oak.learnviewpager"
    android:versionCode="1"
    android:versionName="1.0" >

    <uses-sdk
        android:minSdkVersion="8"
        android:targetSdkVersion="18" />

    <application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
        <activity
            android:name="com.oak.learnviewpager.MainActivity"
            android:label="@string/app_name" >
            
        </activity>
        <activity 
            android:name="com.oak.learnviewpager.Guide">
        </activity>
        <activity 
            android:name="com.oak.learnviewpager.WelcomeAct">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

 

 

——————————————————————————————————————————————

 

下面我們就來設置各佈局文件的java代碼吧

java文件分爲4個java文件

WelcomeAct.java對應的是activity_welcome佈局

Guide.java對應的是guide佈局

ViewAdapter.java這個是ViewPager的適配器，在ViewPager適配器中需要重寫destroyItem();instantiateItem();getCount();isViewFromObject();四個方法

MainActivity.java進入主程序的顯示內容，默認hello world即可

代碼及解釋如下：

WelcomeAct.java：

 

package com.oak.learnviewpager;

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;
import android.os.Message;

public class WelcomeAct extends Activity {
	private boolean isFirst;//判斷是否第一次啓動應用
	//handler，這樣我們需要用handler進行延時2秒來模擬應用啓動時的初始化等待時間
	private Handler handler = new Handler(){
		@Override
		public void handleMessage(Message msg) {
			// TODO Auto-generated method stub
			super.handleMessage(msg);
			//如果發送過來信息爲1則表示第一次進入應用，2則直接進入主內容
			switch (msg.what) {
			case 1:
				goGuide();
				break;
			case 2:
				goHome();
				break;
			}
			
		}
	};
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_welcome);
		//進行一些初始化，判斷是否第一次進入應用
		init();
	}

	private void init() {
		//獲取Android輕量級存儲
		SharedPreferences sp = getSharedPreferences("oak", MODE_PRIVATE);
		//拿到是否有字段isFirst的內容，如果不存在表示第一次進入則會默認返回true
		isFirst = sp.getBoolean("isFirst", true);
		if(isFirst){
			//發生handler信息，延遲2秒發出
			handler.sendEmptyMessageDelayed(1, 2000);
			//獲取輕量級存儲編輯器
			Editor editor  = sp.edit();
			//將isFirst字段置爲假，則下次進入應用不會進入引導頁
			editor.putBoolean("isFirst", false);
			//提交
			editor.commit();
		}else{
			//延遲2秒進入主內容窗口
			handler.sendEmptyMessageDelayed(2, 2000);
		}
	}
	//進入主內容窗口方法
	private void goHome(){
		Intent i = new Intent(WelcomeAct.this,MainActivity.class);
		startActivity(i);
		finish();
	}
	//進入引導頁窗口方法
	private void goGuide(){
		Intent i = new Intent(WelcomeAct.this,Guide.class);
		startActivity(i);
		finish();
	}
}

 

 

Guide.java:

 

package com.oak.learnviewpager;

import java.util.ArrayList;
import java.util.List;
import java.util.zip.Inflater;

import android.app.Activity;
import android.content.Context;
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.widget.Button;
import android.widget.ImageView;

public class Guide extends Activity implements OnPageChangeListener{
	private List<View> views;//創建一個views集合，用於存放3個引用頁的View
	private ViewPager vp;//獲取到ViewPager
	private ImageView[] dots;//設置一個ImageView數組，存放引導頁下面的小點點
	private int[] ids = {R.id.iv_one,R.id.iv_two,R.id.iv_three};//存放引導頁下面的小點點ID
	private Button start_btn;//獲取第三個引導頁的開始按鈕
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		// TODO Auto-generated method stub
		super.onCreate(savedInstanceState);
		setContentView(R.layout.guide);
		//初始化View，也就是初始化ViewPager
		initViews();
		//初始化ViewPager下的小點點
		initDots();
	}
	
	public void initViews(){
		LayoutInflater inflater = LayoutInflater.from(this);
		//實例化views這個集合
		views = new ArrayList<View>();
		//分別加入三個佈局文件
		views.add(inflater.inflate(R.layout.one, null));
		views.add(inflater.inflate(R.layout.two, null));
		views.add(inflater.inflate(R.layout.three, null));
		
		//獲取到ViewPager
		vp = (ViewPager) findViewById(R.id.viewpager);
		//將ViewPager的適配器加入進去
		vp.setAdapter(new ViewAdapter(views));
		//設置ViewPager監聽，在滑動的時候，下面的小點點也跟着變化
		vp.setOnPageChangeListener(this);
		
		//這是第三個引導頁開始按鈕的監聽，點擊後進入主內容activity
		start_btn = (Button) views.get(2).findViewById(R.id.start_btn);
		start_btn.setOnClickListener(new OnClickListener() {
			@Override
			public void onClick(View arg0) {
				Intent intent = new Intent();
				intent.setClass(Guide.this, MainActivity.class);
				startActivity(intent);
				finish();
			}
		});
	}
	
	private void initDots() {
		//實例化點點數組，大小爲有多少個引導頁就有多少個點點
		dots = new ImageView[views.size()];
		//分別獲取到這些點點
		for (int i = 0; i < dots.length; i++) {
			dots[i] = (ImageView) findViewById(ids[i]);
		}
	}

	@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
		
	}
	//當ViewPager別置換選中的時候點點進行切換
	@Override
	public void onPageSelected(int arg0) {
		// TODO Auto-generated method stub
		for (int i = 0; i < dots.length; i++) {
			if(i == arg0){
				//選中後點點顯示的圖標
				dots[i].setImageResource(R.drawable.login_point_selected);
			}else{
				//未選中後點點顯示的圖標
				dots[i].setImageResource(R.drawable.login_point);
			}
		}
	}
	
}

 

ViewPager.java

package com.oak.learnviewpager;

import java.util.List;

import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.View;

public class ViewAdapter extends PagerAdapter {
	private List<View> views;
	//構造方法，當綁定適配器時傳入引導頁的集合
	public ViewAdapter(List<View> views) {
		super();
		this.views = views;
	}
	//此方法將劃過的pager消除，減少資源
	@Override
	public void destroyItem(View container, int position, Object object) {

		((ViewPager) container).removeView(views.get(position));
	}
	//滑動添加pager
	@Override
	public Object instantiateItem(View container, int position) {

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

		return views.get(position);

	}
	//獲取pager數量
	@Override
	public int getCount() {
		// TODO Auto-generated method stub
		return views.size();
	}
	//判斷是否爲當前pager
	@Override
	public boolean isViewFromObject(View arg0, Object arg1) {
		// TODO Auto-generated method stub
		return arg0 == arg1;
	}

}

 

 

 

MainActivity.java的代碼默認即可無需改動，讓他顯示helloWord即可。

 

到這裏就製作完成了，ViewPager不光可以製作引導頁，還可以用來製作廣告滾播等功能

 

By：Brycen Liu