ViewPager实现引导页，底部圆点跟随移动

╰半橙微兮° 2022-08-02 13:54 313阅读 0赞

实现引导页效果：

![20150722225714052][]

![20150722225805995][]

![20150722225736080][]

代码如下：

public class GuideActivity extends Activity {
    
    	private ViewPager mViewPager;
    	private int[] mGuideLists;
    	private Button mButton;
    	private LinearLayout mLinearLayout;// 小灰点
    	private View point_red;// 小红点
    	private int mPointWidth;// 小圆点之间的距离
    
    	@Override
    	protected void onCreate(Bundle savedInstanceState) {
    		super.onCreate(savedInstanceState);
    		setContentView(R.layout.activity_guide);
    		initView();
    		initData();
    	}
    
    	private void initView() {
    		mViewPager = (ViewPager) findViewById(R.id.vp_guide);
    		mButton = (Button) findViewById(R.id.btn_start);
    		mLinearLayout = (LinearLayout) findViewById(R.id.ll_point_group);
    		point_red = findViewById(R.id.point_red);
    	}
    
    	private void initData() {
    		mGuideLists = new int[] { R.drawable.guide_1, R.drawable.guide_2,
    				R.drawable.guide_3 };
    		initDot();
    		mViewPager.setAdapter(new GuideAdapter());
    		mViewPager.setOnPageChangeListener(new GudiePagerChangeListener());
    	}
    
    	/**
    	 * 初始化点
    	 */
    	private void initDot() {
    		for (int i = 0; i < mGuideLists.length; i++) {
    			View view = new View(GuideActivity.this);
    			view.setBackgroundResource(R.drawable.dot_gray);
    
    			// dp和px的关系: dp = px/设备密度
    			float density = getResources().getDisplayMetrics().density;
    			int width=(int) (10*density);
    			int height=(int) (10*density);
    			//System.out.println("设备密度:" + density);
    			LayoutParams params = new LayoutParams(width, height);
    			if (i > 0) {
    				params.leftMargin = width;
    			}
    			view.setLayoutParams(params);
    			mLinearLayout.addView(view);
    		}
    
    		mLinearLayout.getViewTreeObserver().addOnGlobalLayoutListener(
    				new OnGlobalLayoutListener() {
    
    					@Override
    					public void onGlobalLayout() {
    						mLinearLayout.getViewTreeObserver()
    								.removeGlobalOnLayoutListener(this);
    						mPointWidth = mLinearLayout.getChildAt(1).getLeft()
    								- mLinearLayout.getChildAt(0).getLeft();
    						Log.e("tag", mPointWidth + "");
    					}
    				});
    	}
    
    	private class GuideAdapter extends PagerAdapter {
    
    		@Override
    		public int getCount() {
    			return mGuideLists.length;
    		}
    
    		@Override
    		public boolean isViewFromObject(View view, Object object) {
    			return view == object;
    		}
    
    		@Override
    		public Object instantiateItem(ViewGroup container, int position) {
    			ImageView imageView = new ImageView(GuideActivity.this);
    			imageView.setScaleType(ScaleType.FIT_XY);
    			imageView.setImageResource(mGuideLists[position]);
    			container.addView(imageView);
    			return imageView;
    		}
    
    		/* 销毁pager */
    		@Override
    		public void destroyItem(ViewGroup container, int position, Object object) {
    			container.removeView((View) object);
    		}
    
    	}
    
    	private class GudiePagerChangeListener implements OnPageChangeListener {
    
    		@Override
    		public void onPageScrollStateChanged(int arg0) {
    
    		}
    
    		@Override
    		public void onPageScrolled(int position, float positionOffset,
    				int positionOffsetPixels) {
    			float leftWidth = mPointWidth * positionOffset + position * mPointWidth;
    			RelativeLayout.LayoutParams layoutParams = (RelativeLayout.LayoutParams) point_red
    					.getLayoutParams();// 获取小红点的布局参数
    			layoutParams.leftMargin = (int) leftWidth;// 设置小红点的左边距
    			point_red.setLayoutParams(layoutParams);
    		}
    
    		@Override
    		public void onPageSelected(int position) {
    			if (position == 2) {
    				mButton.setVisibility(View.VISIBLE);
    				mButton.setOnClickListener(new OnClickListener() {
    
    					@Override
    					public void onClick(View v) {
    						Intent intent = new Intent(GuideActivity.this,
    								MainActivity.class);
    						startActivity(intent);
    						finish();
    					}
    				});
    			} else {
    				mButton.setVisibility(View.INVISIBLE);
    			}
    		}
    
    	}
    
    }

activity文件代码：

<?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" >
        </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="50dp"
            android:background="@drawable/btn_bg_selector"
            android:text="@string/start"
            android:textColor="@drawable/btn_text_selector"
            android:textSize="18sp"
            android:visibility="invisible" />
    
        <RelativeLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_centerHorizontal="true"
            android:layout_marginBottom="20dp" >
    
            <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/point_red"
                android:layout_width="10dp"
                android:layout_height="10dp"
                android:background="@drawable/dot_red" />
        </RelativeLayout>
    
    </RelativeLayout>

shpae文件：(以下是小灰点的，小红点只需将颜色改下)

<?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval">
        <solid android:color="@android:color/darker_gray"/>
    
    </shape>

[20150722225714052]: /images/20220731/81219debfe454e6a945f0f8445cb0d4c.png
[20150722225805995]: /images/20220731/909e06f4dc2b4b43b7b6ad09d9071a04.png
[20150722225736080]: /images/20220731/6dbdc1ab6ef7413b987fb22b3f9ef82f.png