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