ViewPager制作导航页

ViewPager基本用法有：

1. 程序使用导航，外加底部圆点的效果
2. 页卡滑动，加上菜单的效果

这里只讲第1种用法

一.效果图

二。welcome界面

一般来说，引导界面是出现第一次运行时出现的，之后不会再出现。所以需要记录是否是第一次使用程序，办法有很多，最容易想到的就是使用SharedPreferences来保存。步骤如下：
1、程序进入欢迎界面，WelcomeActivity，在这里读取SharedPreferences里面的变量，先设置为true。进入引导界面，然后设置为false。
2、之后每次进入欢迎界面读取SharedPreferences里面的变量，因为是false，所以不会运行引导界面了。
代码如下：

1.welcome布局

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" 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_welcome"/>

</RelativeLayout>

2.welcome.java 欢迎界面

package com.scorpions.beluga;

import android.app.Activity;
import android.content.Intent;
import android.content.SharedPreferences;
import android.os.Bundle;
import android.os.Handler;
import android.os.Message;
import android.view.LayoutInflater;
import android.view.View;
import android.view.Window;
import android.view.WindowManager;
import android.widget.Button;

public class WelcomeActivity 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;

    private Handler choosePageHandler = new Handler(){
        @Override
        public void handleMessage(Message msg) {
            switch (msg.what){
                case GO_HOME:
                    setGoHome();
                    break;
                case GO_GUIDE:
                    setGoGuide();
                    break;
            }
        }
    };

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,
                WindowManager.LayoutParams.FLAG_FULLSCREEN);     //全屏显示
        setContentView(R.layout.activity_welcome);
        init();

    }

    private void init(){
        SharedPreferences preferences = getSharedPreferences("page",MODE_PRIVATE);
        isFirstIn = preferences.getBoolean("isFirstIn",true);
        if(!isFirstIn){
            choosePageHandler.sendEmptyMessageDelayed(GO_HOME,TIME);
        }else{
            choosePageHandler.sendEmptyMessageDelayed(GO_GUIDE,TIME);
            SharedPreferences.Editor editor = preferences.edit();
            editor.putBoolean("isFirstIn",false);
            editor.commit();
        }

    }
    private void setGoHome(){
        Intent i = new Intent(WelcomeActivity.this,MainActivity.class);
        startActivity(i);
        finish();
    }

    private void setGoGuide(){
        Intent i = new Intent(WelcomeActivity.this,Guide_Page.class);
        startActivity(i);
        finish();
    }
}

三.引导界面

1.viewpager类似listview需要构建对应的adaper，此adaper继承自PagerAdapter，在这里我将此adapter与此界面的Activity写在同一个.java文件

Guide_Page.java

package com.scorpions.beluga;

import android.app.Activity;
import android.content.Context;
import android.content.Intent;
import android.os.Bundle;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.LayoutInflater;
import android.view.View;
import android.view.Window;
import android.view.WindowManager;
import android.widget.ImageView;

import java.util.ArrayList;
import java.util.List;


public class Guide_Page  extends Activity implements ViewPager.OnPageChangeListener {

    private ViewPager vp_guide;
    private ViewPagerAdapter vp_guide_Adapter;
    private List<View> views;
    private ImageView[] dots;
    private int[] guide_dot_ids = {R.id.guide_dot_01,R.id.guide_dot_02,R.id.guide_dot_03};

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,
                WindowManager.LayoutParams.FLAG_FULLSCREEN);
        setContentView(R.layout.activity_guide_page);
        initViews();
        initDots();
    }

    //初始化
    private void initViews(){
        //LayoutInflater 实例化
        LayoutInflater inflater = LayoutInflater.from(this);
        views = new ArrayList<View>();
        views.add(inflater.inflate(R.layout.guide_page_one,null));
        views.add(inflater.inflate(R.layout.guide_page_two,null));
        views.add(inflater.inflate(R.layout.guide_page_three,null));
    //将数据传入适配器
        vp_guide_Adapter = new ViewPagerAdapter(views,this);  
        vp_guide = (ViewPager)findViewById(R.id.viewpager_guide);
        vp_guide.setAdapter(vp_guide_Adapter);
        views.get(2).findViewById(R.id.enter_MainActivity_btn).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Intent intent = new Intent(Guide_Page.this,MainActivity.class);
                startActivity(intent);
                finish();
            }
        });
        vp_guide.setOnPageChangeListener(this);

    }

    private void initDots(){
        dots = new ImageView[views.size()];
        for (int i=0;i<views.size();i++){
            dots[i] = (ImageView) findViewById(guide_dot_ids[i]);
        }
    }

    //当页面被滑动时调用
    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

    }

    //当前新的页面被选中时调用
    @Override
    public void onPageSelected(int position) {
        for(int i=0;i<dots.length;i++){
            if(position==i){
                dots[i].setImageResource(R.drawable.guide_dot_selected);
            }else{
                dots[i].setImageResource(R.drawable.guide_dot);
            }
        }
    }

    //滑动状态改变时调用
    @Override
    public void onPageScrollStateChanged(int state) {

    }
}

//构造适配器
class ViewPagerAdapter extends PagerAdapter{

    private List<View> views;
    private Context context;

    public ViewPagerAdapter(List<View> views,Context context){
        this.views=views;
        this.context=context;
    }

    @Override
    public void destroyItem(View container, int position, Object object) {

        ((ViewPager)container).removeView(views.get(position));
    }

    @Override
    public Object instantiateItem(View container, int position) {

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

    @Override
    public int getCount() {
        return views.size();
    }

    @Override
    public boolean isViewFromObject(View view, Object object) {
        return (view==object);
    }
}

2.activity_guide_page.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_guide"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent">
    </android.support.v4.view.ViewPager>

    <LinearLayout
        android:id="@+id/guide_dots"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:gravity="center_horizontal"
        android:layout_marginBottom="24.0dp"
        android:orientation="horizontal">

        <ImageView
            android:id="@+id/guide_dot_01"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="15.0dip"
            android:src="@drawable/guide_dot_selected"/>

        <ImageView
            android:id="@+id/guide_dot_02"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="15.0dip"
            android:src="@drawable/guide_dot"/>

        <ImageView
            android:id="@+id/guide_dot_03"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="15.0dip"
            android:src="@drawable/guide_dot"/>

    </LinearLayout>

</RelativeLayout>

3.guide_page1.xml和guide_page2.xml以及guide_page3.xml

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

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/guide_page_01"/>
</LinearLayout>

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

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/guide_page_02"/>
</LinearLayout>

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

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/guide_page_03"/>

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

        <Button
            android:id="@+id/enter_MainActivity_btn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="进入"/>

    </LinearLayout>


</RelativeLayout>

详细了解viewpager访问如下链接：

Android ViewPager使用详解
Actionbar在viewpager中使用的标题效果
android ViewPager,ViewFlipper,ViewFlow实现左右滑动