App第一次启动时翻页介绍的简洁实现

应用第一次启动的时候，要给用户介绍这个应用。这时候就会选择ViewPager来实现。第一次运行微信的时候，出现一些翻页的界面，告诉你微信可以用语音来聊天，还可以在朋友圈分享生活。像这样：

          

*布局变化的同时，下面的亮点也变化了，从第二个跳到了第三个。

然后，去看这个亮点跳动的源代码的时候，发现有一大堆冗长的代码（不用细看，瞄一下即可），

public class MyOnPageChangeListener implements OnPageChangeListener {
@Override
public void onPageSelected(int arg0) {
switch (arg0) {
case 0 :
mPage0.setImageDrawable(getResources().getDrawable(
R.drawable.page_now));
mPage1.setImageDrawable(getResources().getDrawable(R.drawable.page));
break;
case 1 :
mPage1.setImageDrawable(getResources().getDrawable(
R.drawable.page_now));
mPage0.setImageDrawable(getResources().getDrawable(R.drawable.page));
mPage2.setImageDrawable(getResources().getDrawable(R.drawable.page));
break;
case 2 :
mPage2.setImageDrawable(getResources().getDrawable(
R.drawable.page_now));
mPage1.setImageDrawable(getResources().getDrawable(R.drawable.page));
mPage3.setImageDrawable(getResources().getDrawable(R.drawable.page));
break;
case 3 :
mPage3.setImageDrawable(getResources().getDrawable(
R.drawable.page_now));
mPage4.setImageDrawable(getResources().getDrawable(R.drawable.page));
mPage2.setImageDrawable(getResources().getDrawable(R.drawable.page));
break;
case 4 :
mPage4.setImageDrawable(getResources().getDrawable(
R.drawable.page_now));
mPage3.setImageDrawable(getResources().getDrawable(R.drawable.page));
mPage5.setImageDrawable(getResources().getDrawable(R.drawable.page));
break;
case 5 :
mPage5.setImageDrawable(getResources().getDrawable(
R.drawable.page_now));
mPage4.setImageDrawable(getResources().getDrawable(R.drawable.page));
break;
}
currIndex = arg0;
// animation.setFillAfter(true);// True:图片停在动画结束位置
// animation.setDuration(300);
// mPageImg.startAnimation(animation);
}
@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
}

@Override
public void onPageScrollStateChanged(int arg0) {
}
}

用数组的话可以写得更简洁些，同时代码也更加易读。修改后的版本：

class MyOnPageChangeListner implements 
  OnPageChangeListener{
@Override
public void onPageSelected(int page){
mPage[page].setImageDrawable(getResources().
getDrawable(R.drawable.page_now));
if(page!=0){
mPage[page-1].setImageDrawable(getResources().
getDrawable(R.drawable.page));
}
if(page!=4){
mPage[page+1].setImageDrawable(getResources().
getDrawable(R.drawable.page));
}
}

@Override
public void onPageScrolled(int arg0,float arg1,
int arg2){ 
}
@Override
public void onPageScrollStateChanged(int arg0){ 
}
}

这是一个页面变化的监听器。显然，来到某一页的话，就把那一页对应的点设置为亮点。暗点怎么设置呢？如果来到第一页，那么只可能是第二页来到第一页的，则只用第二个点的图片设为暗点。同理，来到最后一页的话，只能是倒数第二页滑到最后一页的，只用把倒数第二页设置为暗点。而其它页的话，则把左右两点设置为暗点即可。

之前的话，开个ImageView的数组，

其它的，设置ViewPager的话，先把所有布局文件加载到一个列表里面，

之后设置左右滑动的监听器，

MainActivity.java，

package lzw.model;

import java.util.ArrayList;

import lzw.chronometertest.R;
import android.app.Activity;
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.LayoutInflater;
import android.view.View;
import android.widget.ImageView;

public class MainActivity extends Activity {
ViewPager pager;
ImageView[] mPage=new ImageView[5];

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
pager=(ViewPager)findViewById(R.id.viewPager);
pager.setOnPageChangeListener(new MyOnPageChangeListner());

LayoutInflater mLi=LayoutInflater.from(this);
final ArrayList<View> views=new ArrayList<View>();
for(int i=0;i<5;i++){
String name="what"+i;
views.add(mLi.inflate(getResources().getIdentifier(name,
"layout",getPackageName()),null));
}

mPage[0]=(ImageView)findViewById(R.id.page0);
mPage[1]=(ImageView)findViewById(R.id.page1);
mPage[2]=(ImageView)findViewById(R.id.page2);
mPage[3]=(ImageView)findViewById(R.id.page3);
mPage[4]=(ImageView)findViewById(R.id.page4);

PagerAdapter adapter=new PagerAdapter(){
@Override
public boolean isViewFromObject(View arg0,Object arg1){
return arg0==arg1;
}

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

@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);
}
};

pager.setAdapter(adapter);

}

class MyOnPageChangeListner implements 
  OnPageChangeListener{
@Override
public void onPageSelected(int page){
mPage[page].setImageDrawable(getResources().
getDrawable(R.drawable.page_now));
if(page!=0){
mPage[page-1].setImageDrawable(getResources().
getDrawable(R.drawable.page));
}
if(page!=4){
mPage[page+1].setImageDrawable(getResources().
getDrawable(R.drawable.page));
}
}

@Override
public void onPageScrolled(int arg0,float arg1,
int arg2){ 
}
@Override
public void onPageScrollStateChanged(int arg0){ 
}
}

}

main.xml，

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >
    <android.support.v4.view.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"> 
    </android.support.v4.view.ViewPager>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|center"
        android:layout_marginBottom="30dp" >

        <ImageView
            android:id="@+id/page0"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" 
            android:src="@drawable/page_now" />

        <ImageView
            android:id="@+id/page1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="10dp"
            android:src="@drawable/page" />


        <ImageView
            android:id="@+id/page2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="10dp"
            android:src="@drawable/page" />


        <ImageView
            android:id="@+id/page3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="10dp"
            android:src="@drawable/page" /> 


        <ImageView
            android:id="@+id/page4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="10dp"
            android:src="@drawable/page" /> 

     </LinearLayout>

</FrameLayout>

项目源码