如何在 android 中开发一个显示 Viewpager Indicator 的步数?
How to develop a step number showing Viewpager Indicator in android?
我想在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"
/>
请帮忙。谢谢
有更好的方法来实现您想要的(更好的性能和内存效率,但实现起来要复杂得多),但是要遵循您当前尝试的解决方案,您必须:
要创建线条,您将在每个 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
}
});
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>
IN Activity 查看寻呼机试试这个:-
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>
这是与视图同步的三个平滑步骤 pager.You 可以根据您的需要轻松自定义代码。
结果
感谢并乐于提供帮助:)
我想在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"
/>
请帮忙。谢谢
有更好的方法来实现您想要的(更好的性能和内存效率,但实现起来要复杂得多),但是要遵循您当前尝试的解决方案,您必须:
要创建线条,您将在每个 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
}
});
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>
IN Activity 查看寻呼机试试这个:-
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>
这是与视图同步的三个平滑步骤 pager.You 可以根据您的需要轻松自定义代码。
结果
感谢并乐于提供帮助:)