153.n1-导航页下方移动的小圆点

导航页下方有3个小灰点，一个红色的点，灰色的点的位置是固定的，红色的点的位置会随着页面的移动而移动，在页面布局中使用shape初始化红点和灰点，灰点的布局是线性的horizontal的布局，红点是覆盖在灰点上方的。布局的时候创建一个RelativeLayout，然后在其中实现3个灰色点的线性布局和一个红色点的View视图布局。这样红点默认是覆盖在灰点上方的。之后监听Viewpager的滑动改变红色点的布局参数来实现红点的位置的变化。

使用shape创建灰点res/drawable/shape_point_gray.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" 
    android:shape="oval"
    >
    <!-- 引导页灰色的小圆点oval -->
	<solid 
	    android:color="@android:color/darker_gray"
	    />
</shape>

使用shape创建红点res/drawable/shape_point_red.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" 
    android:shape="oval"
    >
    <!-- 引导页红色的小圆点oval -->
	<solid 
	    android:color="#ff0000"
	    />
</shape>

导航页面的布局如下activity_guide.xml

<?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"
    android:orientation="vertical" >
    
    <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:paddingLeft="3dp"
        android:paddingRight="3dp"
        android:background="@drawable/btn_guide_selector"
        android:textColor="@drawable/btn_guide_text_selector"
        android:text="开始体验" />
    <RelativeLayout 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_alignParentBottom="true"
        android:layout_marginBottom="20dp"
        >
		<LinearLayout 
		    android:id="@+id/ll_point"
		    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_red"
		    />
	</RelativeLayout>
</RelativeLayout>

GuideActivty.java的业务逻辑

package com.ldw.news;

import java.util.ArrayList;

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.View;
import android.view.ViewGroup;
import android.view.ViewTreeObserver.OnGlobalLayoutListener;
import android.view.Window;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.RelativeLayout;
import android.widget.RelativeLayout.LayoutParams;

public class GuideActivity extends Activity {

	private ViewPager vp_guide;
	private Button btn_start;
	private View view_red_point;
	private LinearLayout ll_point;//引导页下面的点
	private int mPointWidth;//两个圆点之间的距离
	private static final int[] mImageIds = new int[] { R.drawable.guide_1,
		R.drawable.guide_2, R.drawable.guide_3 };//初始化三张图片
	private ArrayList<ImageView> mImageList;
	@Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        
        //初始化界面
        initView();
        //填充内容
        vp_guide.setAdapter(new GuideAdapter());
        //监听viewPager的滑动时间
        vp_guide.setOnPageChangeListener(new GuidePageListener());
        
	}
	
	/*
	 * 初始化界面
	 */
	private void initView(){
		requestWindowFeature(Window.FEATURE_NO_TITLE);// 去掉标题
		mImageList = new ArrayList<ImageView>();
		
		setContentView(R.layout.activity_guide);
		vp_guide = (ViewPager) findViewById(R.id.vp_guide);
        btn_start = (Button) findViewById(R.id.btn_start);
        ll_point = (LinearLayout) findViewById(R.id.ll_point);
        view_red_point = findViewById(R.id.view_red_point);
        
        //添加图片,初始化引导页
        for(int i = 0; i < mImageIds.length; i++){
        	ImageView image = new ImageView(this);
        	//设置引导页的背景
        	image.setBackgroundResource(mImageIds[i]);
        	mImageList.add(image);
        }
        
        //初始化引导页下方的小圆点
        for(int i = 0; i < mImageIds.length; i++){
        	View point = new View(this);
        	//设置引导页的背景
        	point.setBackgroundResource(R.drawable.shape_point_gray);
        	//创建一个线性布局参数的大小是10，10
        	LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(10, 10);
        	if(i > 0){
        		//设置圆点之间的间隔
        		params.leftMargin = 10;
        	}
        	//设置圆点的大小
        	point.setLayoutParams(params);
        	
        	//将圆点添加到线性布局中
        	ll_point.addView(point);
        }
        
        //measure测量大小，layout界面布局，ondraw画图
        
        //view的视图树getViewTreeObserver方法，并添加监听全局layout结束事件，这个时候可以获取到距离了
        ll_point.getViewTreeObserver().addOnGlobalLayoutListener(new OnGlobalLayoutListener(){

        	//layout执行结束以后回调此方法
			@Override
			public void onGlobalLayout() {
				
				//第二哥圆点距离左边的距离和第一个点距离左边距离的差是移动的距离
				mPointWidth = ll_point.getChildAt(1).getLeft() - ll_point.getChildAt(0).getLeft();
				//回调方法结束以后去掉监听
				ll_point.getViewTreeObserver().removeGlobalOnLayoutListener(this);
				
			}

        });
	}
	
	/*
	 * ViewPager页面适配
	 */
	class GuideAdapter extends PagerAdapter{

		@Override
		public int getCount() {
			return mImageIds.length;
		}

		@Override
		public boolean isViewFromObject(View arg0, Object arg1) {
			return arg0 == arg1;
		}
		
		//初始化界面
		@Override
		public Object instantiateItem(ViewGroup container, int position) {
			container.addView(mImageList.get(position));
			return mImageList.get(position);
			
		}

		//删除条目
		@Override
		public void destroyItem(ViewGroup container, int position, Object object) {
			container.removeView((View) object);
		}
	}
	
	//viewPager的监听
	class GuidePageListener implements OnPageChangeListener{
		//滑动事件
		@Override
		public void onPageScrolled(int position, float positionOffset,
				int positionOffsetPixels) {
			System.out.println("当前位置：" +position + "；百分比："+ positionOffset + "；移动距离："+ positionOffsetPixels);
			//圆点实时移动的距离，前部分是宽度的移动，后面是加上圆点的位置宽度
			int length = (int) (mPointWidth * positionOffset) + position * mPointWidth;
			//继承父类RelativeLayout获取到红点布局参数,红点是在布局中创建了因此不需要创建LayoutParams
			RelativeLayout.LayoutParams layoutParams = (RelativeLayout.LayoutParams) view_red_point.getLayoutParams();
			//动态修改红点的左边的边距
			layoutParams.leftMargin = length;
			//红点重新设置边距参数,实现移动
			view_red_point.setLayoutParams(layoutParams);
			
		}
		//页面被选中
		@Override
		public void onPageSelected(int position) {
			// TODO Auto-generated method stub
			
		}
		//滑动状态发生变化
		@Override
		public void onPageScrollStateChanged(int state) {
			// TODO Auto-generated method stub
			
		}

		
	}
}