Java类中
public class MainActivity extends AppCompatActivity { private ViewPager mViewPager; private LinearLayout llContainer; private ImageView ivRedPoint; private Button btnStart; //图片id集合 private int[] mImageIds = new int[] { R.drawable.guide_1,R.drawable.guide_2, R.drawable.guide_3 }; private ArrayList<ImageView> mImageViews; private int mPointDis;//圆点移动距离 @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); requestWindowFeature(Window.FEATURE_NO_TITLE);//从代码中去掉标题栏的方法, 必须在setContentView之前调用 setContentView(R.layout.activity_main); initViews(); initData(); } //初始化布局 private void initViews() { mViewPager = (ViewPager) findViewById(R.id.vp_guide); llContainer = (LinearLayout) findViewById(R.id.ll_container); ivRedPoint = (ImageView) findViewById(R.id.iv_red_point); btnStart = (Button) findViewById(R.id.btn_start); } //初始化数据 private void initData() { //初始化三张图片的ImageView mImageViews = new ArrayList<ImageView>(); for (int i = 0; i < mImageIds.length; i++) { ImageView view = new ImageView(this); view.setBackgroundResource(mImageIds[i]); mImageViews.add(view); //初始化小圆点 ImageView point = new ImageView(this); point.setImageResource(R.drawable.shape_point_normal); //初始化布局参数 LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT,LinearLayout.LayoutParams.WRAP_CONTENT); if (i > 0) { params.leftMargin = 10;//从第二个点开始设置左边距10px } point.setLayoutParams(params);//设置布局参数 llContainer.addView(point); } mViewPager.setAdapter(new GuideAdapter()); //监听ViewPager滑动事件,更新小红点位置 mViewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() { @Override public void onPageSelected(int position) { if (position == mImageIds.length - 1) { //最后一个页面显示开始体验按钮 btnStart.setVisibility(View.VISIBLE); } else { btnStart.setVisibility(View.GONE); } } //监听滑动事件 @Override public void onPageScrolled(int position, float positionOffset,int positionOffsetPixels) { System.out.println("当前位置:" + position + ";偏移百分比:" + positionOffset); //通过修改小红点的左边距来更新小红点的位置 int leftMargin = (int) (mPointDis * positionOffset + position * mPointDis + 0.5f);//要将当前的位置信息产生的距离加进来 //获取小红点的布局参数 RelativeLayout.LayoutParams params = (android.widget.RelativeLayout.LayoutParams) ivRedPoint.getLayoutParams(); params.leftMargin = leftMargin; ivRedPoint.setLayoutParams(params); } @Override public void onPageScrollStateChanged(int state) { } }); //监听layout执行结束的事件, 一旦结束之后, 在去获取当前的left位置 //视图树 ivRedPoint.getViewTreeObserver().addOnGlobalLayoutListener( new ViewTreeObserver.OnGlobalLayoutListener() { //一旦视图树的layout方法调用完成, 就会回调此方法 @SuppressWarnings("deprecation") @Override public void onGlobalLayout() { //布局位置已经确定,可以拿到位置信息了 mPointDis = llContainer.getChildAt(1).getLeft() - llContainer.getChildAt(0).getLeft(); System.out.println("mPointDis:" + mPointDis); //移除观察者 ivRedPoint.getViewTreeObserver().removeGlobalOnLayoutListener(this); } }); //开始体验按钮点击 btnStart.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { //在sp中记录访问过引导页的状态 PrefUtils.putBoolean(getApplicationContext(), "is_guide_show",true); //跳到主页面 startActivity(new Intent(getApplicationContext(),MainActivity.class)); finish(); } }); } @Override protected void onStart() { super.onStart(); } @Override protected void onResume() { super.onResume(); } class GuideAdapter extends PagerAdapter { @Override public int getCount() { return mImageIds.length; } @Override public boolean isViewFromObject(View view, Object object) { return view == object; } //初始化布局 @Override public Object instantiateItem(ViewGroup container, int position) { //ImageView view = new ImageView(getApplicationContext()); ImageView view = mImageViews.get(position); container.addView(view); return view; } //销毁布局 @Override public void destroyItem(ViewGroup container, int position, Object object) { container.removeView((View) object); } } }
他的布局中的XML文件
<android.support.v4.view.ViewPager android:id="@+id/vp_guide" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_alignParentLeft="true" android:layout_alignParentTop="true" > </android.support.v4.view.ViewPager> <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:paddingLeft="10dp" android:paddingRight="10dp" android:text="开始体验" android:textColor="@color/txt_guide_selector" android:visibility="gone" /> <RelativeLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_centerHorizontal="true" android:layout_marginBottom="30dp" > <LinearLayout android:orientation="horizontal" android:id="@+id/ll_container" android:layout_width="wrap_content" android:layout_height="wrap_content"> </LinearLayout> <ImageView android:id="@+id/iv_red_point" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/shape_point_selected" /> </RelativeLayout>
其中的color文件夹下的txt_guide_selector文件
<selector xmlns:android="http://schemas.android.com/apk/res/android" > <item android:color="#000" android:state_pressed="true"/> <item android:color="#fff"/> </selector>
其中drawble下的btn_guide_selector文件(开始点击的按下换图)
<selector xmlns:android="http://schemas.android.com/apk/res/android" > <item android:drawable="@drawable/button_red_pressed" android:state_pressed="true"/> <item android:drawable="@drawable/button_red_normal"/> </selector>
其中drawble下的shape_point_normal文件
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval" > <solid android:color="#cccccc" /> <size android:height="10dp" android:width="10dp" /> </shape>
其中drawble下的shape_point_selector文件
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval" > <solid android:color="#f00" /> <size android:height="10dp" android:width="10dp" /> </shape>
这样就好了