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