利用Viewpager实现引导界面

利用viewPager实现应用的引导界面
不废话，先上效果图：





这里是随便从网上盗了几张引导界面的图，意思到了就行了。
引导界面，肯定是在用户第一次打开的时候显示，第二次打开程序就不需要显示了。这里比较简单，就直接上代码了：

package students.startuitest;

import android.content.Intent;
import android.content.SharedPreferences;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;

/**
 * Created by 24540 on 2016/11/3.
 */
public class WelcomeActivity extends AppCompatActivity {

    private boolean mIsFirstUse;
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_welcome);
        SharedPreferences preferences = getSharedPreferences("mIsFirstUse",MODE_PRIVATE);
        mIsFirstUse = preferences.getBoolean("mIsFirstUse", true);
        if(mIsFirstUse){//如果是第一次进入打开程序，设置进入引导界面，否则直接进入主界面
            Intent intent = new Intent(this,GuideActivity.class);
            startActivity(intent);
        }else{
            Intent intent = new Intent(this,MainActivity.class);
            startActivity(intent);
        }
        SharedPreferences.Editor editor = preferences.edit();
        editor.putBoolean("mIsFirstUse",false);
        editor.commit();
    }
}

xml布局文件比较简单，这里就不贴代码了。下面重头戏来了，下面就是我们引导界面实现的主要逻辑，先看代码：

 views = new ArrayList<>();
    private ViewPagerAdapter mAdapter;
    private View view1,view2,view3,view4;
    private Button mState;

    //底部小点图片
    private LinearLayout mPoint;


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_guilde);
        initView();
        initData();
    }

    private void initData() {
        views.add(view1);
        views.add(view2);
        views.add(view3);
        views.add(view4);
        mAdapter = new ViewPagerAdapter(views);
        viewPager.setOnPageChangeListener(this);
        addPoint();
        viewPager.setAdapter(mAdapter);
//        viewPager.setPageTransformer(true,new DepthTransformer());//设置翻页动画效果
        viewPager.setPageTransformer(true,new ZoomOutTransformer());//设置淡入淡出动画效果


        mState.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Intent intent= new Intent(GuideActivity.this,MainActivity.class);
                startActivity(intent);
            }
        });
    }

    private void initView() {
        viewPager = (ViewPager) findViewById(R.id.viewpager);
        mPoint = (LinearLayout) findViewById(R.id.llPoint);
        LayoutInflater inflater =LayoutInflater.from(this);
        view1 = inflater.inflate(R.layout.view_guide001,null);
        view2 = inflater.inflate(R.layout.view_guide002,null);
        view3 = inflater.inflate(R.layout.view_guide003,null);
        view4 = inflater.inflate(R.layout.view_guide004,null);
        mState = (Button) view4.findViewById(R.id.start_use);

    }

    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

    }

    @Override
    public void onPageSelected(int position) {
        Log.d("TAG",position+"pageSelected");
        monitorPoint(position);
//        showCurrentIndex(position);
    }

    @Override
    public void onPageScrollStateChanged(int state) {

    }

    class ViewPagerAdapter extends PagerAdapter{
    //这里必须重写以下方法，
     private  List
  
  
   
    views;

        public ViewPagerAdapter(List
   
   
    
     views) {
            this.views = views;
        }

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

        //销毁postion位置的界面
        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
            (container).removeView(views.get(position));
        }
        /**
         *  初始化position位置的界面
         */
        @Override
        public Object instantiateItem(ViewGroup container, int position) {
           View view = views.get(position);
            container.addView(view);
            return view;
        }
        //判断是否由对象生成界面
        @Override
        public boolean isViewFromObject(View view, Object object) {
            return view==object;
        }
    }

    /**
     * 添加小圆点
     */
    private  void addPoint(){
        for (int i = 0; i < views.size(); i++) {
            LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(
                    ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
            if(i<1){
                params.setMargins(0,0,0,0);
            }else{
                params.setMargins(10,0,0,0);
            }
            ImageView iv = new ImageView(this);
            iv.setLayoutParams(params);
            iv.setBackgroundResource(R.mipmap.select_select);
            mPoint.addView(iv);
        }
        mPoint.getChildAt(0).setBackgroundResource(R.mipmap.select);
    }

    /**
     * 标识当前查看进度
     * @param position
     */
    private void monitorPoint(int position){
        for (int i = 0; i <=views.size(); i++) {
            if(i==position){
                mPoint.getChildAt(position).setBackgroundResource(R.mipmap.select_select);
            }else{
                mPoint.getChildAt(position).setBackgroundResource(R.mipmap.select);
            }
        }

    }

    /**
     * 标识当前查看的是那个目录
     * @param position
     */
    private void showCurrentIndex(final int position){
        for (int i = 0; i < views.size(); i++) {
            if(i==position){
                mPoint.getChildAt(i).setBackgroundResource(R.mipmap.select);
            }else{
                mPoint.getChildAt(i).setBackgroundResource(R.mipmap.select_select);
            }
        }
    }

}" data-snippet-id="ext.1421e96c203e2e727d8c5474b63a8efa" data-snippet-saved="false" data-codota-status="done">
    
    package students.startuitest;

import android.content.Intent;
import android.os.Bundle;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.LinearLayout;

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

import students.startuitest.transormer.ZoomOutTransformer;

public class GuideActivity extends AppCompatActivity implements ViewPager.OnPageChangeListener{

    private ViewPager viewPager;
    private List<View> views = new ArrayList<>();
    private ViewPagerAdapter mAdapter;
    private View view1,view2,view3,view4;
    private Button mState;

    //底部小点图片
    private LinearLayout mPoint;


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_guilde);
        initView();
        initData();
    }

    private void initData() {
        views.add(view1);
        views.add(view2);
        views.add(view3);
        views.add(view4);
        mAdapter = new ViewPagerAdapter(views);
        viewPager.setOnPageChangeListener(this);
        addPoint();
        viewPager.setAdapter(mAdapter);
//        viewPager.setPageTransformer(true,new DepthTransformer());//设置翻页动画效果
        viewPager.setPageTransformer(true,new ZoomOutTransformer());//设置淡入淡出动画效果


        mState.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Intent intent= new Intent(GuideActivity.this,MainActivity.class);
                startActivity(intent);
            }
        });
    }

    private void initView() {
        viewPager = (ViewPager) findViewById(R.id.viewpager);
        mPoint = (LinearLayout) findViewById(R.id.llPoint);
        LayoutInflater inflater =LayoutInflater.from(this);
        view1 = inflater.inflate(R.layout.view_guide001,null);
        view2 = inflater.inflate(R.layout.view_guide002,null);
        view3 = inflater.inflate(R.layout.view_guide003,null);
        view4 = inflater.inflate(R.layout.view_guide004,null);
        mState = (Button) view4.findViewById(R.id.start_use);

    }

    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

    }

    @Override
    public void onPageSelected(int position) {
        Log.d("TAG",position+"pageSelected");
        monitorPoint(position);
//        showCurrentIndex(position);
    }

    @Override
    public void onPageScrollStateChanged(int state) {

    }

    class ViewPagerAdapter extends PagerAdapter{
    //这里必须重写以下方法，
     private  List<View> views;

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

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

        //销毁postion位置的界面
        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
            (container).removeView(views.get(position));
        }
        /**
         *  初始化position位置的界面
         */
        @Override
        public Object instantiateItem(ViewGroup container, int position) {
           View view = views.get(position);
            container.addView(view);
            return view;
        }
        //判断是否由对象生成界面
        @Override
        public boolean isViewFromObject(View view, Object object) {
            return view==object;
        }
    }

    /**
     * 添加小圆点
     */
    private  void addPoint(){
        for (int i = 0; i < views.size(); i++) {
            LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(
                    ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
            if(i<1){
                params.setMargins(0,0,0,0);
            }else{
                params.setMargins(10,0,0,0);
            }
            ImageView iv = new ImageView(this);
            iv.setLayoutParams(params);
            iv.setBackgroundResource(R.mipmap.select_select);
            mPoint.addView(iv);
        }
        mPoint.getChildAt(0).setBackgroundResource(R.mipmap.select);
    }

    /**
     * 标识当前查看进度
     * @param position
     */
    private void monitorPoint(int position){
        for (int i = 0; i <=views.size(); i++) {
            if(i==position){
                mPoint.getChildAt(position).setBackgroundResource(R.mipmap.select_select);
            }else{
                mPoint.getChildAt(position).setBackgroundResource(R.mipmap.select);
            }
        }

    }

    /**
     * 标识当前查看的是那个目录
     * @param position
     */
    private void showCurrentIndex(final int position){
        for (int i = 0; i < views.size(); i++) {
            if(i==position){
                mPoint.getChildAt(i).setBackgroundResource(R.mipmap.select);
            }else{
                mPoint.getChildAt(i).setBackgroundResource(R.mipmap.select_select);
            }
        }
    }

}
   
   
  
  

这里值的注意的是，实现ViewPagerAdapter时，必须实现里面的四个方法

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

        //销毁postion位置的界面
        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
            (container).removeView(views.get(position));
        }
        /**
         *  初始化position位置的界面
         */
        @Override
        public Object instantiateItem(ViewGroup container, int position) {
           View view = views.get(position);
            container.addView(view);
            return view;
        }
        @Override
        public boolean isViewFromObject(View view, Object object) {
            return view==object;
        }

否则会抛出异常，以前就是因为只实现了其中的两个方法而导致了奔溃。
下面是对应的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="match_parent"
        android:layout_height="match_parent"
        />

    <LinearLayout
        android:id="@+id/llPoint"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="24.0dip"
        android:gravity="center_horizontal"
        android:orientation="horizontal"
        /><!--这里用来放置阅读进度提示-->
</RelativeLayout>

参考了鸿洋大神的博客，添加了一点特殊的view的切换效果。源码如下,具体原理请参考原作者.

package students.startuitest.transormer;

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

/**
 * 设置翻页的动画效果
 * Created by 24540 on 2016/11/4.
 */
public class DepthTransformer implements ViewPager.PageTransformer {

    private static final float MIN_SCALE = 0.75f;
    public void transformPage(View view, float position) {
        int pageWidth = view.getWidth();

        if (position < -1) {
            view.setAlpha(0);
        } else if (position <= 0) {
            view.setAlpha(1);
            view.setTranslationX(0);
            view.setScaleX(1);
            view.setScaleY(1);
        } else if (position <= 1) {
            view.setAlpha(1 - position);
            view.setTranslationX(pageWidth * -position);
            float scaleFactor = MIN_SCALE
                    + (1 - MIN_SCALE) * (1 - Math.abs(position));
            view.setScaleX(scaleFactor);
            view.setScaleY(scaleFactor);
        } else {
            view.setAlpha(0);
        }
    }
}

package students.startuitest.transormer;

import android.annotation.SuppressLint;
import android.support.v4.view.ViewPager;
import android.util.Log;
import android.view.View;

/**
 * Created by 24540 on 2016/11/4.
 */
public class ZoomOutTransformer implements ViewPager.PageTransformer{
    private static final float MIN_SCALE = 0.85f;
    private static final float MIN_ALPHA = 0.5f;
    @SuppressLint("NewApi")
    public void transformPage(View view, float position)
    {
        int pageWidth = view.getWidth();
        int pageHeight = view.getHeight();

        Log.e("TAG", view + " , " + position + "");

        if (position < -1)
        { // [-Infinity,-1)
            // This page is way off-screen to the left.
            view.setAlpha(0);

        } else if (position <= 1) //a页滑动至b页 ； a页从 0.0 -1 ；b页从1 ~ 0.0
        { // [-1,1]
            // Modify the default slide transition to shrink the page as well
            float scaleFactor = Math.max(MIN_SCALE, 1 - Math.abs(position));
            float vertMargin = pageHeight * (1 - scaleFactor) / 2;
            float horzMargin = pageWidth * (1 - scaleFactor) / 2;
            if (position < 0)
            {
                view.setTranslationX(horzMargin - vertMargin / 2);
            } else
            {
                view.setTranslationX(-horzMargin + vertMargin / 2);
            }

            // Scale the page down (between MIN_SCALE and 1)
            view.setScaleX(scaleFactor);
            view.setScaleY(scaleFactor);

            // Fade the page relative to its size.
            view.setAlpha(MIN_ALPHA + (scaleFactor - MIN_SCALE)
                    / (1 - MIN_SCALE) * (1 - MIN_ALPHA));

        } else
        { // (1,+Infinity]
            // This page is way off-screen to the right.
            view.setAlpha(0);
        }
    }
}

使用方法在GuideActivity中有提示，主要实现逻辑代码

  viewPager.setPageTransformer(true,new DepthTransformer());//设置翻页动画效果
        viewPager.setPageTransformer(true,new ZoomOutTransformer());//设置淡入淡出动画效果

至此，引导界面基本完成了。最后，贴上manifest中的代码：

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
          package="students.startuitest">

    <application
        android:allowBackup="true"
        android:icon="@mipmap/select"
        android:label="@string/app_name"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity android:name=".WelcomeActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN"/>
                <category android:name="android.intent.category.LAUNCHER"/>
            </intent-filter>
        </activity>
        <activity android:name=".GuideActivity"/>
        <activity android:name=".MainActivity"/>
    </application>

</manifest>

引导界面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:background="@drawable/guide001">

</LinearLayout>

好了，利用viewPager实现应用程序的引导界面就到这里了，奉上源码下载地址.

参考博客：http://blog.csdn.net/lmj623565791/article/details/40411921
http://blog.csdn.net/li5685918/article/details/51547681