使用HorizontalScrollView实现广告栏Banner及相关原理分析.doc

使用HorizontalScrollView实现广告栏Banner及相关原理分析 现在的App中，广告栏Banner的使用还是挺广泛的，用于展示各种广告、活动推荐等。使用HorizontalScrollView可以很简单的实现一个可自动播放、可滑动、可点击的广告栏Banner，这个也可以做为一个例子，来学习自定义控件的制作。相关原理主要包括两个方面： onMeasure、onLayout、onDraw等View、ViewGroup相关布局函数； dispatchTouchEvent、onInterceptTouchEvent、onTouchEvent等触摸事件处理函数（包括Click等事件触发）； 这两部分搞懂后，制作自定义控件就得心应手了。 一、需求 控件每次展示一张图片，隔一段时间换播下一张，如果当前是最后一张则展示第一张； 用户手指触摸控件，停止轮播，用户滑动手指，则根据方向展示相应下一张或前一张图片； 如果是第一张图片继续往前滑动，需要展示最后一张图片，如果最后一张图片往后滑动，展示第一张图片； 最下方需要有小白点来指示当前是第几张图片； 最终效果如图： 这里写图片描述 二、初设计 HorizontalScrollView本来就是一个横向滑动组件，使用它可以很方便的实现滑动及相应的动画效果，所以选择用它来写这个控件，我看网上也有使用ViewPager实现，原理都是大同小异；下面是按上面的需求做的初始设计，在实现的过程中还会碰到其他问题，需要按情况解决。 布局 HorizontalScrollView——LinearLayout——ImageView List 同时需要在HorizontalScrollView上画小白点指示当前页 定时滚动 添加一个定时器，每隔一段时间滑动到下一页，注意最后一页的循环处理。 用户事件 添加事件监控，触摸停止定时器及滑动事件处理 三、具体实现 1. 设计布局 xml中的布局只有最外层控件，其他的LinearLayout和ImageView都是动态添加进去的，实现如下： public class ADPager extends HorizontalScrollView{ private LinearLayout container = null; private LinearLayout.LayoutParams imgLayoutParams = null; public ADPager(Context context) { super(context); init(); } private void init(){ Context ctx = getContext(); container = new LinearLayout(ctx); ViewGroup.LayoutParams layoutParams = new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT); container.setLayoutParams(layoutParams); //横向布局 container.setOrientation(LinearLayout.HORIZONTAL); imgLayoutParams = new LinearLayout.LayoutParams(getWidth(),getHeight()); this.addView(container); this.setSmoothScrollingEnabled(true); //不显示滑动条 this.setHorizontalScrollBarEnabled(false); } public void setImageList(int imgArray[]){ int size = imgArray.length; if(size 1){ //如果大于一张图片，第一张前放最后一张图片 this.container.addView(makeImageView(imgArray[size - 1]));