Android 简单引导页实现

注意：该demo只能适应几张图片滑动。如果多了需要参考自定义viewgroup引导页实现

实现了动态添加小圆点，滑动到当前页设置选中，滑动到最后一页时显示立即进入按钮。

1.动态添加小圆点

 /**
      * 添加小圆点
      */
     private void addPoint() {
         // 1.根据图片多少，添加多少小圆点
         for (int i = 0; i < imageView.length; i++) {
             LinearLayout.LayoutParams pointParams = new LinearLayout.LayoutParams(
                     LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
             if (i < 1) {
                 pointParams.setMargins(0, 0, 0, 0);
             }else{
                 pointParams.setMargins(10, 0, 0, 0);
             }
             ImageView iv = new ImageView(this);
             iv.setLayoutParams(pointParams);
             iv.setBackgroundResource(R.drawable.point_normal);
             llPoint.addView(iv);
         }
         llPoint.getChildAt(0).setBackgroundResource(R.drawable.point_select);

     }

根据图片的多少添加多少小圆点。然后添加到布局中。

2.判断选中小圆点

 for (int i = 0; i < imageView.length; i++) {
             if (i == position) {
                 llPoint.getChildAt(position).setBackgroundResource(
                         R.drawable.point_select);
             } else {
                 llPoint.getChildAt(i).setBackgroundResource(
                         R.drawable.point_normal);
             }
         }

通过viewpager的监听事件可以设置选中的小圆点和未选中的小圆点

3.当滑动到最后一页时显示立即进入按钮，其实也是判断viewpager的事件。当滑动到最后一个时显示就行。其它时候都隐藏

 // 3.当滑动到最后一个添加按钮点击进入，
         if (position == imageView.length - 1) {
             textView.setVisibility(View.VISIBLE);
         } else {
             textView.setVisibility(View.GONE);
         }

下面看是完整代码

 public class GuideViewActivity extends BaseActivity {
     private ViewPager viewPage;
     // 图片
     private int[] imageView = { R.drawable.yindaoye1, R.drawable.yindaoye2,
             R.drawable.yindaoye3, R.drawable.yindaoye4 };
     private List<View> list;
     // 底部小点的图片
     private LinearLayout llPoint;
     //立即进入按钮
     private TextView textView;

     @Override
     protected void onCreate(Bundle savedInstanceState) {
         super.onCreate(savedInstanceState);
         setContentView(R.layout.guide_view_acitivyt);
         initview();
         initoper();
         addView();
         addPoint();

     }

     private void initoper() {
         // 进入按钮
         textView.setOnClickListener(new OnClickListener() {
             @Override
             public void onClick(View arg0) {
                 PageManage.toPageKeepOldPageState(PageDataKey.login);
                 finish();
             }
         });

         // 2.监听当前显示的页面，将对应的小圆点设置为选中状态，其它设置为未选中状态
         viewPage.addOnPageChangeListener(new OnPageChangeListener() {
             @Override
             public void onPageSelected(int position) {
                 monitorPoint(position);
             }

             @Override
             public void onPageScrolled(int arg0, float arg1, int arg2) {
             }

             @Override
             public void onPageScrollStateChanged(int arg0) {
                 UIUtils.log("arg0--" + arg0);
             }
         });

     }

     private void initview() {
         viewPage = (ViewPager) findViewById(R.id.viewpage);
         llPoint = (LinearLayout) findViewById(R.id.llPoint);
         textView = (TextView) findViewById(R.id.guideTv);

     }

     /**
      * 添加图片到view
      */
     private void addView() {
         list = new ArrayList<View>();
         // 将imageview添加到view
         LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(
                 LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT);
         for (int i = 0; i < imageView.length; i++) {
             ImageView iv = new ImageView(this);
             iv.setLayoutParams(params);
             iv.setScaleType(ScaleType.FIT_XY);
             iv.setImageResource(imageView[i]);
             list.add(iv);
         }
         // 加入适配器
         viewPage.setAdapter(new GuideViewAdapter(list));

     }

     /**
      * 添加小圆点
      */
     private void addPoint() {
         // 1.根据图片多少，添加多少小圆点
         for (int i = 0; i < imageView.length; i++) {
             LinearLayout.LayoutParams pointParams = new LinearLayout.LayoutParams(
                     LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
             if (i < 1) {
                 pointParams.setMargins(0, 0, 0, 0);
             } else {
                 pointParams.setMargins(10, 0, 0, 0);
             }
             ImageView iv = new ImageView(this);
             iv.setLayoutParams(pointParams);
             iv.setBackgroundResource(R.drawable.point_normal);
             llPoint.addView(iv);
         }
         llPoint.getChildAt(0).setBackgroundResource(R.drawable.point_select);

     }

     /**
      * 判断小圆点
      *
      * @param position
      */
     private void monitorPoint(int position) {
         for (int i = 0; i < imageView.length; i++) {
             if (i == position) {
                 llPoint.getChildAt(position).setBackgroundResource(
                         R.drawable.point_select);
             } else {
                 llPoint.getChildAt(i).setBackgroundResource(
                         R.drawable.point_normal);
             }
         }
         // 3.当滑动到最后一个添加按钮点击进入，
         if (position == imageView.length - 1) {
             textView.setVisibility(View.VISIBLE);
         } else {
             textView.setVisibility(View.GONE);
         }
     }
 }

对应的 xml

 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.support.v4.view.ViewPager
         android:id="@+id/viewpage"
         android:layout_width="match_parent"
         android:layout_height="match_parent" />

     <LinearLayout
         android:id="@+id/llPoint"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:layout_alignParentBottom="true"
         android:layout_centerHorizontal="true"
         android:layout_marginBottom="24.0dip"
         android:gravity="center_horizontal"
         android:orientation="horizontal" >

     LinearLayout>
     <TextView
         android:id="@+id/guideTv"
         android:layout_width="130dp"
         android:layout_height="40dp"
         android:text="立即体验"
         android:textColor="#ffffff"
         android:background="#88000000"
         android:textSize="14sp"
         android:gravity="center"
         android:layout_above="@id/llPoint"
         android:layout_centerHorizontal="true"
         android:layout_marginBottom="20dp"
         android:visibility="gone"
         />
 RelativeLayout>

所用的适配器

 public class GuideViewAdapter extends PagerAdapter {

     private List<View> list;

     public GuideViewAdapter(List<View> list) {
         this.list = list;

     }

     @Override
     public int getCount() {
         return list.size();
     }

     @Override
     public boolean isViewFromObject(View arg0, Object arg1) {
         return arg0 == arg1;
     }

     @Override
     public void destroyItem(ViewGroup view, int position, Object object) {
         view.removeView(list.get(position));
     }

     @Override
     public Object instantiateItem(ViewGroup container, int position) {
         container.addView(list.get(position));
         return list.get(position);
     }

 }

下面有几个不错的引导页开源框架：

1.CircleIndicator

一个轻量级的viewpager指示器 ，类似于nexus5 启动器的效果。它可以自定义指示器上小圆点的样式和动画效果。可以用于引导页。

项目地址： https://github.com/ongakuer/CircleIndicator

2.Guideshow

Guideshow使你简单、快速的构建引导页。另外，你无须生成动态的gif图片就可使页面产生动画效果，如平移、渐变。 
项目地址：  https://github.com/javajavadog/guideshow

3.AppIntro 

尝试使用了下，确实是个漂亮的控件，而且使用也很简单，推荐使用。

项目地址：https://github.com/PaoloRotolo/AppIntro

4.SwitchViewDemo

一个简单的引导页实现。值得推荐的是这完全是个单独的控件，而不是借助ViewPager实现的。作者完全是扩展ViewGroup做的。

框架原文：http://j.news.163.com/docs/28/2015092010/B3US4ART90014ARU.html