viewpager添加小圆点的方法

最新推荐文章于 2023-12-15 21:46:52 发布

原创最新推荐文章于 2023-12-15 21:46:52 发布 · 951 阅读

CC 4.0 BY-SA版权

本文介绍如何在Android应用中实现一个无限轮播的ViewPager，并通过小圆点指示器显示当前页面位置。首先在drawable文件夹中创建两个不同状态的小圆点资源文件，然后制作一个状态选择器来区分小圆点的不同状态。接着，在布局文件中加入一个LinearLayout用来放置这些小圆点，并在代码中设置ViewPager的滑动监听器来改变小圆点的状态。

第一步：在drawable中创建shape文件，制作小圆点

<span style="font-size:18px;"><?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" 
    android:shape="oval"
    >
    
   <size android:width="5dp" android:height="5dp"/> 
    
    <solid android:color="#f00"/>

</shape></span>

<span style="font-size:18px;"><?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" 
    android:shape="oval"
    >
    
   <size android:width="5dp" android:height="5dp"/> 
    
    <solid android:color="#000"/>

</shape></span>

第二步：在drawable文件夹中创建selector文件

<span style="font-size:18px;"><?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    
    <item android:state_enabled="true"  android:drawable="@drawable/enabledtrue"></item>
    <item android:state_enabled="false"  android:drawable="@drawable/enabledfalse"></item>

</selector></span>

第三步：在viewpager的布局文件中加入一个布局来放置小圆点

<span style="font-size:18px;"><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

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

   <span style="color:#ff0000;"> <LinearLayout
        android:id="@+id/ll"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerInParent="true"
        android:orientation="horizontal" >
    </LinearLayout></span>

</RelativeLayout></span>

第四步：使用小圆点，将其加入布局中（无限轮播）

<span style="font-size:18px;">public class MainActivity extends Activity {
	String[] path = new String[] {
			"http://imgs.juheapi.com/comic_xin/zbfOxNfWRA==/5010/6-NTAxMDY=.jpg",
			"http://imgs.juheapi.com/comic_xin/zbfOxNfWRA==/5010/16-NTAxMDE2.jpg",
			"http://imgs.juheapi.com/comic_xin/zbfOxNfWRA==/5010/23-NTAxMDIz.jpg",
			"http://imgs.juheapi.com/comic_xin/zbfOxNfWRA==/5010/59-NTAxMDU5.jpg" };
	private LinearLayout ll;
	//记录小圆点的位置
	int lastIndex;
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);

		ViewPager vp = (ViewPager) findViewById(R.id.vp);

		ll = (LinearLayout) findViewById(R.id.ll);

		vp.setAdapter(new MyPagerAdapter(path, this));

		vp.setCurrentItem(Integer.MAX_VALUE / 2 - Integer.MAX_VALUE / 2
				% path.length);

		vp.setOnPageChangeListener(new OnPageChangeListener() {

			@Override
			public void onPageSelected(int arg0) {
				
				
				
              //取出正确的角标
				<span style="color:#ff0000;">int index = arg0 % path.length;
				//取出LinearLayout里当前的imageView
				ImageView imageView = (ImageView) ll.getChildAt(index);
				imageView.setEnabled(false);
				
				ImageView lastImageView = (ImageView) ll.getChildAt(lastIndex);
				lastImageView.setEnabled(true);
				
				//记录当前圆点位置,做为下一次执行onPageSelected方法,变黑的ImageView的位置
				lastIndex=index;</span>
			
			
			}

			@Override
			public void onPageScrolled(int arg0, float arg1, int arg2) {
				// TODO Auto-generated method stub

			}

			@Override
			public void onPageScrollStateChanged(int arg0) {
				// TODO Auto-generated method stub

			}
		});

		setPonit();

	}

	/**
	 * 添加小圆点
	 */
	<span style="color:#ff0000;">private void setPonit() {

		// 小圆点要与图片的个数一致
		for (int i = 0; i < path.length; i++) {
			// 创建imageView
			ImageView imageView = new ImageView(this);
			// 设置小圆点的资源文件
			imageView.setBackgroundResource(R.drawable.backcolor);
			// LayoutParams对象的类型,取决于该控件的父控件类型
			LayoutParams layoutParams = new LayoutParams(
					LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
			// 设置有右间距
			layoutParams.rightMargin = 15;
			// 设置imageView的属性
			imageView.setLayoutParams(layoutParams);
            //初始化第一个小点的颜色
			if (i == 0) {
				imageView.setEnabled(false);
			}
			// 把imageView添加到父控件
			ll.addView(imageView);

		}

	}</span>

}
</span>