Android实现图片轮播

Android实现图片轮播效果

一、新建drawable文件，在里面画两个图片圆点

1、未选中的图片圆点

dot_normal.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval" >
    <!-- solid实心，使用color设置填充的颜色 -->
    <solid android:color="#33000000" />
    <!-- corners圆角，radius越大，角越圆 -->
    <corners android:radius="10dip" />
</shape>

2、选中的图片圆点

dot_focused.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval" >
    <solid android:color="#aaFFFFFF" />
    <corners android:radius="10dip" />
</shape>

二、设置圆点显示的样式

在styles.xml里面加上以下代码片段

<!-- 图片轮播小圆点的样式 -->
    <style name="dot_style">
        <item name="android:layout_width">7dip</item>
        <item name="android:layout_height">7dip</item>
        <item name="android:background">@drawable/dot_normal</item>
        <item name="android:layout_marginLeft">6dip</item>
        <item name="android:layout_marginRight">6dip</item>
    </style>

三、布局文件

activity_main.xml

<LinearLayout 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:background="#D9D9D9"
    android:orientation="vertical" >

    <!-- 图片轮播 -->
    <FrameLayout
        android:layout_width="fill_parent"
        android:layout_weight="1"
        android:layout_height="0dp" >

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

        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="20dip"
            android:layout_gravity="bottom"
            android:background="#33000000"
            android:gravity="center"
            android:orientation="vertical" >

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="3dip"
                android:gravity="center" >
                <View
                    android:id="@+id/v_dot0"
                    style="@style/dot_style" />

                <View
                    android:id="@+id/v_dot1"
                    style="@style/dot_style" />

                <View
                    android:id="@+id/v_dot2"
                    style="@style/dot_style" />

                <View
                    android:id="@+id/v_dot3"
                    style="@style/dot_style" />

                <View
                    android:id="@+id/v_dot4"
                    style="@style/dot_style" />
            </LinearLayout>
        </LinearLayout>
    </FrameLayout>

</LinearLayout>

四、实现轮播的java代码

Test.java

public class Test extends Activity{

	private ViewPager viewPager; // android-support-v4中的滑动组件
	private List<ImageView> imageViews; // 滑动的图片集合
	private int[] imageResId;
	private List<View> dots;
	private int currentItem = 0; // 当前图片的索引号
	private long mExitTime;
	private ScheduledExecutorService scheduledExecutorService;	// 定时执行某项任务

	private Handler handler = new Handler() {
		public void handleMessage(android.os.Message msg) {
			// 切换当前显示的图片
			viewPager.setCurrentItem(currentItem);
		};
	};

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		// 图片轮播
		initViewPager();
	}

	// 初始化图片轮播
	private void initViewPager(){
		// 把图片资源ID放在数组中
		imageResId = new int[] { R.drawable.main_one, R.drawable.main_two, R.drawable.main_three, R.drawable.main_four, R.drawable.main_five };

		// 初始化图片资源
		imageViews = new ArrayList<ImageView>();
		for (int i = 0; i < imageResId.length; i++) {
			ImageView imageView = new ImageView(this);
			imageView.setImageResource(imageResId[i]);
			imageView.setScaleType(ScaleType.CENTER_CROP);
			imageViews.add(imageView);
		}
		dots = new ArrayList<View>();
		dots.add(findViewById(R.id.v_dot0));
		dots.add(findViewById(R.id.v_dot1));
		dots.add(findViewById(R.id.v_dot2));
		dots.add(findViewById(R.id.v_dot3));
		dots.add(findViewById(R.id.v_dot4));
		viewPager = (ViewPager) findViewById(R.id.vp);
		viewPager.setAdapter(new MyAdapter());
		// 设置一个监听器，当ViewPager中的页面改变时调用
		viewPager.setOnPageChangeListener(new MyPageChangeListener());
	}

	// 设置小点的事件监听
	private class MyPageChangeListener implements OnPageChangeListener{

		private int oldPosition = 0;
		@Override
		public void onPageScrollStateChanged(int arg0) {
			// TODO Auto-generated method stub
		}

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

		@Override
		public void onPageSelected(int position) {
			// TODO Auto-generated method stub
			currentItem = position;
			/* tv_title.setText(titles[position]); */
			// 老页面的原点变成未选中状态
			dots.get(oldPosition).setBackgroundResource(R.drawable.dot_normal);
			// 新页面的点变成选中状态
			dots.get(position).setBackgroundResource(R.drawable.dot_focused);
			oldPosition = position;
		}
	}

	// 填充ViewPager的适配器
	private class MyAdapter extends PagerAdapter {
		// 只需要实现前面的四个方法
		public int getCount() {
			return imageResId.length;
		}

		public Object instantiateItem(View arg0, int arg1) {
			((ViewPager) arg0).addView(imageViews.get(arg1));
			return imageViews.get(arg1);
		}

		public void destroyItem(View arg0, int arg1, Object arg2) {
			((ViewPager) arg0).removeView((View) arg2);
		}
		// 用于判断当前要显示的界面
		public boolean isViewFromObject(View arg0, Object arg1) {
			return arg0 == arg1;
		}
	}

	// 切换图片的线程
	private class ScrollTask implements Runnable {
		public void run() {
			// 加锁
			synchronized (viewPager) {
				currentItem = (currentItem + 1) % imageViews.size();
				handler.obtainMessage().sendToTarget(); // 通过Handler切换图片
			}
		}
	}

	@Override
	protected void onStart() {
		scheduledExecutorService = Executors.newSingleThreadScheduledExecutor();
		// 当Activity显示出来后，每两秒钟切换一次图片显示
		// 该方法是个定时执行的工具，参数1：要执行的线程，参数2：初始化延时,参数3：每次执行的时间间隔,参数4：计时单位
		scheduledExecutorService.scheduleAtFixedRate(new ScrollTask(), 1, 2, TimeUnit.SECONDS);
		super.onStart();
	}

	@Override
	protected void onStop() {
		// 当Activity不可见的时候停止切换
		scheduledExecutorService.shutdown();
		super.onStop();
	}
}