Android 启动引导页（动态生成底部导航圆点）

工作快半年了，想把工作中的一些有用的东西分享分享，于是想到了写博客，方便别人查看，也方便自己记录点滴。好了，客套话不多说。今天我要分享的是“android 启动引导页”效果的实现，底部的导航圆点根据引导页的数量动态生成，不是在布局文件里写死了的，主要用到了ViewPager这个类。先看看效果：







详细实现步骤如下：

第一：准备图片资源，这里我准备了几张火影忍者的图片（5张）



和小圆点是否选中的两张图片





项目目录如下：



第二：先编写布局文件activity_main.xml。里面用到了ViewPager这个滑动组件，铺满整个窗体用于显示引导页的图片，还有一个居于底部的LinearLayout，用于动态添加引导图标（小圆点）。

<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="${relativePackage}.${activityClass}" >

<android.support.v4.view.ViewPager
android:id="@+id/my_viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
<LinearLayout
android:id="@+id/dot_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:gravity="center"
android:layout_marginBottom="40dip"
>
</LinearLayout>

</RelativeLayout>

第三：编写导航小圆点的selector，分为选中和没选中两种状态。

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:drawable="@drawable/dot_normal" android:state_selected="false"/>
<item android:drawable="@drawable/dot_selected" android:state_selected="true"/>
</selector>

好了布局和基本selector已经完成，接下来就开始编写适配器和MainActivity。

第四：编写继承PagerAdapter的VpAdapter类的适配器，用于显示引导页图片，代码如下（有注解）：

package com.vpdemo.viewpagerdemo;

import java.util.ArrayList;

import android.support.v4.view.PagerAdapter;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;

public class VpAdapter extends PagerAdapter {

private ArrayList<ImageView> imageViews;

public VpAdapter(ArrayList<ImageView> imageViews) {
this.imageViews = imageViews;
}

/**
* 获取当前要显示对象的数量
*/
@Override
public int getCount() {
// TODO Auto-generated method stub
return imageViews.size();
}

/**
* 判断是否用对象生成界面
*/
@Override
public boolean isViewFromObject(View arg0, Object arg1) {
// TODO Auto-generated method stub
return arg0 == arg1;
}

/**
* 从ViewGroup中移除当前对象（图片）
*/
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView(imageViews.get(position));
}

/**
* 当前要显示的对象（图片）
*/
@Override
public Object instantiateItem(ViewGroup container, int position) {
container.addView(imageViews.get(position));
return imageViews.get(position);
}

}

第五：MainActivity实现了OnPageChangeListener接口，才能对滑动事件作出相应的反应。

package com.vpdemo.viewpagerdemo;

import java.util.ArrayList;

import android.app.Activity;
import android.graphics.drawable.Drawable;
import android.os.Bundle;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.ImageView;
import android.widget.Toast;
import android.widget.ImageView.ScaleType;
import android.widget.LinearLayout;
import android.widget.LinearLayout.LayoutParams;
import android.widget.TextView;

public class MainActivity extends Activity implements OnPageChangeListener{

private ViewPager vPager;
private VpAdapter vpAdapter;
private static int [] imgs = {R.drawable.img1,R.drawable.img2,R.drawable.img3,R.drawable.img4,R.drawable.img5};//要显示的图片资源
private ArrayList<ImageView> imageViews;//用于包含引导页要显示的图片
private ImageView[] dotViews;//用于包含底部小圆点的图片，只要设置每个imageview的图片资源为刚刚写的dot_selector，选择和没选中就会有不同的效果，实现导航的功能。

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
vPager = (ViewPager)findViewById(R.id.my_viewpager);

initImages();
initDots();

vpAdapter = new VpAdapter(imageViews);
vPager.setAdapter(vpAdapter);
vPager.setOnPageChangeListener(this);
}

/**
* 把引导页要显示的图片添加到集合中，以传递给适配器，用来显示图片。
*/

private void initImages()
{
LayoutParams mParams = new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT);//设置每一张图片都填充窗口
imageViews = new ArrayList<ImageView>();

for(int i = 0; i < imgs.length; i++)
{
ImageView iv = new ImageView(this);
iv.setLayoutParams(mParams);//设置布局
iv.setImageResource(imgs[i]);//为Imageview添加图片资源
iv.setScaleType(ScaleType.FIT_XY);//设置图片拉伸效果
imageViews.add(iv);
if(i== imgs.length - 1)//为最后一张添加点击事件
{
iv.setOnClickListener(new OnClickListener() {

@Override
public void onClick(View v) {
Toast.makeText(MainActivity.this, "跳转。。。", Toast.LENGTH_SHORT).show();
}
});
}
}
}

/**
* 根据引导页的数量，动态生成相应数量的导航小圆点，并添加到LinearLayout中显示。
*/
private void initDots()
{
LinearLayout layout = (LinearLayout)findViewById(R.id.dot_layout);
LayoutParams mParams = new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
mParams.setMargins(10, 0, 10, 0);//设置小圆点左右之间的间隔

dotViews = new ImageView[imgs.length];

for(int i = 0; i < imageViews.size(); i++)
{
ImageView imageView = new ImageView(this);
imageView.setLayoutParams(mParams);
imageView.setImageResource(R.drawable.dot_selector);
if(i== 0)
{
imageView.setSelected(true);//默认启动时，选中第一个小圆点
}
else {
imageView.setSelected(false);
}
dotViews[i] = imageView;//得到每个小圆点的引用，用于滑动页面时，（onPageSelected方法中）更改它们的状态。
layout.addView(imageView);//添加到布局里面显示
}

}

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

}

@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
// TODO Auto-generated method stub

}

/**
* arg0：当前滑动显示页面的索引值，可以根据这个值，来设置相应小圆点的状态。
*/
@Override
public void onPageSelected(int arg0) {
for(int i = 0; i < dotViews.length; i++)
{
if(arg0 == i)
{
dotViews[i].setSelected(true);
}
else {
dotViews[i].setSelected(false);
}
}

}
}

至此android 引导页效果就完成了。
最后是点击最后一个页面跳转到其他页面的效果：



OK，有待优化和不足的地方希望大家多多提出，共同进步，哈哈哈！