142_ViewPager指示器

ViewPager指示器

之前用自定义控件做过ViewPager指示器

还用过第三方库的指示器

 

现在我们来实现一个不同的指示器

点是在移动的

 

开始!

 

首先要在ViewPager下面居中的位置

搞个RelativeLayout

里面一个LinearLayout,再一个ImageView表示当前页面

    <RelativeLayout

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_marginBottom="10dp"

        android:layout_alignParentBottom="true"

        android:layout_centerHorizontal="true">

 

        <LinearLayout

            android:id="@+id/ll_guide_indicator"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:orientation="horizontal"></LinearLayout>

 

        <ImageView

            android:layout_width="24dp"

            android:layout_height="24dp"

            android:src="@drawable/dot_focus"/>

    </RelativeLayout>

 

 

 

往LinearLayout里面添加几个点

 

        for (int i = 0; i < 3; i++) {

            ImageView imageView = new ImageView(this);

            LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(DensityUtils.dpToPx(this, 24), DensityUtils.dpToPx(this, 24));

            imageView.setLayoutParams(params);

            imageView.setImageResource(R.drawable.dot_normal);

 

            if (i != 0) {

                params.leftMargin = DensityUtils.dpToPx(this, 20);

            }

 

            mLl_guide_indicator.addView(imageView);

        }

 

 

这样最基本的步骤完成了

 

 

接下来计算一下点与点之间的距离

 

注意了,这里如果直接测量

会发现添加的ImageView的宽度为0,为什么

因为这时候我们获取iv的宽度,系统还没有完成对iv的测绘

怎么办

我们可以延迟一点点时间再获取宽度,给系统20毫秒的时间就够了

我们保险一点,给个50毫秒吧,其实很快的

 

        new Handler().postDelayed(new Runnable() {

            @Override

            public void run() {

                int point_width = mLl_guide_indicator.getChildAt(1).getLeft()

- mLl_guide_indicator.getChildAt(0).getLeft();

            }

        }, 50);

 

搞成成员变量

private int mPoint_width;

mPoint_width=...;

 

 

 

现在要用到onPageScrolled方法了

 

ViewPager的addOnPageChangeListener方法里面

 

        mVp.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {

            @Override

            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

                //获取平移距离

                float translationX = (position + positionOffset) * mPoint_width;

                

                //指示器平移

                mIv_guide_redcircle.setTranslationX(translationX);

            }

        });

 

 

搞定

现在我们就已经做好了这个focus指示根据页面平移的指示器