Android自定义轮播图控件

最新推荐文章于 2024-07-10 09:24:46 发布
最新推荐文章于 2024-07-10 09:24:46 发布
阅读量591 收藏
点赞数
分类专栏： android控件 文章标签： android 轮播图
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liumeng920/article/details/50146009
版权

自定义布局:ad_cycle_view.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/ad_rl"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

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

    <LinearLayout
        android:id="@+id/viewGroup"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_marginBottom="8dp"
        android:gravity="center"
        android:orientation="horizontal" >
    </LinearLayout>


    <TextView
        android:id="@+id/viewGroup2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:textColor="@android:color/white"
        android:padding="15dp"
        android:layout_above="@+id/viewGroup"
        android:layout_alignParentLeft="true"
        android:layout_alignParentRight="true"
        android:layout_marginBottom="25dp"
        android:orientation="horizontal" >
    </TextView>

</RelativeLayout>


activity_main.xml

<RelativeLayout 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"
    tools:context="com.zoesap.view.slider.MainActivity" >

    <com.zoesap.view.slider.ImageCycleView
        android:id="@+id/ad_view"
        android:layout_width="match_parent"
        android:layout_height="180dp" />

</RelativeLayout>


<span style="font-size:24px;color:#ff0000;">广告图片自动轮播控件</span><pre name="code" class="java" style="background-color: rgb(255, 255, 255); ">ImageCycleView 

 

 

 

 

/**
 * 广告图片自动轮播控件
 */
public class ImageCycleView extends LinearLayout {
	/**
	 * 上下文
	 */
	private Context mContext;
	/**
	 * 图片轮播视图
	 */
	private ViewPager mAdvPager = null;
	/**
	 * 滚动图片视图适配
	 */
	private ImageCycleAdapter mAdvAdapter;
	/**
	 * 图片轮播指示器控件
	 */
	private ViewGroup mGroup;

	/**
	 * 图片轮播指示个图
	 */
	private ImageView mImageView = null;

	/**
	 * 滚动图片指示视图列表
	 */
	private ImageView[] mImageViews = null;

	/**
	 * 图片滚动当前图片下标
	 */

	private boolean isStop;

	/**
	 * 游标是圆形还是长条，要是设置为0是长条，要是1就是圆形 默认是圆形
	 */
	public int stype=1;

	/**
	 * @param context
	 */
	public ImageCycleView(Context context) {
		super(context);
	}

	/**
	 * @param context
	 * @param attrs
	 */
	@SuppressLint("Recycle")
	public ImageCycleView(Context context, AttributeSet attrs) {
		super(context, attrs);
		mContext = context;
		LayoutInflater.from(context).inflate(R.layout.ad_cycle_view, this);
		mAdvPager = (ViewPager) findViewById(R.id.adv_pager);
		mAdvPager.setOnPageChangeListener(new GuidePageChangeListener());
		// 滚动图片右下指示器视
		mGroup = (ViewGroup) findViewById(R.id.viewGroup);		
	}

	/**
	 * 触摸停止计时器，抬起启动计时器
	 */
	@Override
	public boolean dispatchTouchEvent(MotionEvent event) {
		if(event.getAction()==MotionEvent.ACTION_UP){
			// 开始图片滚动
			startImageTimerTask();
		}else{
			// 停止图片滚动
			stopImageTimerTask();
		}
		return super.dispatchTouchEvent(event);
	}
	/**
	 * 装填图片数据
	 * 
	 * @param imageUrlList
	 * @param imageCycleViewListener
	 */
	public void setImageResources(ArrayList<Integer> imageUrlList ,ImageCycleViewListener imageCycleViewListener,int stype){
		this.stype=stype;
		// 清除
		mGroup.removeAllViews();
		// 图片广告数量
		final int imageCount = imageUrlList.size();
		mImageViews = new ImageView[imageCount];
		for (int i = 0; i < imageCount; i++) {
			mImageView = new ImageView(mContext);
			LayoutParams params=new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
			params.leftMargin=10; 
			mImageView.setScaleType(ScaleType.CENTER_CROP);
			mImageView.setLayoutParams(params);

			mImageViews[i] = mImageView;
			if (i == 0) {
				if(this.stype==1)
					mImageViews[i].setBackgroundResource(R.drawable.cicle_banner_dian_focus);
				else
					mImageViews[i].setBackgroundResource(R.drawable.cicle_banner_dian_focus);
			} else {
				if(this.stype==1)
					mImageViews[i].setBackgroundResource(R.drawable.cicle_banner_dian_blur);
				else
					mImageViews[i].setBackgroundResource(R.drawable.cicle_banner_dian_blur);
			}
			mGroup.addView(mImageViews[i]);
		}

		mAdvAdapter = new ImageCycleAdapter(mContext, imageUrlList ,imageCycleViewListener);
		mAdvPager.setAdapter(mAdvAdapter);
		mAdvPager.setCurrentItem(Integer.MAX_VALUE/2);
		startImageTimerTask();
	}

	/**
	 * 图片轮播(手动控制自动轮播与否，便于资源控件）
	 */
	public void startImageCycle() {
		startImageTimerTask();
	}

	/**
	 * 暂停轮播—用于节省资源
	 */
	public void pushImageCycle() {
		stopImageTimerTask();
	}

	/**
	 * 图片滚动任务
	 */
	private void startImageTimerTask() {
		stopImageTimerTask();
		// 图片滚动
		mHandler.postDelayed(mImageTimerTask, 5000);
	}

	/**
	 * 停止图片滚动任务
	 */
	private void stopImageTimerTask() {
		isStop=true;
		mHandler.removeCallbacks(mImageTimerTask);
	}

	private Handler mHandler = new Handler();

	/**
	 * 图片自动轮播Task
	 */
	private Runnable mImageTimerTask = new Runnable() {
		@Override
		public void run() {
			if (mImageViews != null) {
				mAdvPager.setCurrentItem(mAdvPager.getCurrentItem()+1);
				if(!isStop){  //if  isStop=true   //当你退出后 要把这个给停下来 不然 这个一直存在 就一直在后台循环 
					mHandler.postDelayed(mImageTimerTask, 5000);
				}

			}
		}
	};

	/**
	 * 轮播图片监听
	 * 
	 * @author minking
	 */
	private final class GuidePageChangeListener implements OnPageChangeListener {
		@Override
		public void onPageScrollStateChanged(int state) {
			if (state == ViewPager.SCROLL_STATE_IDLE)
				startImageTimerTask(); 
		}
		@Override
		public void onPageScrolled(int arg0, float arg1, int arg2) {
		}
		@Override
		public void onPageSelected(int index) {
			index=index%mImageViews.length;
			// 设置当前显示的图片
			// 设置图片滚动指示器背
			if(stype==1)
				mImageViews[index].setBackgroundResource(R.drawable.cicle_banner_dian_focus);
			else
				mImageViews[index].setBackgroundResource(R.drawable.cicle_banner_dian_focus);
			for (int i = 0; i < mImageViews.length; i++) {
				if (index != i) {
					if(stype==1)
						mImageViews[i].setBackgroundResource(R.drawable.cicle_banner_dian_blur);
					else
						mImageViews[i].setBackgroundResource(R.drawable.cicle_banner_dian_blur);
				}
			}
		}
	}

	private class ImageCycleAdapter extends PagerAdapter {

		/**
		 * 图片视图缓存列表
		 */
		private ArrayList<ImageView> mImageViewCacheList;

		/**
		 * 图片资源列表
		 */
		private ArrayList<Integer> mAdList = new ArrayList<Integer>();

		/**
		 * 广告图片点击监听
		 */
		private ImageCycleViewListener mImageCycleViewListener;

		private Context mContext;
		public ImageCycleAdapter(Context context, ArrayList<Integer> adList , ImageCycleViewListener imageCycleViewListener) {
			this.mContext = context;
			this.mAdList = adList;
			mImageCycleViewListener = imageCycleViewListener;
			mImageViewCacheList = new ArrayList<ImageView>();
		}

		@Override
		public int getCount() {
			return Integer.MAX_VALUE;
		}
		@Override
		public boolean isViewFromObject(View view, Object obj) {
			return view == obj;
		}

		@Override
		public Object instantiateItem(ViewGroup container, final int position) {
			Integer imageUrl = mAdList.get(position%mAdList.size());
			
			ImageView imageView = null;
			if (mImageViewCacheList.isEmpty()) {
				imageView = new ImageView(mContext);
				imageView.setLayoutParams(new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));

				//test
				imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
				// 设置图片点击监听
				imageView.setOnClickListener(new OnClickListener() {
					@Override
					public void onClick(View v) {
						mImageCycleViewListener.onImageClick(position%mAdList.size(), v);
					}
				});
			} 
			else {
				imageView = mImageViewCacheList.remove(0);
			}
			imageView.setTag(imageUrl);
			container.addView(imageView);
			imageView.setBackgroundResource(imageUrl);
			//mImageCycleViewListener.displayImage(imageUrl, imageView);
			return imageView;
		}

		@Override
		public void destroyItem(ViewGroup container, int position, Object object) {
			ImageView view = (ImageView) object;
			mAdvPager.removeView(view);
			mImageViewCacheList.add(view);
		}
	}

	/**
	 * 轮播控件的监听事件
	 * 
	 * @author minking
	 */
	public static interface ImageCycleViewListener {
		
		/**
		 * 加载图片资源
		 * 
		 * @param imageURL
		 * @param imageView
		 */
		public void displayImage(String imageURL, ImageView imageView);

		/**
		 * 单击图片事件
		 * 
		 * @param position
		 * @param imageView
		 */
		public void onImageClick(int position, View imageView);
	}

}</span>
 

 


 
 

<span style="font-size:24px;color:#ff0000;">MainActivity 使用自定义轮播图</span>
 

 

 

public class MainActivity extends Activity {

	private ImageCycleView mAdView;
	
	private ArrayList<Integer> list = new ArrayList<Integer>();
	
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		mAdView = (ImageCycleView) findViewById(R.id.ad_view);
		
		list.add(new Integer(R.drawable.tu5));
		list.add(new Integer(R.drawable.tu6));
		
		mAdView.setImageResources(list , mAdCycleViewListener, 1);
	}

	private ImageCycleViewListener mAdCycleViewListener = new ImageCycleViewListener() {
		
		//单击图片
		@Override
		public void onImageClick(int position, View imageView) {
			Toast.makeText(getApplicationContext(), "点击图片"+position, 0).show();
		}
		
		//加载图片资源
		@Override
		public void displayImage(String imageURL, ImageView imageView) {
			
		}
	};
	
}
 

 

 

源码下载地址: http://download.csdn.net/detail/liumeng920/9318639
 


 

                

        

        

    




    

      

        

            

              
                
                  liumeng920
                
              
            

            

                关注
              
            

        

        

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

      

      

            

                专栏目录
          










                



	

		

			

				
					
Android 自定义轮播图（Banner）

				
			

			

				

					u010221508的博客
				

				

					03-11
					
					935
					
				

			

		

		

			
				
先上图看效果：

知识要点：


轮播图是怎么做到无限循环的呢
让ViewPagerAdapter里面的getCount返回MAX_VALUE，instantiateItem方法中，获取图片的时候，让position % drawableList.size(),来得到真实值
 @Override
 public int getCount() {
     return Integer.MAX_VA...

			
		

	



                

              
                



	

		

			

				
					
Android实现自定义轮播图片控件详解

				
			

			

				

					09-01
				

			

		

		

			
				
本文将详细解析如何在Android中实现一个自定义的轮播图片控件。这个控件通常用于展示广告、推荐内容或者产品展示等场景，它能自动切换图片并带有导航小圆点。  首先，轮播图片的核心组件是`ViewPager`，因为它内建了...

			
		

	



                


  
              

                


	

		

			

				
					
android自定义轮播图控件,直接拿来用(注意集合类型的更改)

				
			

			

				

					12-02
				

			

		

		

			
				
android自定义轮播图控件,直接拿来用(注意集合类型为Integer,后期动态获取改为String)

			
		

	





	

		

			

				
					
Android自定义控件之轮播图控件

				
			

			

				

					weixin_30919919的博客
				

				

					01-19
					
					115
					
				

			

		

		

			
				
背景

最近要做一个轮播图的效果，网上看了几篇文章，基本上都能找到实现，效果还挺不错，但是在写的时候感觉每次都要单独去重新在Activity里写一堆代码。于是自己封装了一下。这里只是做了下封装成一个控件，不必每次重复写代码了。

效果图





实现分析

轮播图的功能就是实现左右滑动的广告、图片信息展示，那我们就用ViewPager来实现，由于考虑到用户体验，我们还需要在下...

			
		

	



		

			
		



	

		

			

				
					
android 图片轮播

					
最新发布

				
			

			

				

					xie__jin__cheng的博客
				

				

					07-10
					
					344
					
				

			

		

		

			
				
android 图片轮播

			
		

	





	

		

			

				
					
Android自定义控件之应用程序首页轮播图

					
热门推荐

				
			

			

				

					GeneralAndroid的专栏
				

				

					09-28
					
					1万+
					
				

			

		

		

			
				
现在基本上大多数的Android应用程序的首页都有轮播图，就是像下图这样的（此图为转载的一篇博文中的图，拿来直接用了）：


像这样的组件我相信大多数的应用程序都会使用到，本文就是自定义一个这样的组件，可以动态设置图片的张数。下面就开始本次的自定义之旅吧，首先看一下自定义控件的的布局文件：

<RelativeLayout xmlns:android="http://schemas.and

			
		

	





	

		

			

				
					
Android 自定义一个轮播图

				
			

			

				

					聚精会神搞建设
				

				

					05-03
					
					920
					
				

			

		

		

			
				
有限空间内展示更多的内容，轮播图是个不错的选择，本文将实现一个轮播图SlideShowView，效果如下图所示：


因为轮播图的每一个页面都有文字和图片，为了整合图片和文字，SlideShowView选择继承Fraement

public class SlideShowView extends FrameLayout
轮播图的主要属性如下：


/*存储图片链接*/
priv

			
		

	





	

		

			

				
					
Android实现自定义轮播图片控件示例

				
			

			

				

					09-01
				

			

		

		

			
				
【Android实现自定义轮播图片控件示例】  在Android应用开发中，为了展示广告或者吸引用户注意力，经常需要实现轮播图片的效果。通常，我们可以使用`ViewPager`结合`LinearLayout`来达到这一目的。然而，为了使轮播...

			
		

	





	

		

			

				
					
Android自定义控件实现简单的轮播图控件

				
			

			

				

					01-20
				

			

		

		

			
				
总结来说，实现一个自定义的轮播图控件，主要涉及到以下几个步骤： 1. 继承FrameLayout并包含ViewPager和指示器布局。 2. 实现ViewPager的OnPageChangeListener，监听页面滑动并更新指示器。 3. 设置Adapter填充数据...

			
		

	





	

		

			

				
					
android 自定义轮播图

				
			

			

				

					songsongbrother的博客
				

				

					12-03
					
					1150
					
				

			

		

		

			
				
问题描述 
很多时候我们会做轮播图的需求，但是需求都类似，现在做一个例子
解决方案 
我们将轮播的内容和和指示部分单独封装起来，遇到独特的需求只需要微调就可以


现在直接上图

			
		

	





	

		

			

				
					
Android 自定义轮播图

				
			

			

				

					weixin_45680654的博客
				

				

					03-24
					
					300
					
				

			

		

		

			
				
Android 自定义轮播图定义Banner定义定时器Handler绘制一个下标指示器
定义Banner
主要使用ViewPager实现滑动
public class Banner extends FrameLayout {
    public Context context;
    private @LayoutRes
    int layoutId = R.layout.banner_view;
    private View inflate;
    private ViewPager pag

			
		

	





	

		

			

				
					
Android轮播控件

				
			

			

				

					12-18
				

			

		

		

			
				
本案例是为Android应用首页轮播图而写的，通过自定义控件实现效果，该自定义控件支持动态设置图片的张数。如有不明白之处请参考相应博客：http://blog.csdn.net/android_jiangjun/article/details/39638129
此版本为Android Studio版本

			
		

	





	

		

			

				
					
android轮播图控件

				
			

			

				

					01-19
				

			

		

		

			
				
android自定义控件实现的循环广告位，图片轮播。

			
		

	





	

		

			

				
					
安卓自动轮播控件SmartScrollView

				
			

			

				

					08-20
				

			

		

		

			
				
安卓自动轮播控件SmartScrollView，使得ScrollView中的控件可以根据指定的速度和步进像素进行轮播

			
		

	





	

		

			

				
					
android 自动 轮播图,Android-自定义View实现轮播图

				
			

			

				

					weixin_42474220的博客
				

				

					05-25
					
					498
					
				

			

		

		

			
				
主要步骤1.自定义View的实现过程(测量、布局、绘制)2.事件拦截机制方法、图片轮播时的Scroller对象使用3.轮播图自动轮播时，Timer、TimerTask、Handler三者的结合4.自定义l轮播图底部圆点布局实现主要思路1.我们需要自定义一个继承自FrameLayout的布局，利用FrameLayout布-局的特性(在同一位置放置不同的view最终显示的是最后一个View)，我们就可...

			
		

	





	

		

			

				
					
Android自定义的轮播图控件，基于ViewPager

				
			

			

				

					qq_36523667的博客
				

				

					12-22
					
					366
					
				

			

		

		

			
				
这个东西可能没什么好讲的，但是这个和正常的有点不一样。正常的是你到了这个view，底部的小点就会切换，颜色就会改变。这里是有一个伴随ViewPager滑动的点，根据ViewPager滑动的百分比也对应滑到这些若干点中响应的位置。




其实这个看似简单，并没有那么好实现。下面讲一下实现方案：
ViewPager开放了一个滑动时的监听方法

public void onPageSc

			
		

	





	

		

			

				
					
android 炫酷的自定义轮播图,Android实现炫酷轮播图效果

				
			

			

				

					weixin_42315966的博客
				

				

					05-26
					
					560
					
				

			

		

		

			
				
轮播图的实现有很多种方式，早先我在网上看了下别人写的轮播图，感觉都比较的墨守成规，有的还有可能加载不了网络图片。所以我在这里自己重新写了下轮播图 ，方便日后的项目使用.在下面的代码中，我也用volley封装了网络请求框架，异步加载网络图片，也可以给大家参考，非常实用。效果图：这只是其中的一种效果底层封装的我在下面会一一展示，先看下在MainActivity中怎样调取这个轮播控件package co...

			
		

	





	

		

			

				
					
Android自定义轮播图控件实现教程

				
			

			

				

					
				

			

		

		

			
				
在Android应用开发中，创建自定义轮播图片控件是一个常见的需求，它可以用于展示广告、推荐内容等。本教程以一个名为`AutoViewPager`的自定义控件为例，来阐述实现方法。  首先，轮播图片的核心组件是`ViewPager`，...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值