轮播图效果

package com.usung.smarttradetwo.widgets;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.drawable.Drawable;
import android.os.Handler;
import android.os.Message;
import android.os.Parcelable;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.FrameLayout;
import android.widget.ImageView;
import android.widget.ImageView.ScaleType;
import android.widget.LinearLayout;

import com.bumptech.glide.Glide;
import com.usung.smarttradetwo.R;

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


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

public class SlideShowView extends FrameLayout {

    //轮播图图片数量
    private int IMAGE_COUNT = 0;
    //自动轮播的时间间隔
    private final static int TIME_INTERVAL = 5;
    //自动轮播启用开关
    private final static boolean isAutoPlay = true;
    
    private OnImageOnClickListener onImageOnClickListener=null;
    //自定义轮播图的资源ID
    private int[] imagesResIds;
    //自定义轮播图的资源ID
    private String[] imagesUrls;
    //自定义轮播图的资源ID
    private ArrayList<String> imagesPaths;
    //放轮播图片的ImageView 的list
    private List<ImageView> imageViewsList;
    // 存放轮播图片的bitmap集合
    private ArrayList<Bitmap> bitmaps;
    //放圆点的View的list
    private List<View> dotViewsList;
    //上下文
    private Context context;
    private int m_type=0;
    
    private ViewPager viewPager;
    //当前轮播页
    private int currentItem  = 0;
    //定时任务
    private ScheduledExecutorService scheduledExecutorService;
    //Handler
    private Handler handler = new Handler(){

        @Override
        public void handleMessage(Message msg) {
            // TODO Auto-generated method stub
            super.handleMessage(msg);
            viewPager.setCurrentItem(currentItem);
        }
        
    };
    
    public SlideShowView(Context context) {
        this(context,null);
        // TODO Auto-generated constructor stub
    }
    public SlideShowView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
        // TODO Auto-generated constructor stub
    }
    public SlideShowView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        // TODO Auto-generated constructor stub
        this.context=context;
    }
    /**
     * 开始轮播图切换
     */
    private void startPlay(){
        scheduledExecutorService = Executors.newSingleThreadScheduledExecutor();
        scheduledExecutorService.scheduleAtFixedRate(new SlideShowTask(), 1, 8, TimeUnit.SECONDS);
    }
    /**
     * 停止轮播图切换
     */
    private void stopPlay(){
        scheduledExecutorService.shutdown();
    }
    /**
     * 初始化相关Data
     */
    public void setData(int[] imagesResIds){
    	m_type=0;
        this.imagesResIds=imagesResIds;
        IMAGE_COUNT=imagesResIds.length;
        initUI();
    }
    
    /**
     * 初始化相关Data
     */
    public void setData(String[] imagesUrls){
    	m_type=1;
    	this.imagesUrls=imagesUrls;
    	IMAGE_COUNT=imagesUrls.length;
        initUI();
    }
    
    /**
     * 初始化相关Data
     */
    public void setData(ArrayList<String> imagesPaths){
    	m_type=2;
    	this.imagesPaths=imagesPaths;
    	this.imagesPaths.remove("");
    	IMAGE_COUNT=imagesPaths.size();
        initUI();
    }
    
    /**
     * 初始化相关Data
     */
    public void setDataBitmap(ArrayList<Bitmap> bitmaps){
    	m_type=2;
    	this.bitmaps = bitmaps;
//    	this.imagesPaths.remove("");
    	IMAGE_COUNT=bitmaps.size();
        initUI();
    }
    
    /**
     * 初始化Views等UI
     */
    private void initUI(){
    	imageViewsList = new ArrayList<ImageView>();
        dotViewsList = new ArrayList<View>();
        View content_viewView = LayoutInflater.from(context).inflate(R.layout.viewpager_ad_carousel, this, true);
        LinearLayout dotLayout = (LinearLayout)content_viewView.findViewById(R.id.dotLayout);
        dotLayout.removeAllViews();
        for (int i = 0; i < IMAGE_COUNT; i++) {
            ImageView view =  new ImageView(context);
            if(m_type==0){
            	view.setImageResource(imagesResIds[i]);
            }else if(m_type==1){
                Glide.with(context).load(imagesUrls[i]).into(view);
//            	ImageLoader.getInstance().displayImage(imagesUrls[i], view);
			}else {
                Glide.with(context).load(imagesPaths.get(i)).into(view);
//				ImageLoader.getInstance().displayImage(imagesPaths.get(i), view);
			}
            view.setScaleType(ScaleType.FIT_XY);
        	view.setOnClickListener(new MyOnClick(i));
            	
            imageViewsList.add(view);
            ImageView dotView =  new ImageView(context);
        	LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(android.view.ViewGroup.LayoutParams.WRAP_CONTENT,android.view.ViewGroup.LayoutParams.WRAP_CONTENT);
        	params.leftMargin = 4;
			params.rightMargin = 4;
			dotLayout.addView(dotView, params);
            dotViewsList.add(dotView);
        }
        
        viewPager = (ViewPager) content_viewView.findViewById(R.id.viewPager);
        viewPager.setFocusable(true);
        
        viewPager.setAdapter(new MyPagerAdapter());
        viewPager.setOnPageChangeListener(new MyPageChangeListener());
        if(isAutoPlay){
            startPlay();
        }
    }
    
    /**
     * image的点击事件
     * @author lijian
     *
     */
    private class MyOnClick implements OnClickListener {

    	private int position=0;
    	public MyOnClick(int position){
    		this.position=position;
    	}
    	
		@Override
		public void onClick(View v) {
			// TODO Auto-generated method stub
			if(onImageOnClickListener!=null){
				onImageOnClickListener.onclick(v,position);
			}
		}
    }
    
    /**
     * 填充ViewPager的页面适配器
     * @author caizhiming
     */
    private class MyPagerAdapter  extends PagerAdapter {

        @Override
        public void destroyItem(View container, int position, Object object) {
            // TODO Auto-generated method stub
            //((ViewPag.er)container).removeView((View)object);
            ((ViewPager)container).removeView(imageViewsList.get(position));
        }

        @Override
        public Object instantiateItem(View container, int position) {
            // TODO Auto-generated method stub
            ((ViewPager)container).addView(imageViewsList.get(position));
            return imageViewsList.get(position);
        }

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

        @Override
        public boolean isViewFromObject(View arg0, Object arg1) {
            // TODO Auto-generated method stub
            return arg0 == arg1;
        }
        @Override
        public void restoreState(Parcelable arg0, ClassLoader arg1) {
            // TODO Auto-generated method stub

        }

        @Override
        public Parcelable saveState() {
            // TODO Auto-generated method stub
            return null;
        }

        @Override
        public void startUpdate(View arg0) {
            // TODO Auto-generated method stub

        }

        @Override
        public void finishUpdate(View arg0) {
            // TODO Auto-generated method stub
            
        }
        
    }
    /**
     * ViewPager的监听器
     * 当ViewPager中页面的状态发生改变时调用
     * @author caizhiming
     */
    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;
                break;
            case 2:// 界面切换中
                isAutoPlay = true;
                break;
            case 0:// 滑动结束,即切换完毕或者加载完毕
                // 当前为最后一张,此时从右向左滑,则切换到第一张
                if (viewPager.getCurrentItem() == viewPager.getAdapter().getCount() - 1 && !isAutoPlay) {
                    viewPager.setCurrentItem(0);
                }
                // 当前为第一张,此时从左向右滑,则切换到最后一张
                else if (viewPager.getCurrentItem() == 0 && !isAutoPlay) {
                    viewPager.setCurrentItem(viewPager.getAdapter().getCount() - 1);
                }
                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 < dotViewsList.size();i++){
                if(i == pos){
                    ((View)dotViewsList.get(pos)).setBackgroundResource(R.mipmap.dot_red);
                }else {
                    ((View)dotViewsList.get(i)).setBackgroundResource(R.mipmap.dot_white);
                }
            }
        }
        
    }
    
    /**
     *执行轮播图切换任务
     *@author caizhiming
     */
    private class SlideShowTask implements Runnable {

        @Override
        public void run() {
            // TODO Auto-generated method stub
            synchronized (viewPager) {
                currentItem = (currentItem+1)%imageViewsList.size();
                handler.obtainMessage().sendToTarget();
            }
        }
        
    }
    /**
     * 销毁ImageView资源,回收内存
     * @author caizhiming
     */
    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);
            }
        }
    }
    
    // 以下两个方法给图片设置点击事件
    public void setOnImageOnClick(OnImageOnClickListener onImageOnClickListener){
    	this.onImageOnClickListener=onImageOnClickListener;
    }
    
    public interface OnImageOnClickListener{
    	public void onclick(View view, int position);
    }
    
}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Swiper是一个非常流行的轮播图插件,它可以帮助你快速实现轮播效果,而不需要编写太多的代码。你可以通过引入Swiper插件的js和css文件,并按照指定的HTML结构来创建轮播图。\[1\] 首先,你需要在HTML中创建一个包含轮播图的容器,例如使用`<div class="swiper-banner">`作为外层容器,并在其中添加一个具有指定类名的`<div class="swiper-wrapper">`作为轮播图的内容容器。在内容容器中,你可以添加多个`<div class="swiper-slide">`作为每个轮播项,并在其中添加图片或其他内容。\[3\] 接下来,你需要在JavaScript中初始化一个Swiper实例,通过指定容器的类名来选择要应用轮播效果的元素。你可以设置一些参数,如切换速度、循环模式、切换效果和自动播放等。\[3\] 例如,你可以使用以下代码初始化一个Swiper实例,并设置一些常用的参数: ```javascript new Swiper(".swiper-banner", { speed: 600, // 切换速度 loop: true, // 循环模式 effect: "cube", // 切换效果:方块 autoplay: { delay: 1000, // 自动播放延迟 }, }); ``` 这样就可以实现一个基本的Swiper轮播图效果了。你可以根据需要自定义样式和其他参数来满足你的需求。如果你需要多个轮播图,可以使用不同的类名来区分它们,并在JavaScript中分别初始化多个Swiper实例。\[2\] 希望这个回答对你有帮助! #### 引用[.reference_title] - *1* *2* [5分钟快速学会使用Swiper.js,实现轮播图各种效果!](https://blog.csdn.net/qq_38499671/article/details/109237643)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [Swiper 制作轮播图(附带效果 gif图)](https://blog.csdn.net/qq_38689395/article/details/108242293)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值