利用viewpager简单实现的引导页面

本人是初学者，一直想把自己正在做的一些项目发表到网上与大家分享

这次给大家带来一个简单的安卓引导页面，利用ViewPager实现，加了一些安卓自带的特效MainActivity.java文件内容武如下：

package com.lingchen.android_day03;

import android.app.Activity;

import android.graphics.Color;

import android.os.Bundle;

import android.support.v4.view.PagerAdapter;

import android.support.v4.view.ViewPager;

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

import android.view.View;

import android.view.ViewGroup;

public class MainActivity extends Activity {
/**
* 实现页面的左右滑动；
* step1.声明控件（viewPager,View 类型的数组，pagerAdapter）
* step2.在onCreate中查找控件
* step3.实例化数组
* step4.新建pagerAdapter
* step5.为viewpager设置pagerAdapter
*/

//step1.声明控件
private ViewPager mViewPager;//ViewPager 控件
private View[] childViews;//View 类型数组
private View[] childDots;//底部四个按钮 
private PagerAdapter adapter;//适配起
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
//requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_main);
//step2.查找控件
mViewPager = (ViewPager)

findViewById(R.id.viewpager);
//requestWindowFeature(Window.FEATURE_NO_TITLE);
mViewPager.setPageTransformer(true, new DepthPageTransformer());
//实例化数组,数组中存放新建的页面
childViews = new View[5];
//childView[0]:存放第一个页面page1.xml
childViews[0] = View.inflate(this, R.layout.page1, null);
childViews[1] =View.inflate(this, R.layout.page2, null);
childViews[2] = View.inflate(this, R.layout.page3, null);
childViews[3] = View.inflate(this,R.layout.page4,null);
childViews[4] = View.inflate(this,R.layout.page5,null);
//实例化数组，底部四个按钮
childDots = new View[5];
childDots[0] = (View)this.findViewById(R.id.dot1);
childDots[1] = (View)findViewById(R.id.dot2);
childDots[2] = (View)findViewById(R.id.dot3);
childDots[3] = (View)findViewById(R.id.dot4);
childDots[4] = (View)findViewById(R.id.dot5);
//step4.新建PagerAdapter(抽象类)

       adapter = new InnerAdapter();

       //step5.给ViewPager设置adapter

      mViewPager.setAdapter(adapter);

      //step6.给第一个底部按钮设置背景色白色

      childDots[0].setBackgroundColor(Color.WHITE);

      //step7给viewpager添加相应的事件处理

      mViewPager.setOnPageChangeListener(new OnPageChangeListener() {

  /**
* 使用此方法依次改变每个按钮的背景颜色
* step1.使用for循环for(i=0;i<childDots.length;i++)
* step2.在for循环中，使用for循环依次为按钮设置背景颜色为黑色
* step3.在for循环外，给最后一个按钮设置背景色为白色
* 最后一个按钮是childDots[arg0]
*/
@Override
public void onPageSelected(int arg0) {
// TODO Auto-generated method stub
  for(int i=0;i<childDots.length;i++){
  //改变背景颜色
  childDots[i].setBackgroundColor(Color.BLACK);
  }
  //改变最后一个按钮的颜色
  childDots[arg0].setBackgroundColor(Color.WHITE);
}

@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
// TODO Auto-generated method stub
// childDots[0].
}

@Override
public void onPageScrollStateChanged(int arg0) {
// TODO Auto-generated method stub

}
});
}
/**
* InnerAdapter继承Pageadapter
* 实现他的抽象方法
*/

 class InnerAdapter extends PagerAdapter{

//读取到的滑动控件的数量

@Override

public int getCount() {
// TODO Auto-generated method stub
return childViews.length;

    }

//判断是否为同一张图片

//本例中将两个参数相比返回即可

@Override

public boolean isViewFromObject(View arg0, Object arg1) {
// TODO Auto-generated method stub
return arg0==arg1;

       }

/**

 * 当要现实的图片可以进行缓存的时候

 * 会调用次方法进行图片显示的初始化

 * 我们要将显示的ImageView放到ViewGroup

 * 然后作为返回值即可

 */

@Override
public Object instantiateItem(ViewGroup container, int position) {
// TODO Auto-generated method stub
//return super.instantiateItem(container, position);

          container.addView(childViews[position]);

          return childViews[position];
}

/**

 * pageradapter 只缓存了三张要显示的图片，

 * 如果滑动图片超过缓存的数量，那么就有

 * 调用下面的方法清除已缓存图片

 */

    @Override

    public void destroyItem(ViewGroup container, int position, Object object) {

    // TODO Auto-generated method stub

    //
super.destroyItem(container, position, object);

    container.removeView(childViews[position]);

    }

   } 

}


代码中很多注释，那些并不是做只是一种思路，可供参考。

特效文件是官方的我只是搬运过来，我从不创作源码，我只是源码的搬运工DepthPageTransformer.java

package com.lingchen.android_day03;

import android.support.v4.view.ViewPager;

import android.view.View;

public class DepthPageTransformer implements ViewPager.PageTransformer 

{  
private static float MIN_SCALE = 0.75f;     

      public void transformPage(View view, float position) 

      {           

     int pageWidth = view.getWidth();          

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

// ViewHelper.setAlpha(view, 0);
} else if (position <= 0) { // [-1,0]     //A到B页       
// Use the default slide transition when moving to the left page            
view.setAlpha(1);

// ViewHelper.setAlpha(view, 1);

// ViewHelper.setTranslationX(view, 0);
view.setTranslationX(0);            
view.setScaleX(1);

// ViewHelper.setScaleX(view, 1);

// ViewHelper.setScaleY(view, 1);

// view.setScaleY(1);         
} else if (position <= 1) { // (0,1]             //B到C页
// Fade the page out.             
view.setAlpha(1 - position);  

// ViewHelper.setAlpha(view, 1 - position);            
// Counteract the default slide transition             
view.setTranslationX(pageWidth * -position);

// ViewHelper.setAlpha(view, pageWidth * -position);             
// Scale the page down (between MIN_SCALE and 1)            
float scaleFactor = MIN_SCALE                     
+ (1 - MIN_SCALE) * (1 - Math.abs(position));             
view.setScaleX(scaleFactor); 

// ViewHelper.setScaleX(view, scaleFactor);

// ViewHelper.setScaleY(view, scaleFactor);
view.setScaleY(scaleFactor);         

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

// ViewHelper.setAlpha(view, 0);   
}     

     } 

}


布局文件activity_main.xml如下：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:tools="http://schemas.android.com/tools"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    tools:context=".MainActivity" >

<android.support.v4.view.ViewPager

    android:id="@+id/viewpager"

    android:layout_width="wrap_content"

    android:layout_height="wrap_content">

</android.support.v4.view.ViewPager>

<LinearLayout 

    android:id="@+id/childDots"

    android:layout_width="wrap_content"

    android:layout_height="wrap_content"

    android:orientation="horizontal"

    android:layout_centerHorizontal="true"

    android:layout_alignParentBottom="true"

    android:layout_marginBottom="50dp">

   

    <View 

        android:id="@+id/dot1"

        android:layout_width="8dp"

        android:layout_height="8dp"

        android:layout_marginLeft="3dp"

        android:layout_marginRight="3dp"

        android:background="@android:color/holo_red_light"/>

    <View

        android:id="@+id/dot2"

        android:layout_width="8dp"

        android:layout_height="8dp"

        android:layout_marginLeft="3dp"

        android:layout_marginRight="3dp"

        android:background="@android:color/black"/>

    <View 

        android:id="@+id/dot3"

        android:layout_width="8dp"

        android:layout_height="8dp"

        android:layout_marginLeft="3dp"

        android:layout_marginRight="3dp"

        android:background="@android:color/black"/>

    <View 

        android:id="@+id/dot4"

        android:layout_width="8dp"

        android:layout_height="8dp"

        android:layout_marginLeft="3dp"

        android:layout_marginRight="3dp"

        android:background="@android:color/black"/>

    <View 

        android:id="@+id/dot5"

        android:layout_width="8dp"

        android:layout_height="8dp"

        android:layout_marginLeft="3dp"

        android:layout_marginRight="3dp"

        android:background="@android:color/holo_orange_light"/>

</LinearLayout>

</RelativeLayout>




新建page1~page5这个都一样我只放一个：

<?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:id="@+id/page1"

        android:layout_width="match_parent"

        android:layout_height="match_parent"

        android:src="@drawable/image01"

       android:scaleType="fitXY"/>

</RelativeLayout>


<?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:id="@+id/page1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="@drawable/image02"
android:scaleType="fitXY"/>
</RelativeLayout>