ViewPager實現引導頁,底部圓點跟隨移動
阿新 • • 發佈:2018-12-11
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>