本文主要实现的是首次打开某一应用时出现的滑动引导页,旨在自己以后方便使用,希望对你们也可以有帮助
首先,准备工作
一个底部圆点设置的selecter
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_enabled="true" android:drawable="@drawable/icon_common_dot_normal"></item> <item android:state_enabled="false" android:drawable="@drawable/icon_common_dot_active"></item> </selector>其次就是 主布局文件:
主要由viewpager和一个包含圆点的linearlayout组成
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/activity_test_yin_dao_page" android:layout_width="match_parent" android:layout_height="match_parent" tools:context="ht.testxyapp.com.testapp.activity.TestYinDaoPage"> <android.support.v4.view.ViewPager android:id="@+id/vpPage" android:layout_width="match_parent" android:layout_height="match_parent"></android.support.v4.view.ViewPager> <LinearLayout android:id="@+id/dots" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignBottom="@+id/vpPage" android:gravity="center" android:orientation="horizontal"> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:padding="15dp" android:src="@drawable/dot_drawable" /> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:padding="15dp" android:src="@drawable/dot_drawable" /> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:padding="15dp" android:src="@drawable/dot_drawable" /> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:padding="15dp" android:src="@drawable/dot_drawable" /> </LinearLayout> </RelativeLayout>
最后就是Activity文件
public class TestYinDaoPage extends Activity { private ViewPager vp; //定义一个ArrayList存放View private ArrayList<View> views; //定义各个界面的View对象 private View view1, view2, view3, view4; private Button btnStart; // 定义底部小圆点的图片 private ImageView[] dotsImage; private ViewPagerAdapter adapter; private int currendIndex; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_test_yin_dao_page); initView(); initData(); } //初始化组件 private void initView() { LayoutInflater layoutInflater = LayoutInflater.from(this); view1 = layoutInflater.inflate(R.layout.guide_layout1, null); view2 = layoutInflater.inflate(R.layout.guide_layout2, null); view3 = layoutInflater.inflate(R.layout.guide_layout3, null); view4 = layoutInflater.inflate(R.layout.guide_layout4, null); btnStart = (Button) view4.findViewById(R.id.btnStart); vp = (ViewPager) findViewById(R.id.vpPage); views = new ArrayList<>(); adapter = new ViewPagerAdapter(views); } //初始化数据 private void initData() { //将要分页显示的View装进数组中 views.add(view1); views.add(view2); views.add(view3); views.add(view4); initDots(views.size()); btnStart.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { Intent intent = new Intent(TestYinDaoPage.this,MainActivity.class); startActivity(intent); finish(); } }); vp.setAdapter(adapter); vp.setOnPageChangeListener(new ViewPager.OnPageChangeListener() { @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { } @Override public void onPageSelected(int position) { setCurDot(position); } @Override public void onPageScrollStateChanged(int state) { } }); } //初始化底部小圆点 private void initDots(int views) { LinearLayout dotsLinearLayout = (LinearLayout) findViewById(R.id.dots); dotsImage = new ImageView[views]; for (int i = 0; i < views; i++) { //得到linearLayout下的每一个子元素 dotsImage[i] = (ImageView) dotsLinearLayout.getChildAt(i); //默认设为灰色 dotsImage[i].setEnabled(true); //设置位置tag 方便取出与当前位置对应 dotsImage[i].setTag(i); dotsImage[i].setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { int position = (int) v.getTag(); setCurView(position); setCurDot(position); } }); } currendIndex = 0; dotsImage[currendIndex].setEnabled(false); } //设置当前底部圆点的位置 private void setCurDot(int position) { if (position < 0 || position > 3 || currendIndex == position) { return; } dotsImage[position].setEnabled(false); dotsImage[currendIndex].setEnabled(true); currendIndex = position; } //设置当前View的位置 private void setCurView(int position) { if (position < 0 || position >= 4) { return; } vp.setCurrentItem(position); } private class ViewPagerAdapter extends PagerAdapter { private ArrayList<View> views; public ViewPagerAdapter(ArrayList<View> views) { this.views = views; } @Override public int getCount() { if (views != null) { return views.size(); } return 0; } @Override public boolean isViewFromObject(View view, Object object) { return (view == object); } @Override public Object instantiateItem(View view, int position) { ((ViewPager) view).addView(views.get(position), 0); return views.get(position); } @Override public void destroyItem(View view, int position, Object object) { ((ViewPager) view).removeView(views.get(position)); } } }