Android开发笔记（二十一）横幅轮播页Banner
ViewPager
ViewPager的概念
在前面的博文《 Android开发笔记（十九）底部标签栏TabBar》中，我们提到可以在一个主页面里通过选项卡方式，切换到不同的子页面。那么在手机上还有另外一种切换页面的方式，就是通过手势左右滑动，ViewPager就是这么一个左右滑动来切换页面的控件。ViewPager的基本思想跟适配视图差不多，都是定义一组元素，通过适配器来展示与响应不同元素的处理，适配视图的相关说明参见《 Android开发笔记（三十八）列表类视图》。
ViewPager的常用方法
下面是ViewPager的常用方法：setAdapter : 设置ViewPager的适配器
setCurrentItem : 设置当前的页码，即默认打开ViewPager时显示哪一页的内容。
setOnPageChangeListener : 设置ViewPager的页面变化监听器。
ViewPager的适配器
适配器的相关说明参见《 Android开发笔记（三十八）列表类视图》。不过ViewPager并不使用Adapter类系列的适配器，而是使用PagerAdapter。如果ViewPager里面的视图是View与View的子类，那么适配器都用PagerAdapter；如果ViewPager里面的视图Fragment，那么适配器就要用FragmentStatePagerAdapter（其实该类也是来自于PagerAdapter）。废话少说，直接上PagerAdapter的例子代码： private class ImageAdapater extends PagerAdapter {
@Override
public int getCount() {
return mViewList.size();
}
@Override
public boolean isViewFromObject(View arg0, Object arg1) {
return arg0 == arg1;
}
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView(mViewList.get(position));
}
@Override
public Object instantiateItem(ViewGroup container, int position) {
container.addView(mViewList.get(position));
return mViewList.get(position);
}
}
ViewPager的监听器
ViewPager一般不监听每个页面项的点击事件，而是监听页面滑动的监听事件，对应的监听器类是OnPageChangeListener。该类的三个方法介绍如下：onPageScrollStateChanged : 翻页状态改变时调用，状态参数取值说明为：0表示静止，1表示正在滑动，2表示滑动完毕。在翻页过程中，状态值变化依次为：正在滑动->滑动完毕->静止。
onPageScrolled : 在翻页过程中调用。该方法的三个参数取值说明为：第一个参数表示当前页面的序号；第二个参数表示当前页面偏移的百分比，最小值为0，最大值为1；第三个参数表示当前页面的偏移距离，单位px。
onPageSelected : 在页面选择时调用，该方法用得较多。位置参数表示当前页面的序号。
ViewPager的页码指示器
为了方便开发者处理ViewPager的页码显示与切换，Android附带了两个工具，分别是PagerTabStrip和PagerTitleStrip。二者都是在ViewPager的页面上方展示设定的页面标题，不同之处在于，PagerTabStrip类似Tab效果，文本下面有横线；而PagerTitleStrip只是单纯的文本标题效果。下面是这两个工具的使用说明：1、在布局文件中，二者需要作为ViewPager的的下级节点；
2、在布局文件中，二者本身无需另外定义id，代码中一般也不需要取出它们的对象做什么处理；
3、二者除了展示标题之外，还可自动响应点击事件，点击左侧或右侧的标题，页面会自动切换到左侧或右侧的视图；
4、要设置每页的标题文本，可重写PagerAdapter的getPageTitle，在对应位置返回相应的标题文字；
ViewFlipper
ViewFlipper的概念
设计ViewFlipper的初衷就是给视图翻转实现动画功能，与ViewPager相比，ViewFlipper是自动翻页动画，而ViewPager是手工翻页动画。ViewFlipper的常用方法
下面是ViewFlipper的常用方法：setFlipInterval : 设置每次翻页的时间间隔。
setAutoStart : 设置是否自动开始翻页。
startFlipping : 开始翻页。
stopFlipping : 停止翻页。
isFlipping : 判断当前是否正在翻页。
showNext : 显示下一个视图。
showPrevious : 显示上一个视图。
setInAnimation : 设置视图的移入动画。
getInAnimation : 获取移入动画的对象。
setOutAnimation : 设置视图的移出动画。
getOutAnimation : 获取移出动画的对象。
setDisplayedChild : 设置当前展示第几个视图。
getDisplayedChild : 获取当前展示的是第几个视图。
ViewFlipper与ViewPager的区别
1、手势左右滑动产生翻页动作ViewPager可自动响应左右滑动事件，但ViewFlipper不会自动处理，必须在页面上注册一个手势探测器GestureDetector以及对应的手势监听器OnGestureListener，并重写监听器的onFling方法，根据前后两个手势的位移变化，决定当前是往左翻页还是往右翻页还是不翻页。
2、自动翻页
ViewPager没有可以设置自动翻页的方法，得通过Handler机制来定时调用翻页动作。而ViewFlipper就是为自动翻页而生，startFlipping和stopFlipping两个方法分别用于开始翻页与停止翻页，同时setFlipInterval方法可设置每次翻页的间隔时间。
3、多个子页面视图的适配器
ViewPager可调用setAdapter方法统一设置子页面，但ViewFlipper来源自FrameLayout，所以没有适配器的说法。ViewFlipper本质是多个子视图共存于一个FrameLayout，只是在某个时刻只显示其中的一个子视图，因此ViewFlipper的子页面是一个个addView上去的。
4、页面滑动的监听器
ViewPager可调用setOnPageChangeListener方法设置页面滑动监听器，而ViewFlipper没有专门的滑动监听器，只能通过动画监听器AnimationListener来间接实现。具体说来，便是ViewFlipper先调用getInAnimation或者getOutAnimation获取移入或移除动画的Animation对象，然后再给这些动画对象注册动画监听器setAnimationListener。下面是动画监听器需重写的几个方法：
onPageScrollStateChanged : 翻页状态改变时调用，状态参数取值说明为：0表示静止，1表示正在滑动，2表示滑动完毕。在翻页过程中，状态值变化依次为：正在滑动->滑动完毕->静止。
onPageScrolled : 在翻页过程中调用。该方法的三个参数取值说明为：第一个参数表示当前页面的序号；第二个参数表示当前页面偏移的百分比，最小值为0，最大值为1；第三个参数表示当前页面的偏移距离，单位px。
onPageSelected : 在页面选择时调用，该方法用得较多。位置参数表示当前页面的序号。
5、多页面的的页码指示器
ViewPager有对应的PagerTabStrip和PagerTitleStrip，可以自动显示页码文字；ViewFlipper则没有相关的页码类，如果需要的话，只能自己定义一个新类。
Banner
如今我们打开电商类的APP，首页上方就有很炫的Banner（横幅轮播页），里面放了最新的商品和活动的介绍图片，还能自动轮播，也可左右翻动，着实是吸引眼球。下面是一个Banner的截图，我们看看这个Banner是如何实现的。
首先看到Banner的界面由两部分组成，一部分是轮播的图片，另一部分是图片下方的几个图标用来表示当前播放的是第几张图片。所以一个Banner需要先初始化两个队列，一个是轮播图片队列，可考虑使用ArrayList<ImageView>；另一个则是下方图标队列，可考虑使用RadioGroup或者ArrayList<Button>。
然后图片队列需要按顺序进行轮播，这个轮播效果可考虑使用ViewPager或者ViewFlipper。至于自动滚动及轮播间隔的处理，ViewPager可采取Handler与Runnable结合；ViewFlipper就更简单了，设置flipInterval属性即可指定轮播的时间间隔。
另外，不要忘了在图片轮播时，下方图标也要跟着切换。为此需要给轮播事件加个监听器，以便每次轮播都能触发下方图标的变化。对于ViewPager，可加上OnPageChangeListener监听器，在onPageSelected方法中切换下方图标。对于ViewFlipper，可加上AnimationListener监听器，在onAnimationEnd方法中切换下方图标。
接着在Banner中增加处理手势事件，因为除了自动播放，我们还希望能够用手来控制即时播放。也就是说，用户的手向屏幕右边滑动时，Banner需要立即翻到上一张图片；用户的手向屏幕左边滑动时，Banner需要立即翻到下一张图片。对于ViewPager，我们无需关心左右滑动的手势，因为ViewPager已经自动实现了。对于ViewFlipper，既可以采用粗略手势事件GestureDetector里面的onFling方法（需要注册监听器OnGestureListener），也可以采用精确手势事件里面的onTouchEvent方法。
最后，当用户点击某张图片时，页面自然要跳转到该图片对应的商品页面或者活动页面。所以Banner还需要把一个页面点击的监听器接口开放出来，用于主页面响应这个页面点击事件。具体实现的话，就是Banner在内部点击事件中调用监听器的onBannerClick方法，而主页面需要实现监听器的onBannerClick方法。
代码示例
下面是ViewPager方式实现时候的代码BannerPager.java
import java.util.ArrayList;
import java.util.List;
import com.example.exmbanner.R;
import com.example.exmbanner.util.Utils;
import android.annotation.SuppressLint;
import android.app.Activity;
import android.content.Context;
import android.os.Handler;
import android.os.Message;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.util.AttributeSet;
import android.util.Log;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.RadioButton;
import android.widget.RadioGroup;
import android.widget.RelativeLayout;
@SuppressLint({ "InflateParams", "ClickableViewAccessibility" })
public class BannerPager extends RelativeLayout implements View.OnClickListener {
private static final String TAG = "BannerPager";
private Context mContext;
private BannerClickListener mListener;
private ViewPager mPager;
private List<ImageView> mViewList = new ArrayList<ImageView>();
private RadioGroup mGroup;
private int mCount;
private LayoutInflater mInflater;
private BannerHandler mHandler;
private int dip_13;
private static int mInterval = 3000;
public BannerPager(Context context) {
super(context);
mContext = context;
init();
}
public BannerPager(Context context, AttributeSet attrs) {
super(context, attrs);
mContext = context;
init();
}
public void setOnBannerListener(BannerClickListener listener) {
mListener = listener;
}
public void start() {
mHandler.sendEmptyMessageDelayed(0, mInterval);
}
public void setImage(ArrayList<Integer> imageList) {
for (int i = 0; i < imageList.size(); i++) {
Integer imageID = ((Integer) imageList.get(i)).intValue();
ImageView ivNew = new ImageView(mContext);
ivNew.setLayoutParams(new LayoutParams(
LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT));
ivNew.setScaleType(ImageView.ScaleType.FIT_XY);
ivNew.setImageResource(imageID);
ivNew.setOnClickListener(this);
mViewList.add(ivNew);
Log.d(TAG, "i=" + i + ",image_id=" + imageID);
}
mPager.setAdapter(new ImageAdapater());
mPager.setOnPageChangeListener(new BannerChangeListener(this));
mCount = imageList.size();
for (int i = 0; i < mCount; i++) {
RadioButton radio = new RadioButton(mContext);
radio.setLayoutParams(new RadioGroup.LayoutParams(dip_13, dip_13));
radio.setGravity(Gravity.CENTER);
radio.setButtonDrawable(R.drawable.rbt_selector);
mGroup.addView(radio);
}
mPager.setCurrentItem(0);
setButton(0);
mHandler = new BannerHandler();
start();
}
private void setButton(int position) {
((RadioButton) mGroup.getChildAt(position)).setChecked(true);
}
private void init() {
mInflater = ((Activity) mContext).getLayoutInflater();
View view = mInflater.inflate(R.layout.banner_pager, null);
mPager = (ViewPager) view.findViewById(R.id.banner_pager);
mGroup = (RadioGroup) view.findViewById(R.id.banner_pager_group);
addView(view);
dip_13 = Utils.dip2px(mContext, 13);
}
public boolean dispatchTouchEvent(MotionEvent event) {
getParent().requestDisallowInterceptTouchEvent(true);
return super.dispatchTouchEvent(event);
}
@SuppressLint("HandlerLeak")
private class BannerHandler extends Handler {
@Override
public void handleMessage(Message msg) {
scrollToNext();
sendEmptyMessageDelayed(0, mInterval);
}
}
public void scrollToNext() {
int index = mPager.getCurrentItem() + 1;
if (mViewList.size() <= index) {
index = 0;
}
mPager.setCurrentItem(index);
}
private class ImageAdapater extends PagerAdapter {
@Override
public int getCount() {
return mViewList.size();
}
@Override
public boolean isViewFromObject(View arg0, Object arg1) {
return arg0 == arg1;
}
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView(mViewList.get(position));
}
@Override
public Object instantiateItem(ViewGroup container, int position) {
container.addView(mViewList.get(position));
return mViewList.get(position);
}
}
private class BannerChangeListener implements ViewPager.OnPageChangeListener {
private BannerChangeListener(BannerPager bannerPager) {
}
@Override
public void onPageScrollStateChanged(int arg0) {
}
@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
}
@Override
public void onPageSelected(int arg0) {
setButton(arg0);
}
}
@Override
public void onClick(View v) {
int position = mPager.getCurrentItem();
mListener.onBannerClick(position);
}
}
调用页面代码
import java.util.ArrayList;
import android.annotation.SuppressLint;
import android.app.Activity;
import android.graphics.Point;
import android.os.Bundle;
import android.widget.TextView;
import android.widget.LinearLayout.LayoutParams;
import com.example.exmbanner.ui.BannerClickListener;
import com.example.exmbanner.ui.BannerPager;
import com.example.exmbanner.util.Utils;
public class BannerPagerActivity extends Activity implements BannerClickListener {
private static final String TAG = "BannerPagerActivity";
private TextView tv_pager;
private BannerPager mBanner;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_banner_pager);
tv_pager = (TextView) findViewById(R.id.tv_pager);
mBanner = (BannerPager) findViewById(R.id.banner_pager);
LayoutParams params = (LayoutParams) mBanner.getLayoutParams();
Point point = Utils.getSize(this);
params.height = (int) (point.x * 250f/ 640f);
mBanner.setLayoutParams(params);
ArrayList<Integer> bannerArray = new ArrayList<Integer>();
bannerArray.add(Integer.valueOf(R.drawable.banner_1));
bannerArray.add(Integer.valueOf(R.drawable.banner_2));
bannerArray.add(Integer.valueOf(R.drawable.banner_3));
bannerArray.add(Integer.valueOf(R.drawable.banner_4));
bannerArray.add(Integer.valueOf(R.drawable.banner_5));
mBanner.setImage(bannerArray);
mBanner.setOnBannerListener(this);
}
@SuppressLint("DefaultLocale")
@Override
public void onBannerClick(int position) {
String desc = String.format("您点击了第%d张图片", position+1);
tv_pager.setText(desc);
}
}
下面是ViewFlipper方式实现时候的代码
BannerFlipper.java
import java.util.ArrayList;
import java.util.List;
import com.example.exmbanner.R;
import android.annotation.SuppressLint;
import android.app.Activity;
import android.content.Context;
import android.util.AttributeSet;
import android.util.Log;
import android.view.GestureDetector;
import android.view.LayoutInflater;
import android.view.MotionEvent;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.RelativeLayout;
import android.widget.ViewFlipper;
@SuppressLint({ "InflateParams", "ClickableViewAccessibility" })
public class BannerFlipper extends RelativeLayout {
private static final String TAG = "BannerFlipper";
private Context mContext;
private BannerClickListener mListener;
private ViewFlipper mFlipper;
private LinearLayout mLayout;
private int mCount;
private List<Button> mButtonList = new ArrayList<Button>();
private LayoutInflater mInflater;
private GestureDetector mGesture;
private float mFlipGap = 20f;
public BannerFlipper(Context context) {
super(context);
mContext = context;
init();
}
public BannerFlipper(Context context, AttributeSet attrs) {
super(context, attrs);
mContext = context;
init();
}
public void setOnBannerListener(BannerClickListener listener) {
mListener = listener;
}
public void start() {
startFlip();
}
public void setImage(ArrayList<Integer> imageList) {
for (int i = 0; i < imageList.size(); i++) {
Integer imageID = ((Integer) imageList.get(i)).intValue();
ImageView ivNew = new ImageView(mContext);
ivNew.setLayoutParams(new LayoutParams(
LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT));
ivNew.setScaleType(ImageView.ScaleType.FIT_XY);
ivNew.setImageResource(imageID);
mFlipper.addView(ivNew);
Log.d(TAG, "i=" + i + ",image_id=" + imageID);
}
mCount = imageList.size();
for (int i = 0; i < mCount; i++) {
View view = mInflater.inflate(R.layout.banner_flipper_button, null);
Button button = (Button) view.findViewById(R.id.banner_btn_num);
mLayout.addView(view);
mButtonList.add(button);
}
mFlipper.setDisplayedChild(mCount - 1);
startFlip();
}
private void setButton(int position) {
if (mCount > 1) {
for (int m = 0; m < mCount; m++) {
if (m == position % mCount) {
mButtonList.get(m).setBackgroundResource(R.drawable.icon_point_c);
} else {
mButtonList.get(m).setBackgroundResource(R.drawable.icon_point_n);
}
}
}
}
@SuppressWarnings("deprecation")
private void init() {
mInflater = ((Activity) mContext).getLayoutInflater();
View view = mInflater.inflate(R.layout.banner_flipper, null);
mFlipper = (ViewFlipper) view.findViewById(R.id.banner_flipper);
mLayout = (LinearLayout) view.findViewById(R.id.banner_flipper_num);
addView(view);
// 该手势的onSingleTapUp事件是点击时进入广告页
mGesture = new GestureDetector(new BannerGestureListener(this));
}
public boolean dispatchTouchEvent(MotionEvent event) {
mGesture.onTouchEvent(event);
return true;
}
final class BannerGestureListener implements GestureDetector.OnGestureListener {
private BannerGestureListener(BannerFlipper bannerFlipper) {
}
@Override
public final boolean onDown(MotionEvent event) {
return true;
}
@Override
public final boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) {
if (e1.getX() - e2.getX() > mFlipGap) {
startFlip();
return true;
}
if (e1.getX() - e2.getX() < -mFlipGap) {
backFlip();
return true;
}
return false;
}
@Override
public final void onLongPress(MotionEvent event) {
}
@Override
public final boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY) {
boolean result = false; // true表示要继续处理
if (Math.abs(distanceY) < Math.abs(distanceX)) {
BannerFlipper.this.getParent().requestDisallowInterceptTouchEvent(false);
result = true;
}
return result;
}
@Override
public final void onShowPress(MotionEvent event) {
}
@Override
public boolean onSingleTapUp(MotionEvent event) {
int position = mFlipper.getDisplayedChild();
mListener.onBannerClick(position);
return false;
}
}
private void startFlip() {
mFlipper.startFlipping();
mFlipper.setInAnimation(AnimationUtils.loadAnimation(mContext, R.anim.push_left_in));
mFlipper.setOutAnimation(AnimationUtils.loadAnimation(mContext, R.anim.push_left_out));
mFlipper.getOutAnimation().setAnimationListener(new BannerAnimationListener(this));
mFlipper.showNext();
}
private void backFlip() {
mFlipper.startFlipping();
mFlipper.setInAnimation(AnimationUtils.loadAnimation(mContext, R.anim.push_right_in));
mFlipper.setOutAnimation(AnimationUtils.loadAnimation(mContext, R.anim.push_right_out));
mFlipper.getOutAnimation().setAnimationListener(new BannerAnimationListener(this));
mFlipper.showPrevious();
mFlipper.setInAnimation(AnimationUtils.loadAnimation(mContext, R.anim.push_left_in));
mFlipper.setOutAnimation(AnimationUtils.loadAnimation(mContext, R.anim.push_left_out));
mFlipper.getOutAnimation().setAnimationListener(new BannerAnimationListener(this));
}
private class BannerAnimationListener implements Animation.AnimationListener {
private BannerAnimationListener(BannerFlipper bannerFlipper) {
}
@Override
public final void onAnimationEnd(Animation paramAnimation) {
int position = mFlipper.getDisplayedChild();
setButton(position);
}
@Override
public final void onAnimationRepeat(Animation paramAnimation) {
}
@Override
public final void onAnimationStart(Animation paramAnimation) {
}
}
}
调用页面代码与ViewPager方式的类似，只要把类名与控件名改了就好。
下面是横幅轮播页的效果图，因为两种方式的效果差不多，就不重复帖了
点击下载本文用到的横幅轮播页两种方式的代码