android 仿首页广告轮播效果

作者: xiyou_android
发布时间:2015-07-28 10:11:24

1.我们经常打开一个App会看到有广告图片轮播的效果,首先上效果图


1.我们经常打开一个App会看到有广告图片轮播的效果,首先上效果图

2.实现的过程

1.轮播页面他是一个ViewPager

2.然后我们使用RelativeLayout来把小圆点放置在图片上,然后滑动时动态修改小圆点的背景,就产生了滑动

的效果

3.自动滑动的效果,我们可以利用ScheduledExecutorService这个类来实现,他可以周期性的执行任务,这样就可以自动滑动了

3.要点说明

1.public void onPageScrollStateChanged(int arg0) {}

通过网上查找发现当ViewPager页面滑动时,arg0有三种不同的参数

1.当arg0 =1使表示手势滑动

2.当arg0 =2时表示页面自动滑动

3.当arg0 =3,表示滑动到最后一页

1.通过这些参数,我们就可以然手动滑动的时候关闭自动滑动功能

2.当滑动到最后一面时,把ViewPager当前项设置到第一页

2.在写这个功能的时候,把高分辨率的图片放在了自定义的drawable文件夹下,这样如果图片一些,就会引发

内存溢出异常,当图片一大,这样程序就会需要很多的内存来加载,这在android中是不行,所以我们应该把图片

放在对应的drawable文件下,就可避免这种情况,系统应该在后台自动处理了

4.下面填出实现的源代码,在最后会有完整源码的下载链接

1.主Activity

package com.example.demo_image_scroll;

import java.util.ArrayList;
import java.util.List;
import java.util.Map;
import java.util.concurrent.Executors;
import java.util.concurrent.ScheduledExecutorService;
import java.util.concurrent.TimeUnit;

import android.app.ActionBar.LayoutParams;
import android.app.Activity;
import android.content.Context;
import android.graphics.BitmapFactory;
import android.os.Bundle;
import android.os.Handler;
import android.os.Message;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.RelativeLayout;

public class MainActivity extends Activity {

	
	private LayoutInflater inflater;
	
	private ViewPager mviewPager;
	/**用于小圆点图片*/
	private List<ImageView> dotViewList;
	/**用于存放轮播效果图片*/
	private List<ImageView> list;
	
	LinearLayout dotLayout;
	
	private int currentItem  = 0;//当前页面
	
	boolean isAutoPlay = true;//是否自动轮播
	
	private ScheduledExecutorService scheduledExecutorService;
	
	private Handler handler = new Handler(){

        @Override
        public void handleMessage(Message msg) {
            // TODO Auto-generated method stub
            super.handleMessage(msg);
            if(msg.what == 100){
            	mviewPager.setCurrentItem(currentItem);
            }
        }
        
    };
	
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		
		inflater = LayoutInflater.from(MainActivity.this);
		
		mviewPager = (ViewPager) findViewById(R.id.myviewPager);
		dotLayout = (LinearLayout)findViewById(R.id.dotLayout);
		dotLayout.removeAllViews();
		
		initView();
		
        if(isAutoPlay){
        	startPlay();
        }
		
	}
	
	 public void initView(){
	    	dotViewList = new ArrayList<ImageView>();
	    	list = new ArrayList<ImageView>();
	    	
			
			for (int i = 0; i < 4; i++) {
				ImageView dotView = new ImageView(MainActivity.this);
				LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(new LayoutParams(
						LayoutParams.WRAP_CONTENT, android.view.ViewGroup.LayoutParams.WRAP_CONTENT));
				
	        	params.leftMargin = 15;//设置小圆点的外边距
				params.rightMargin = 15;
				
				params.height = 40;//设置小圆点的大小
				params.width = 40;
				
				if(i == 0){
					dotView.setBackgroundResource(R.drawable.point_pressed);
				}else{
					
					dotView.setBackgroundResource(R.drawable.point_unpressed);
				}
				dotLayout.addView(dotView, params);
				
				dotViewList.add(dotView);
				//上面是动态添加了四个小圆点
			}
			
			
			ImageView img1 = (ImageView) inflater.inflate(R.layout.scroll_vew_item, null);
			ImageView img2 = (ImageView) inflater.inflate(R.layout.scroll_vew_item, null);
			ImageView img3 = (ImageView) inflater.inflate(R.layout.scroll_vew_item, null);
			ImageView img4 = (ImageView) inflater.inflate(R.layout.scroll_vew_item, null);

			img1.setBackgroundResource(R.drawable.main_img1);
			img2.setBackgroundResource(R.drawable.main_img2);
			img3.setBackgroundResource(R.drawable.main_img3);
			img4.setBackgroundResource(R.drawable.main_img4);
			
			list.add(img1);
			list.add(img2);
			list.add(img3);
			list.add(img4);
			
			ImagePaperAdapter adapter = new ImagePaperAdapter((ArrayList)list);
			
			mviewPager.setAdapter(adapter);
			mviewPager.setCurrentItem(0);
			mviewPager.setOnPageChangeListener(new MyPageChangeListener());

	    }
	 
	 /**
	     * 开始轮播图切换
	     */
	    private void startPlay(){
	        scheduledExecutorService = Executors.newSingleThreadScheduledExecutor();
	        scheduledExecutorService.scheduleAtFixedRate(new SlideShowTask(), 1, 4, TimeUnit.SECONDS);
	       //根据他的参数说明,第一个参数是执行的任务,第二个参数是第一次执行的间隔,第三个参数是执行任务的周期;
	    }
	    
	    /**
	     *执行轮播图切换任务
	     *
	     */
	    private class SlideShowTask implements Runnable{

	        @Override
	        public void run() {
	            // TODO Auto-generated method stub
	            synchronized (mviewPager) {
	                currentItem = (currentItem+1)%list.size();
	                handler.sendEmptyMessage(100);
	            }
	        }
	    }
	 
	  /**
	     * ViewPager的监听器
	     * 当ViewPager中页面的状态发生改变时调用
	     * 
	     */
	    private class MyPageChangeListener implements OnPageChangeListener{

	        boolean isAutoPlay = false;
	        @Override
	        public void onPageScrollStateChanged(int arg0) {
	            // TODO Auto-generated method stub
	            switch (arg0) {
	            case 1:// 手势滑动,空闲中
	                isAutoPlay = false;
	                System.out.println(" 手势滑动,空闲中");
	                break;
	            case 2:// 界面切换中
	                isAutoPlay = true;
	                System.out.println(" 界面切换中");
	                break;
	            case 0:// 滑动结束,即切换完毕或者加载完毕
	                // 当前为最后一张,此时从右向左滑,则切换到第一张
	                if (mviewPager.getCurrentItem() == mviewPager.getAdapter().getCount() - 1 && !isAutoPlay) {
	                    mviewPager.setCurrentItem(0);
	                    System.out.println(" 滑动到最后一张");
	                }
	                // 当前为第一张,此时从左向右滑,则切换到最后一张
	                else if (mviewPager.getCurrentItem() == 0 && !isAutoPlay) {
	                    mviewPager.setCurrentItem(mviewPager.getAdapter().getCount() - 1);
	                    System.out.println(" 滑动到第一张");
	                }
	                break;
	        }
	        }

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

	        @Override
	        public void onPageSelected(int pos) {
	            // TODO Auto-generated method stub
	            //这里面动态改变小圆点的被背景,来实现效果
	            currentItem = pos;
	            for(int i=0;i < dotViewList.size();i++){
	                if(i == pos){
	                    ((View)dotViewList.get(pos)).setBackgroundResource(R.drawable.point_pressed);
	                }else {
	                    ((View)dotViewList.get(i)).setBackgroundResource(R.drawable.point_unpressed);
	                }
	            }
	        }
	        
	    }
	
}

2.然后是ImagerPaperAdapter

package com.example.demo_image_scroll;

import java.util.ArrayList;

import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.View;
import android.view.ViewGroup;
import android.view.ViewParent;
import android.widget.ImageView;

public class ImagePaperAdapter extends PagerAdapter {

	private ArrayList<ImageView>list;
	public ImagePaperAdapter(ArrayList<ImageView> list) {
		// TODO Auto-generated constructor stub
		this.list = list;
	}

	@Override
	public int getCount() {
		// TODO Auto-generated method stub
		return list.size();
	}

	@Override
	public boolean isViewFromObject(View arg0, Object arg1) {
		// TODO Auto-generated method stub
		return arg0 == arg1;
	}
	
    @Override    
    public void destroyItem(ViewGroup container, int position,    
            Object object) {    
        //Warning:不要在这里调用removeView  
    }
	
	@Override
	public Object instantiateItem(ViewGroup container, int position) {
		// TODO Auto-generated method stub

		
		ImageView view = list.get(position) ;
		ViewParent vp =  view.getParent();
		if(vp != null){
			ViewGroup parent = (ViewGroup)vp;
			parent.removeView(view);
		}
		//上面这些语句必须加上,如果不加的话,就会产生则当用户滑到第四个的时候就会触发这个异常
		//原因是我们试图把一个有父组件的View添加到另一个组件。
		((ViewPager)container).addView(list.get(position));
		
		System.out.println("------------");
		return list.get(position);
	}

}

补充一点

	@Override
	public Object instantiateItem(ViewGroup container, int position) {
		// TODO Auto-generated method stub

		
		ImageView view = list.get(position) ;
		ViewParent vp =  view.getParent();
		if(vp != null){
			ViewGroup parent = (ViewGroup)vp;
			parent.removeView(view);
		}
		//上面这些语句必须加上,如果不加的话,就会产生则当用户滑到第四个的时候就会触发这个异常
		//原因是我们试图把一个有父组件的View添加到另一个组件。
		//这里我刚才写东西的时候想到一点,也遇到这个问题,就是这个函数他会对viewPager的每一个页面进
		//绘制的时候就会被调用,当第一次滑动完毕之后,当在此调用此方法就会在此添加view可是我们之前已经
		//添加过了,这时在添加,就会重复,所以才会有需要移除异常的报告
		((ViewPager)container).addView(list.get(position));
		
		System.out.println("------------我在这里");
		return list.get(position);
	}


由于:
		//上面这些语句必须加上,如果不加的话,就会产生则当用户滑到第四个的时候就会触发这个异常
		//原因是我们试图把一个有父组件的View添加到另一个组件。
		//这里我刚才写东西的时候想到一点,也遇到这个问题,就是这个函数他会对viewPager的每一个页面进
		//绘制的时候就会被调用,当第一次滑动完毕之后,当在此调用此方法就会在此添加view可是我们之前已经
		//添加过了,这时在添加,就会重复添加我们已经添加过得view,所以才会有需要移除异常的报告



 最后附上源代码的链接,有详细的注解  下载


版权声明:本文为博主原创文章,未经博主允许不得转载。

标签: Android Droid
来源:http://blog.csdn.net/xiyou_android/article/details/45566129

推荐: