viewpager自添加訓示器,無限輪播

viewpager在開發app過程中特别常用，做引導頁，做輪播圖等。很多時候需要添加訓示器，引導頁很多時候也為了省事會将訓示器做到圖檔上面，輪播圖則會引用第三方的訓示器。于是就想自己添加一個訓示器。

下面是效果圖：

模拟器上顯示效果可能不是很好。

布局代碼：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.kevin.tech.myviewpager.MainActivity">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_alignParentTop="true">

        <android.support.v4.view.ViewPager
            android:id="@+id/view_pager"
            android:layout_width="match_parent"
            android:layout_height="200dp"
            android:layout_alignParentTop="true"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true" />
    <LinearLayout
        android:id="@+id/indicator"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="20dp"
        android:orientation="horizontal" />
    </RelativeLayout>

</RelativeLayout>
           

訓示器的動态添加：

private void initIndicator() {
        mImageView = new ImageView[mImageArr.length];
        for (int i = ; i < mImageArr.length; i++) {
            View view = LayoutInflater.from(this).inflate(R.layout.indicator_image, null);
            view.findViewById(R.id.indicator_iamge).setBackgroundResource(R.drawable.shape_origin_point_pink);
            mImageView[i] = new ImageView(this);
            if (i == ) {
                mImageView[i].setBackgroundResource(R.drawable.shape_origin_point_pink);
            } else {
                mImageView[i].setBackgroundResource(R.drawable.shape_origin_point_white);
                LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
                layoutParams.setMargins(, , , );
                mImageView[i].setLayoutParams(layoutParams);
            }
            mIndicator.addView(mImageView[i]);
        }
    }
           

滑動時候訓示器顔色的變化

mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }

            @Override
            public void onPageSelected(int position) {
                setIndicator(position);
                Log.i("kevin", position + "");
            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });


//設定訓示器
private void setIndicator(int position) {
        position %= mImageArr.length;
        for (int i = ; i < mImageArr.length; i++) {
            mImageView[i].setBackgroundResource(R.drawable.shape_origin_point_pink);
            if (position != i) {
                mImageView[i].setBackgroundResource(R.drawable.shape_origin_point_white);
            }

        }
           

設定無限輪播

這裡我用最常用的那種方法,即在PagerAdapter裡用如下代碼實作：

@Override
    public int getCount() {
        return Integer.MAX_VALUE;
    }
 @Override
    public Object instantiateItem(ViewGroup container, int position) {
        ImageView imageView = new ImageView(mContext);
        position %= mImageArr.length;
        if(position<){
            position = mImageArr.length+position;
        }
        imageView.setImageResource(mImageArr[position]);
        container.addView(imageView);
        return imageView;
    }
           

解決第一頁不能向左滑動的問題

Demo下載下傳