前面讲了如何使用ViewPager来做多个可滑动的页面。今天在页面的下面加上一排小圆点,用于指示当前在第几页。效果如下(请忽略颜色和图案):
一、产生一个小圆点的视图
1、在drawable下产生一个选中和不选中颜色不同的小圆点形状(shape):dot.xml。
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android"><item android:state_selected="true"><shape android:shape="oval"><solid android:color="@color/purple_200" /><corners android:radius="8dp" /></shape></item><item android:state_selected="false"><shape android:shape="oval"><solid android:color="@color/white" /><corners android:radius="8dp" /></shape></item>
</selector>
2、产生合适大小的小圆点视图ImageView:dot_view.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"android:padding="5dp"><ImageViewandroid:id="@+id/v_dot"android:layout_width="10dp"android:layout_height="10dp"android:src="@drawable/dot"/></LinearLayout>
二、修改主视图,在ViewPager下面加入一个线性视图
为了能在背景图上显示小圆点,我们用一个RelativeLayout来将ViewPager和一个LinearLayout放在一起,LinearLayout放在中央+下方。
这个LinearLayout就是我们准备用于放置一排小圆点的容器。
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:layout_width="match_parent"android:layout_height="match_parent"tools:context=".MainActivity"><RelativeLayoutandroid:layout_width="match_parent"android:layout_height="100dp"android:background="#FFFFFF"android:orientation="vertical"><androidx.viewpager.widget.ViewPagerandroid:id="@+id/viewpager"android:layout_width="match_parent"android:layout_height="wrap_content" /><LinearLayoutandroid:id="@+id/dots_container"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_alignParentBottom="true"android:gravity="center"android:orientation="horizontal" /></RelativeLayout></LinearLayout>
三、动态选中小圆点(选中变色)
1、定义一个变量记录滑动前是第几页
2、动态生成一排小圆点,并选中第一个
3、设置PageChange事件监听器,当滑动页面时选中新的小圆点
public class MainActivity extends AppCompatActivity {// 记录滑动前是第几页private int currentIndex = 0;// 定义引导页图片数组private int[] imageArray = {R.drawable.yingdao1, R.drawable.yingdao2,R.drawable.yingdao3, R.drawable.yingdao4};@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);ViewPager viewPager = findViewById(R.id.viewpager);MyPagerAdapter adapter = new MyPagerAdapter(this, imageArray);viewPager.setAdapter(adapter);// 动态生成小圆点LinearLayout linearLayoutDots = findViewById(R.id.dots_container);for (int i = 0; i < imageArray.length; i++) {linearLayoutDots.addView(LayoutInflater.from(this).inflate(R.layout.dot_view, null));}// 选中第一页linearLayoutDots.getChildAt(0).setSelected(true);// 添加PageChange监听器viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {@Overridepublic void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {}@Overridepublic void onPageSelected(int position) {linearLayoutDots.getChildAt(currentIndex).setSelected(false);linearLayoutDots.getChildAt(position).setSelected(true);currentIndex = position;}@Overridepublic void onPageScrollStateChanged(int state) {}});}
}