android - 如何在android中开发一个显示Viewpager Indicator的步数？

Question

我想在android中开发一个步数ViewPager Indicator。当用户处于第一步时，指示器将如下所示。

当他走到最后一步时，应该是这样的。

因此，当我在 ViewPager 中前进时，我希望步数一次前进一步，以突出显示步数和连接它们的线。

编辑:

我试过的指标布局代码如下。我以编程方式更改页面幻灯片上图像的可绘制对象。但问题是如何创建连接两个步骤的线并增加页面幻灯片的进度？有可用的图书馆吗？

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
          android:orientation="horizontal"
          android:layout_width="fill_parent"
          android:layout_height="fill_parent"
    >

<ImageView
        android:id="@+id/img_one"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:src="@drawable/cb1"
        android:layout_weight="1"
        />

<ImageView
        android:id="@+id/img_two"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:src="@drawable/cb2"
        android:layout_weight="1"
        />

<ImageView
        android:id="@+id/img_three"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:src="@drawable/cb3"
        android:layout_weight="1"
        />

<ImageView
        android:id="@+id/img_four"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:src="@drawable/cb4"
        android:layout_weight="1"
        />

<ImageView
        android:id="@+id/img_five"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:src="@drawable/cb5"
        android:layout_weight="1"
        />

<ImageView
        android:id="@+id/img_six"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:src="@drawable/cb6"
        android:layout_weight="1"
        />

请帮忙。谢谢。

Answer 1

IN Xml 试试这段代码..

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/main_content"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/background_dark"
    android:fitsSystemWindows="true"
    tools:context="com.layer_net.stepindicatorexample.MainActivity">
    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingTop="@dimen/appbar_padding_top"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|enterAlways"
            app:popupTheme="@style/AppTheme.PopupOverlay">
        </android.support.v7.widget.Toolbar>
    </android.support.design.widget.AppBarLayout>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:orientation="vertical"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">
        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:orientation="horizontal"
            android:padding="10dp">
            <FrameLayout
                android:layout_width="200dp"
                android:layout_height="wrap_content">
                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:orientation="horizontal">

                    <LinearLayout
                        android:layout_width="0dp"
                        android:layout_height="match_parent"
                        android:layout_weight="1"
                        android:orientation="vertical">

                        <ImageView
                            android:layout_width="18dp"
                            android:layout_height="18dp"
                            android:layout_gravity="left|center"
                            android:src="@drawable/dot_white" />
                    </LinearLayout>

                    <LinearLayout
                        android:layout_width="wrap_content"
                        android:layout_height="match_parent"
                        android:orientation="vertical">

                        <ImageView
                            android:layout_width="18dp"
                            android:layout_height="18dp"
                            android:layout_gravity="center"
                            android:src="@drawable/dot_white" />
                    </LinearLayout>

                    <LinearLayout
                        android:layout_width="0dp"
                        android:layout_height="match_parent"
                        android:layout_weight="1"
                        android:orientation="vertical">

                        <ImageView
                            android:layout_width="18dp"
                            android:layout_height="18dp"
                            android:layout_gravity="right|center"
                            android:src="@drawable/dot_white" />
                    </LinearLayout>


                </LinearLayout>

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:orientation="horizontal">

                    <LinearLayout
                        android:layout_width="0dp"
                        android:layout_height="match_parent"
                        android:layout_weight="1">

                        <ProgressBar
                            android:id="@+id/bar"
                            style="?android:attr/progressBarStyleHorizontal"
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            android:layout_gravity="center"
                            android:layout_margin="5dp"
                            android:indeterminate="false"
                            android:max="100"
                            android:maxHeight="5dip"
                            android:minHeight="5dip"
                            android:progressDrawable="@drawable/greenprogress" />
                    </LinearLayout>

                    <LinearLayout
                        android:layout_width="0dp"
                        android:layout_height="match_parent"
                        android:layout_weight="1">

                        <ProgressBar
                            android:id="@+id/bar2"
                            style="?android:attr/progressBarStyleHorizontal"
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            android:layout_gravity="center"
                            android:layout_margin="5dp"
                            android:indeterminate="false"
                            android:max="100"
                            android:maxHeight="5dip"
                            android:minHeight="5dip"
                            android:progressDrawable="@drawable/second_progress_bar" />
                    </LinearLayout>


                </LinearLayout>

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"

                    android:orientation="horizontal">

                    <LinearLayout
                        android:layout_width="0dp"
                        android:layout_height="match_parent"
                        android:layout_weight="1"
                        android:orientation="vertical">

                        <ImageView
                            android:layout_width="18dp"
                            android:layout_height="18dp"
                            android:layout_gravity="left|center"
                            android:padding="0.5dp"
                            android:src="@drawable/dot_orange" />
                    </LinearLayout>

                    <LinearLayout
                        android:layout_width="wrap_content"
                        android:layout_height="match_parent"
                        android:orientation="vertical">

                        <ImageView
                            android:id="@+id/second_dot"
                            android:layout_width="18dp"
                            android:layout_height="18dp"
                            android:layout_gravity="center"
                            android:padding="0.5dp"
                            android:src="@drawable/dot_white" />
                    </LinearLayout>

                    <LinearLayout
                        android:layout_width="0dp"
                        android:layout_height="match_parent"
                        android:layout_weight="1"
                        android:orientation="vertical">

                        <ImageView
                            android:id="@+id/third_dot"
                            android:layout_width="18dp"
                            android:layout_height="18dp"
                            android:layout_gravity="right|center"
                            android:padding="0.5dp"
                            android:src="@drawable/dot_white" />
                    </LinearLayout>


                </LinearLayout>
            </FrameLayout>



        </LinearLayout>

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



</android.support.design.widget.CoordinatorLayout>

在 Activity View Pager 中试试这个:-

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

                int round = Math.round(positionOffset * 100);

                Log.e("positionOffset", ">>" + position);
                int progress = round;
                if (position == 0) {
                    progressBar.setProgress(progress);
                    if(progressBar.getProgress()<95){
                        second_dot.setImageResource(R.drawable.dot_white);
                    }
                } else if(position==1) {
                    second_dot.setImageResource(R.drawable.red_dot);
                    bar2.setProgress(progress);
                    if(bar2.getProgress()<95){
                        third_dot.setImageResource(R.drawable.dot_white);
                    }

                }
                else if(position==2){
                  third_dot.setImageResource(R.drawable.blue_dot);
                }


            }

            @Override
            public void onPageSelected(int position) {

            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });
 Drawable greenprogress.xml code :-
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/progress"
        android:drawable="@drawable/line_12" />
    <item android:id="@android:id/background"

        >
        <shape>
            <solid android:color="#fff" />
            <stroke
                android:width="0.5px"
                android:color="#fff" />
            <corners android:radius="5dp" />


        </shape>
    </item>


    <item android:id="@android:id/progress">
        <clip>
            <shape>
                <stroke
                    android:width="0.5px"
                    android:color="#fff" />
                <corners android:radius="5dp" />
                <gradient
                    android:endColor="#c3464e"
                    android:startColor="#ffa200" />
            </shape>
        </clip>

    </item>

</layer-list>

second_progress_bar.xml 代码:-

   <?xml version="1.0" encoding="utf-8"?>
    <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
        <item android:id="@+id/progress"
            android:drawable="@drawable/line_12"/>
        <item android:id="@android:id/background"

            >
            <shape >
                <solid android:color="#fff"/>
                <stroke android:width="0.5px"
                    android:color="#fff"
                    />
                <corners android:radius="5dp"/>


            </shape>
        </item>


        <item
            android:id="@android:id/progress"
            >
            <clip>
                <shape>
                    <stroke android:width="0.5px"
                        android:color="#fff"
                        />




                    <corners android:radius="5dp"/>
                    <gradient
                        android:startColor="#c3464e"
                        android:endColor="#38a0da"
                        />
                </shape>
            </clip>

        </item>

    </layer-list> 

这是与 View 分页器同步的三个平滑步骤。您可以根据需要轻松自定义代码。

结果

感谢并乐于提供帮助 :)