Android之ViewPager实现轮播广告效果的自定义View

生活不可能像你想的那么美好,但也不会像你想的那么糟。


本讲内容:实现轮播广告效果

  

下面是res/layout/show_view.xml 布局文件:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

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

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:gravity="center"
        android:orientation="horizontal"
        android:padding="5dp" >

        <View
            android:id="@+id/v_dot1"
            android:layout_width="8dp"
            android:layout_height="8dp"
            android:background="@drawable/dot_white" />

        <View
            android:id="@+id/v_dot2"
            android:layout_width="8dp"
            android:layout_height="8dp"
            android:layout_marginLeft="5dp"
            android:background="@drawable/dot_white" />

        <View
            android:id="@+id/v_dot3"
            android:layout_width="8dp"
            android:layout_height="8dp"
            android:layout_marginLeft="5dp"
            android:background="@drawable/dot_white" />

        <View
            android:id="@+id/v_dot4"
            android:layout_width="8dp"
            android:layout_height="8dp"
            android:layout_marginLeft="5dp"
            android:background="@drawable/dot_white" />

        <View
            android:id="@+id/v_dot5"
            android:layout_width="8dp"
            android:layout_height="8dp"
            android:layout_marginLeft="5dp"
            android:background="@drawable/dot_white" />
    </LinearLayout>

</RelativeLayout>

下面是res/drawable/dot_red.xml 文件:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval" >

    <solid android:color="#ff0000" />
    <corners android:radius="5dip" />

</shape>

下面是res/drawable/dot_white.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="5dip" />

</shape>

下面是ViewPagerAdapter.java文件:

/**
 * ViewPager适配器,用来绑定数据和view
 * 
 * @author Administrator
 */
public class ViewPagerAdapter extends PagerAdapter {

	// 界面列表
	private ArrayList<ImageView> views;

	public ViewPagerAdapter(ArrayList<ImageView> views) {
		this.views = views;
	}

	/*
	 * 获得当前页卡的数量
	 */
	public int getCount() {
		if (views != null) {
			return views.size();
		}
		return 0;
	}

	/**
	 * 实例化(初始化)页卡
	 */
	public Object instantiateItem(View container, int position) {
		((ViewPager) container).addView(views.get(position), 0);
		return views.get(position);
	}

	/**
	 * 销毁页卡
	 */
	public void destroyItem(View container, int position, Object object) {
		((ViewPager) container).removeView(views.get(position));
	}

	/**
	 * 判断是否由对象生成界面
	 */
	public boolean isViewFromObject(View arg0, Object arg1) {
		return (arg0 == arg1);// 官方提示这样写
	}

}


下面是SlideShowView.java主界面文件:

/**
 * ViewPager实现的轮播图广告自定义视图,如京东首页的广告轮播图效果; 既支持自动轮播页面也支持手势滑动切换页面
 * 
 * @author liguojin
 * 
 */
public class SlideShowView extends FrameLayout {

	// 轮播图图片数量
	private final static int IMAGE_COUNT = 5;

	// 自动轮播的时间间隔
	private final static int TIME_INTERVAL = 5;

	// 自动轮播启用开关
	private final static boolean isAutoPlay = true;

	// 自定义轮播图的资源
	private static final int[] pics = { R.drawable.menu_viewpager_1,
			R.drawable.menu_viewpager_2, R.drawable.menu_viewpager_3,
			R.drawable.menu_viewpager_4, R.drawable.menu_viewpager_5 };

	// 定义一个ArrayList来存放 轮播图片的ImageView 的list
	private ArrayList<ImageView> imageViewsList;
	// 定义一个ArrayList来存放 圆点的View的list
	private ArrayList<View> dotViewsList;

	private ViewPager viewPager;
	private ViewPagerAdapter vpAdapter;
	// 当前轮播页
	private int currentItem = 0;

	// 定时任务
	private ScheduledExecutorService scheduledExecutorService;

	// Handler
	private Handler handler = new Handler() {
		public void handleMessage(android.os.Message msg) {
			super.handleMessage(msg);
			viewPager.setCurrentItem(currentItem);
		}
	};

	public SlideShowView(Context context) {
		this(context, null);
	}

	public SlideShowView(Context context, AttributeSet attrs) {
		this(context, attrs, 0);
	}

	public SlideShowView(Context context, AttributeSet attrs, int defStyle) {
		super(context, attrs, defStyle);
		initViews(context);
		initData();
		System.out.println(isAutoPlay);
		if (isAutoPlay) {
			startPlay();
		}
	}

	private void initViews(Context context) {
		LayoutInflater.from(context).inflate(R.layout.show_view, this, true);

		// 实例化ArrayList对象
		imageViewsList = new ArrayList<ImageView>();
		// 实例化ViewPager
		viewPager = (ViewPager) findViewById(R.id.viewPager);
		// 实例化ViewPager适配器
		vpAdapter = new ViewPagerAdapter(imageViewsList);
	}

	/**
	 * 初始化数据
	 */
	private void initData() {
		LayoutInflater.from(getContext()).inflate(R.layout.show_view, this,
				true);

		// 初始化引导图片列表
		for (int i = 0; i < pics.length; i++) {
			ImageView view = new ImageView(getContext());
			view.setImageResource(pics[i]);
			view.setScaleType(ScaleType.FIT_XY);
			imageViewsList.add(view);
		}
		
		viewPager.setAdapter(vpAdapter);
		viewPager.setOnPageChangeListener(new MyPageChangeListener());

		dotViewsList = new ArrayList<View>();
		dotViewsList.add(findViewById(R.id.v_dot1));
		dotViewsList.add(findViewById(R.id.v_dot2));
		dotViewsList.add(findViewById(R.id.v_dot3));
		dotViewsList.add(findViewById(R.id.v_dot4));
		dotViewsList.add(findViewById(R.id.v_dot5));
	}

	/**
	 * 开始轮播图切换
	 */
	private void startPlay() {
		System.out.println("1");
		scheduledExecutorService = Executors.newSingleThreadScheduledExecutor();
		scheduledExecutorService.scheduleAtFixedRate(new SlideShowTask(), 1, 4,
				TimeUnit.SECONDS);
	}

	/**
	 * 停止轮播图切换
	 */
	private void stopPlay() {
		scheduledExecutorService.shutdown();
	}

	/**
	 * ViewPager的监听器 当ViewPager中页面的状态发生改变时调用
	 * 
	 * @author caizhiming
	 */
	private class MyPageChangeListener implements OnPageChangeListener {

		boolean isAutoPlay = true;

		/**
		 * 当滑动状态改变时调用
		 * 
		 * 其中arg0这个参数有三种状态(0,1,2) arg0 ==1的时辰默示正在滑动 arg0==2的时辰默示滑动完毕了
		 * arg0==0的时辰默示什么都没做 当页面开始滑动的时候,三种状态的变化顺序为(1,2,0)
		 */
		public void onPageScrollStateChanged(int arg0) {
			switch (arg0) {
			case 1:// 手势滑动,空闲中
				isAutoPlay = false;
				break;
			case 2:// 界面切换中
				isAutoPlay = true;
				break;
			case 0:// 滑动结束,即切换完毕或者加载完毕
					// 当前为最后一张,此时从右向左滑,则切换到第一张
				if (viewPager.getCurrentItem() == viewPager.getAdapter()
						.getCount() - 1 && !isAutoPlay) {
					viewPager.setCurrentItem(0);
				}

				// 当前为第一张,此时从左向右滑,则切换到最后一张
				if (viewPager.getCurrentItem() == 0 && !isAutoPlay) {
					viewPager
							.setCurrentItem(viewPager.getAdapter().getCount() - 1);
				}
				break;
			}
		}

		// 当前页面被滑动时调用
		public void onPageScrolled(int arg0, float arg1, int arg2) {

		}

		// 当新的页面被选中时调用
		public void onPageSelected(int position) {
			currentItem = position;

			for (int i = 0; i < dotViewsList.size(); i++) {
				if (i == position) {
					((View) dotViewsList.get(position))
							.setBackgroundResource(R.drawable.dot_red);
				} else {
					((View) dotViewsList.get(i))
							.setBackgroundResource(R.drawable.dot_white);
				}
			}
		}

	}

	/**
	 * 设置当前的小点的位置
	 */
	private void setCurDot(int position) {
		if (position < 0 || position > pics.length - 1
				|| currentItem == position) {
			return;
		}
	}

	/**
	 * 执行轮播图切换任务
	 */
	private class SlideShowTask implements Runnable {
		public void run() {
			synchronized (viewPager) {
				currentItem = (currentItem + 1) % imageViewsList.size();
				handler.obtainMessage().sendToTarget();
			}
		}
	}

	/**
	 * 销毁ImageView资源,回收内存
	 */
	private void destoryBitmaps() {
		for (int i = 0; i < IMAGE_COUNT; i++) {
			ImageView imageView = imageViewsList.get(i);
			Drawable drawable = imageView.getDrawable();
			if (drawable != null) {
				// 解除drawable对view的引用
				drawable.setCallback(null);
			}
		}
	}

}


如何引用上面自定义的轮播图效果视图View呢?实现如下:

<com.example.showviewdemo.SlideShowView
        android:id="@+id/slideshowView"
        android:layout_width="match_parent"
        android:layout_height="120dp" />


Take your time and enjoy it

  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值