天天看点

利用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.声明控件

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() {

@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

}

});

}

 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;

       }

@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];

}

    @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>