1. 程式人生 > >ViewPager實現引導頁,底部圓點跟隨移動

ViewPager實現引導頁,底部圓點跟隨移動

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>