Android中的页面引导

首先贴一张效果图

这里写图片描述

先来分析下这个界面的构成：
ViewPager LinearLayout 两个主要的ViewGroup构成
接下来贴出页面布局代码

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <android.support.v4.view.ViewPager
        android:id="@+id/vp"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >
    </android.support.v4.view.ViewPager>

    <LinearLayout
        android:layout_marginTop="25dp"
        android:id="@+id/point_layout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:orientation="horizontal" >
    </LinearLayout>
</RelativeLayout>

我们用到了相对布局，根据顺序，ViewPager在底层，LinearLayout 位于上层

我们需要做的工作：首先获取ViewPager对象，为其添加每个pager的内容，然后获取LinearLayout 并向它中动态添加小圆点View对象

获取ViewPager为它添加适配器

  //获取ViewPager对象
  ViewPager vp=(ViewPager) findViewById(R.id.vp);
  //创建ViewPager适配器类
  // ViewPager的适配器
    private class MyViewPagerAdapter extends PagerAdapter {

        @Override
        public int getCount() {

            return imagelist.size();
        }

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

        @Override
        public Object instantiateItem(ViewGroup container, int position) {
             //imagelist为一个装着ImageView对象的集合，在这里，每个pager即为一个ImageView
            container.addView(imagelist.get(position));
            return imagelist.get(position);
        }

        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
            container.removeView((View) object);
        }
    }

获取LinearLayout对象并为它添加小圆点子View

//获取LinearLayout对象
LinearLayout pointlayout =(LinearLayout)findViewById(R.id.point_layout);

// 初始化标识小圆点
        for (int i = 0; i < mImageId.length; i++) {
            View point = new View(this);
            LayoutParams params = new LayoutParams(10, 10);
            if (i != 0) {
                params.leftMargin =10;
            }
            point.setLayoutParams(params);
            point.setEnabled(false);
            //一状态选择器作为背景
            point.setBackgroundResource(R.drawable.selector_dot);
            pointlayout.addView(point);

        }

R.drawable.selector_dot状态选择器代码

<?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/dot_focus"></item>
    <item android:state_enabled="false" android:drawable="@drawable/dot_unfocus"></item>
</selector>

经过上面的代码基本完成了静态引导页面，接着要做的工作便是要是小圆点随着ViewPager的滑动改变颜色了。
实现小圆点的动态改变需要为ViewPager添加滑动监听工作

1.为ViewPager添加滑动监听

// ViewPager的事件监听
    private class MyPagerListener implements OnPageChangeListener {
        //pager的滑动状态的回调
        @Override
        public void onPageScrollStateChanged(int arg0) {
        }
        //pager滑动过程中的回调
        @Override
        public void onPageScrolled(int arg0, float arg1, int arg2) {
        }
        //pager被选中的回调
        @Override
        public void onPageSelected(int arg0) {
            //在pager被选中时对小圆点的更新处理
            update();
        }

    }

2.update()更小圆点的操作

public void update() {
        // 获取当前页面
        int currentPage = vp.getCurrentItem();
        // 小圆点的逻辑
        for (int i = 0; i < pointlayout.getChildCount(); i++) {
            // 将当前页面对应的小圆点的选中事件设置为真
            pointlayout.getChildAt(i).setEnabled(i==currentPage);
        }

    }

解释原理：首先获取当前被选中的页面Item，然后获取pointlayout下的所有子View(即为小圆点)，pointlayout.getChildAt(i).setEnabled(boolean glag)，设置一个View的Enabled属性，当为真的时候，在前面设置的状态选择器变会起作用

下面贴出完整代码：

.xml部分

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <android.support.v4.view.ViewPager
        android:id="@+id/vp"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >
    </android.support.v4.view.ViewPager>

    <LinearLayout
        android:layout_marginTop="25dp"
        android:id="@+id/point_layout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:orientation="horizontal" >
    </LinearLayout>

java部分

public class GuideActivity extends Activity {
    //存放图片资源id的数组
    private int[] mImageId = new int[] { R.drawable.guide_1,
            R.drawable.guide_2, R.drawable.guide_3 };
    private ViewPager vp;
    private LinearLayout pointlayout;
    //存放ImageView的集合
    private ArrayList<ImageView> imagelist;


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.guide);
        initView();
        initData();
        vp.setAdapter(new MyViewPagerAdapter());
        vp.setOnPageChangeListener(new MyPagerListener());
        //初识化被选中的小圆点
        pointlayout.getChildAt(0).setEnabled(true);
    }

    public void initView() {
        vp = (ViewPager) findViewById(R.id.vp);
        pointlayout = (LinearLayout) findViewById(R.id.point_layout);
        imagelist = new ArrayList<ImageView>();
    }

    public void initData() {
        //图片资源转成ImageView 对象
        for (int i = 0; i < mImageId.length; i++) {
            ImageView imview = new ImageView(this);
            imview.setBackgroundResource(mImageId[i]);
            imagelist.add(imview);
        }
        // 初始化标识小圆点
        for (int i = 0; i < mImageId.length; i++) {
            View point = new View(this);
            //LayoutParams能够对View进行包装
            LayoutParams params = new LayoutParams(10, 10);
            if (i != 0) {
                params.leftMargin =10;
            }
            point.setLayoutParams(params);
            point.setEnabled(false);
            //状态选择器作为背景
            point.setBackgroundResource(R.drawable.selector_dot);
            //添加子View
            pointlayout.addView(point);

        }
    }

    // ViewPager的适配器
    private class MyViewPagerAdapter extends PagerAdapter {

        @Override
        public int getCount() {

            return imagelist.size();
        }

        @Override
        public boolean isViewFromObject(View arg0, Object arg1) {

            return arg0 == arg1;
        }

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

        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
            container.removeView((View) object);
        }
    }

    // ViewPager的事件监听
    private class MyPagerListener implements OnPageChangeListener {

        @Override
        public void onPageScrollStateChanged(int arg0) {

        }

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

        }

        @Override
        public void onPageSelected(int arg0) {
            //System.out.println("当前页面为" + arg0);
            update();
        }

    }

    public void update() {
        // 获取当前页面
        int currentPage = vp.getCurrentItem();
        // 小圆点的逻辑
        for (int i = 0; i < pointlayout.getChildCount(); i++) {
            // 将当前页面对应的小圆点的选中事件设置为真
            pointlayout.getChildAt(i).setEnabled(i==currentPage);
        }

    }

}

状态选择器代码

说明：dot_focus/dot_unfocus这两张图片得自己准备
<?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/dot_focus"></item>
    <item android:state_enabled="false" android:drawable="@drawable/dot_unfocus"></item>
</selector>

Android中的页面引导

猜你喜欢