Android PagerView页面条带页面指示器

Question

我想知道如何在配置过程中实现应用程序中流行的此页面指示器。我知道有一个圆形页面指示器的自定义视图，但我很好奇是否有更好的解决方案，而无需安装外部库？

我希望能够创建类似的东西：

Answer 1

是的，你可以使用android的默认viewpager实现这一点，只需在viewpager上面添加一个包含imageview的linearlayout。要指示所选页面，您可以使用viewpager.onpagechangelistener方法。你的布局应该是这样的

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >    
<LinearLayout
            android:id="@+id/indicator_layout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_above="@+id/bottom_layout"
            android:background="#343434"
            android:gravity="center_horizontal"
            android:orientation="horizontal" >

           <ImageView
                android:id="@+id/dot1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_vertical"
                android:padding="5dp"
                android:src="@drawable/active_dot" 
                android:contentDescription="@string/indicator"/>

            <ImageView
                android:id="@+id/dot2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_vertical"
                android:padding="5dp"
                android:src="@drawable/inactive_dot" 
                android:contentDescription="@string/indicator"/>

            <ImageView
                android:id="@+id/dot3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_vertical"
                android:padding="5dp"
                android:src="@drawable/inactive_dot" 
                android:contentDescription="@string/indicator"/>

            <ImageView
                android:id="@+id/dot4"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_vertical"
                android:padding="5dp"
                android:src="@drawable/inactive_dot" 
                android:contentDescription="@string/indicator"/>

            <ImageView
                android:id="@+id/dot5"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_vertical"
                android:padding="5dp"
                android:src="@drawable/inactive_dot" 
                android:contentDescription="@string/indicator"/>

            <ImageView
                android:id="@+id/dot6"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_vertical"
                android:padding="5dp"
                android:src="@drawable/inactive_dot" 
                android:contentDescription="@string/indicator"/>

        </LinearLayout>
       <android.support.v4.view.ViewPager
            android:id="@+id/mypager"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_below="@+id/indicator_layout" />
</RelativeLayout>

并且你的pagechange监听器应该是这样的

viewpager.setOnPageChangeListener(new OnPageChangeListener() {

        @Override
        public void onPageSelected(int which) {
            switch (which) {
            case 0:
                setIndicatorImage(dot1);
                break;

            case 1:
                setIndicatorImage(dot2);
                break;

            case 2:
                setIndicatorImage(dot3);
                break;

            case 3:
                setIndicatorImage(dot4);
                break;

            case 4:
                setIndicatorImage(dot5);
                break;

            case 5:
                setIndicatorImage(dot6);
                break;

            }
        }

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

        @Override
        public void onPageScrollStateChanged(int arg0) {
        }
    });
}

public void setIndicatorImage(ImageView selected_img) {
    if (selected_img.getId() == R.id.dot1) {
        dot1.setImageResource(R.drawable.active_dot);
        dot2.setImageResource(R.drawable.inactive_dot);
        dot3.setImageResource(R.drawable.inactive_dot);
        dot4.setImageResource(R.drawable.inactive_dot);
        dot5.setImageResource(R.drawable.inactive_dot);
        dot6.setImageResource(R.drawable.inactive_dot);
    } else if (selected_img.getId() == R.id.dot2) {
        dot1.setImageResource(R.drawable.inactive_dot);
        dot2.setImageResource(R.drawable.active_dot);
        dot3.setImageResource(R.drawable.inactive_dot);
        dot4.setImageResource(R.drawable.inactive_dot);
        dot5.setImageResource(R.drawable.inactive_dot);
        dot6.setImageResource(R.drawable.inactive_dot);
    } else if (selected_img.getId() == R.id.dot3) {
        dot1.setImageResource(R.drawable.inactive_dot);
        dot2.setImageResource(R.drawable.inactive_dot);
        dot3.setImageResource(R.drawable.active_dot);
        dot4.setImageResource(R.drawable.inactive_dot);
        dot5.setImageResource(R.drawable.inactive_dot);
        dot6.setImageResource(R.drawable.inactive_dot);
    } else if (selected_img.getId() == R.id.dot4) {
        dot1.setImageResource(R.drawable.inactive_dot);
        dot2.setImageResource(R.drawable.inactive_dot);
        dot3.setImageResource(R.drawable.inactive_dot);
        dot4.setImageResource(R.drawable.active_dot);
        dot5.setImageResource(R.drawable.inactive_dot);
        dot6.setImageResource(R.drawable.inactive_dot);
    } else if (selected_img.getId() == R.id.dot5) {
        dot1.setImageResource(R.drawable.inactive_dot);
        dot2.setImageResource(R.drawable.inactive_dot);
        dot3.setImageResource(R.drawable.inactive_dot);
        dot4.setImageResource(R.drawable.inactive_dot);
        dot5.setImageResource(R.drawable.active_dot);
        dot6.setImageResource(R.drawable.inactive_dot);
    } else{
        dot1.setImageResource(R.drawable.inactive_dot);
        dot2.setImageResource(R.drawable.inactive_dot);
        dot3.setImageResource(R.drawable.inactive_dot);
        dot4.setImageResource(R.drawable.inactive_dot);
        dot5.setImageResource(R.drawable.inactive_dot);
        dot6.setImageResource(R.drawable.active_dot);
    } 
}