Question

我想在android中开发一个步骤编号ViewPager Indicator。当用户在第一步时，指标将如下所示。

Initial Step

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

Last Step

因此，当我在ViewPager中前进时，我希望步骤编号一步一步向前显示步骤编号和突出显示连接它们的行。

修改

我尝试过的指标布局代码如下。我以编程方式更改页面幻灯片上的图像的drawables。但问题是如何创建连接两个步骤的行并增加页面幻灯片的进度？有库吗？

<?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>

在活动视图寻呼机中试试这个： -

 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>

这是与视图寻呼机的三个平滑步骤同步。您可以根据需要轻松自定义代码。

<强>结果

谢谢＆amp;很高兴帮忙:)

Answer 2

有更好的方法来实现您想要的（更好的性能和内存效率，但实现起来要复杂得多），但要遵循当前尝试的解决方案，您必须：

创建线条，您将在每个ImageView之间包含以下视图（根据需要更改颜色，高度和宽度）：

<View 
   android:layout_height="1px" 
   android:layout_width="8dp" 
   android:background="#f99">

并更改状态，您将在ViewPager上调用该状态

pager.setOnPageChangeListener(new ViewPager.SimpleOnPageChangeListener(){
   @Override public void onPageSelected(int position) {
      /// change status here
   }
});

如何在android中开发显示Viewpager Indicator的步骤编号？

2 个答案: