Android ViewPager带有提示点的欢迎界面

想要实现一个带有提示点的，ViewPager欢迎界面。

1.布局文件

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

<android.support.v4.view.ViewPager
android:id="@+id/vp_guide"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<Button
android:id="@+id/btn_start"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="60dp"
android:background="@drawable/btn_guide_selector"
android:padding="5dp"
android:text="开始体验"
android:visibility="gone"
android:textColor="@drawable/text_guide_selector" />

<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="@id/vp_guide"
android:layout_centerHorizontal="true"
android:layout_marginBottom="30dp" >

<LinearLayout
android:id="@+id/ll_point_group"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal" >
</LinearLayout>

<View
android:id="@+id/view_red_point"
android:layout_width="10dp"
android:layout_height="10dp"
android:background="@drawable/shape_point_selected" />
</RelativeLayout>

</RelativeLayout>

底层是一个ViewPager的控件，上层是一个隐藏的按钮，还有一个绘制的红色提示点

1.1在drawable文件夹中，创建两个文件shape_point_selected.xml及shape_point_normal.xml分别用来表示红色按钮和灰色按钮的。

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<corners  android:radius="5dp"/>
<solid android:color="#f00"/>
</shape>

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<corners android:radius="5dp"/>
<solid android:color="#aaa"/>
</shape>

1.2在drawable文件夹中，创建两个文件btn_guide_selector.xml及text_guide_selector.xml分别用来表示按钮被点击时发生的背景颜色和字体颜色的变化，实现被点击的动态效果。

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/button_red_pressed" android:state_pressed="true"></item>
<item android:drawable="@drawable/button_red_normal"></item>
</selector>

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="@android:color/black" android:state_pressed="true"></item>
<item android:color="@android:color/white"></item>
</selector>

2.在GuideActivity中，实现当前的显示页码和提示点之间的交互。

package com.example.demo;

import java.util.ArrayList;

import android.app.Activity;
import android.content.Context;
import android.content.Intent;
import android.content.SharedPreferences;
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.util.Log;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewGroup;
import android.view.ViewTreeObserver;
import android.view.ViewTreeObserver.OnGlobalLayoutListener;
import android.view.Window;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.LinearLayout.LayoutParams;
import android.widget.RelativeLayout;

/**
* 新手引导页
*
* @author Kevin
*
*/
public class GuideActivity extends Activity implements OnPageChangeListener {

private ViewPager mViewPager;
private LinearLayout llPointGroup;// 点的父元素
private String TAG = "GuideActivity";

private int[] mImageIds = new int[] { R.drawable.guide_1,
R.drawable.guide_2, R.drawable.guide_3 };

private ArrayList<ImageView> mImageViews;

private int mPointWidth;// 圆点的距离
private View mRedPoint;// 小红点
private Button btnStart;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);// 去掉标题
setContentView(R.layout.activity_guide);
initView();
initData();
}

/**
* 初始化布局
*/
private void initView() {
mViewPager = (ViewPager) findViewById(R.id.vp_guide);
btnStart = (Button) findViewById(R.id.btn_start);
llPointGroup = (LinearLayout) findViewById(R.id.ll_point_group);
mRedPoint = findViewById(R.id.view_red_point);
btnStart.setOnClickListener(new OnClickListener() {

@Override
public void onClick(View v) {

}
});
}

/**
* 初始化数据
*/
private void initData() {
// 初始化3张引导图片数据
mImageViews = new ArrayList<ImageView>();
for (int i = 0; i < mImageIds.length; i++) {
ImageView image = new ImageView(this);
image.setBackgroundResource(mImageIds[i]);
mImageViews.add(image);
}

GuideAdapter adapter = new GuideAdapter();
mViewPager.setAdapter(adapter);// viewpager设置数据

// 给LinearLayout填充小圆点(默认圆点)
for (int i = 0; i < mImageIds.length; i++) {
View point = new View(this);// 圆点对象
point.setBackgroundResource(R.drawable.shape_point_normal);// 设置圆点背景

LayoutParams params = new LayoutParams(
DensityUtils.dp2px(this, 10), DensityUtils.dp2px(this, 10));// 指定圆点宽高
point.setLayoutParams(params);

if (i != 0) {
params.leftMargin = DensityUtils.dp2px(this, 10);// 设置左边距
}

llPointGroup.addView(point);
}

mViewPager.setOnPageChangeListener(this);// 设置滑动监听

// measure, layout, draw
final ViewTreeObserver viewTreeObserver = llPointGroup
.getViewTreeObserver();// 视图树
viewTreeObserver
.addOnGlobalLayoutListener(new OnGlobalLayoutListener() {
// layout执行结束
@Override
public void onGlobalLayout() {
System.out.println("layout执行结束");
llPointGroup.getViewTreeObserver()
.removeGlobalOnLayoutListener(this);
mPointWidth = llPointGroup.getChildAt(1).getLeft()
- llPointGroup.getChildAt(0).getLeft();
System.out.println("两点的距离:" + mPointWidth);
}
});
}

class GuideAdapter extends PagerAdapter {

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

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

// 初始化界面数据,类似getView
@Override
public Object instantiateItem(ViewGroup container, int position) {
ImageView imageView = mImageViews.get(position);
container.addView(imageView);
return imageView;
}

@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView((View) object);
}
}

// 滑动事件
@Override
public void onPageScrolled(int position, float positionOffset,
int positionOffsetPixels) {

Log.e(TAG, "偏移量:" + positionOffset + ";位置:" + position);
int offset = (int) (mPointWidth * positionOffset) + position
* mPointWidth;

RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(
mRedPoint.getLayoutParams());
params.leftMargin = offset;// 设置红点的左边距, 使红点移动
mRedPoint.setLayoutParams(params);
}

// 选中事件
@Override
public void onPageSelected(int position) {
System.out.println("选中:" + position);
if (position == mImageIds.length - 1) {
btnStart.setVisibility(View.VISIBLE);
} else {
btnStart.setVisibility(View.GONE);
}
}

// 状态
@Override
public void onPageScrollStateChanged(int state) {

}
}

3.DensityUtils工具类，实现dp与px之间的转换

package com.example.demo;
import android.content.Context;

public class DensityUtils {
public static int dp2px(Context ctx, float dp) {
float density = ctx.getResources().getDisplayMetrics().density;// 获取设备密度
int px = (int) (dp * density + 0.5f);// 4.3, 4.9, 加0.5是为了四舍五入
return px;
}

public static float px2dp(Context ctx, int px) {
float density = ctx.getResources().getDisplayMetrics().density;// 获取设备密度
float dp = px / density;
return dp;
}
}