Android 通过ViewPager实现广告轮播效果

最新推荐文章于 2018-03-01 11:41:14 发布

Ashurol

最新推荐文章于 2018-03-01 11:41:14 发布

阅读量730

点赞数

分类专栏： Android热门组件

本文链接：https://blog.csdn.net/Ashurol/article/details/50607759

版权

Android热门组件专栏收录该内容

3 篇文章 0 订阅

订阅专栏

最好的状态，即永远的年轻，永远的热泪盈眶。

在进行代码编写前，先预览一下效果图。

大概知道我们要做什么了，现在开始进行代码的编写

首先是show.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>

下面是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>

下面是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>

接着是ViewPegerAdapter.java

public class ViewPagerAdapter extends PagerAdapter{

	 // 界面列表  
    private ArrayList<ImageView> views;
    public ViewPagerAdapter(ArrayList<ImageView> views)
    {
    	this.views=views;
    }
	@Override
	public int getCount() {
		// TODO Auto-generated method stub
		if(views!=null)
		{
			return views.size();
		}
		return 0;
	}
	/** 
     * 实例化(初始化)页卡 
     */  
	@Override
	public Object instantiateItem(View container, int position) {
		// TODO Auto-generated method stub
		((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));  
    } 

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

}

接着是自定义view，SlideShowView.java文件的编写

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, 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, 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);
			}
		}
	}

}

最后便是如何在布局文件使用这个自定义控件了

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

最后可能会有人问，你一大堆代码这样粘贴上来，没什么营养。。。

而我只是想说说我写这些博客的初衷，1，方便自己日后工作的使用，也同时希望别的小伙伴能看得懂并有所收获。

2，可能这样的代码不够详细，但我想说，学习还是要靠自己，如果别人把所有的事都帮你做了，那还有什么必要去学习呢？所有如果有看不懂的方法，可以自行百度查阅。