前几天看到淘宝和易迅的客户端的广告栏做的不错，今天就尝试了一下，模仿着写了带指引的ViewFlipper。本文主要介绍指引栏的实现，论坛上关于ViewFlipper的使用和介绍很多，就不过多介绍。

效果图如下：

首先是布局，稍有Android开发经验的人很容易看出来，这是一个Layout里面嵌套了ViewFliper和一个LinearLayout。布局如下：

[html]  view plain copy
  1. <RelativeLayout
  2. android:id="@+id/food_recom_viewfliper_rl"
  3. android:layout_width="fill_parent"
  4. android:longClickable="true"
  5. android:layout_height="150dp">
  6. <com.mobsut.mm.widget.GestureViewFliper
  7. android:id="@+id/food_recom_viewfliper"
  8. android:layout_height="150dp"
  9. android:background="@color/white"
  10. android:layout_width="fill_parent"/>
  11. <LinearLayout
  12. android:id="@+id/food_recom_page_indicator"
  13. android:layout_width="fill_parent"
  14. android:layout_height="wrap_content"
  15. android:layout_alignParentBottom="true"
  16. android:gravity="center"
  17. android:orientation="horizontal"
  18. android:padding="@dimen/offset_2dp"></LinearLayout>
  19. </RelativeLayout >

可以看到这个GestureViewFliper是我自定义的，继承于VIewFlipper，实现OnGestureListener接口用来识别用户手势，让用户可以手动滑动广告栏。在用GestureDetector 识别手势时，会出现一个问题：onFling函数不被触发，这时需要把onDown设置为true。

在用户滑动之前，需要注意：当用户将作出滑动手势时，需要停掉自动播放，然后用户结束滑动时，继续自动播放。

然后是重点，要实现带索引的效果，首先需要得到ViewFlipper的当前展示的View的索引值，而这个View当自动播放时是实时变化的，但是ViewFlipper并没有提供一个接口，在可以监听自动播放时view的变化。所以，需要自定义一个回调接口，监听displayView的变化，并把相应的索引值传递出去。这样才可以实现索引效果。

自定义的ViewFlipper源码如下：

[java]  view plain copy
  1. package com.mobsut.mm.widget;
  2. import android.content.Context;
  3. import android.util.AttributeSet;
  4. import android.view.GestureDetector;
  5. import android.view.View;
  6. import android.view.GestureDetector.OnGestureListener;
  7. import android.view.MotionEvent;
  8. import android.view.animation.AnimationUtils;
  9. import android.widget.ViewFlipper;
  10. /*
  11. * 自定义的ViewFliper，监听滑动手势,以及自动指引
  12. * @author jiakang
  13. */
  14. import com.mobsut.mm.R;
  15. public class GestureViewFliper extends ViewFlipper implements OnGestureListener {
  16. GestureDetector gestureDetector = null;
  17. private Context mContext = null;
  18. FlipperFacousChangedListener flipperFacousChangedListener=null;
  19. public GestureViewFliper(Context mContext) {
  20. super(mContext);
  21. }
  22. public GestureViewFliper(Context mContext, AttributeSet attrs) {
  23. super(mContext, attrs);
  24. this.mContext = mContext;
  25. gestureDetector = new GestureDetector(mContext, this);
  26. setLongClickable(true);
  27. setOnTouchListener(new OnTouchListener() {
  28. @Override
  29. public boolean onTouch(View v, MotionEvent event) {
  30. // TODO Auto-generated method stub
  31. return gestureDetector.onTouchEvent(event);
  32. }
  33. });
  34. }
  35. @Override
  36. public void startFlipping() {
  37. // TODO Auto-generated method stub
  38. super.startFlipping();
  39. setInAnimation(AnimationUtils.loadAnimation(mContext,
  40. R.anim.m_push_up_in));
  41. setOutAnimation(AnimationUtils.loadAnimation(mContext,
  42. R.anim.m_push_up_out));
  43. }
  44. @Override
  45. public boolean onTouchEvent(MotionEvent event) {
  46. // TODO Auto-generated method stub
  47. stopFlipping();       //用户点击屏幕时，停止滑动
  48. setAutoStart(false);   //取消自动滑动
  49. return this.gestureDetector.onTouchEvent(event);   //把touch事件交给gesture处理
  50. }
  51. @Override
  52. public boolean onDown(MotionEvent e) {
  53. // TODO Auto-generated method stub
  54. <span style="color:#ff0000;">return true;</span> // 缺省值是false,在onTouchEvent后触发，如果为false，onFling将得不到down的事件即不触发
  55. }
  56. /*
  57. * 重写了onFling，为了判断手势，让手势滑动
  58. *
  59. * @see android.view.GestureDetector.OnGestureListener#onFling(android.view.
  60. * MotionEvent, android.view.MotionEvent, float, float)
  61. */
  62. @Override
  63. public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,
  64. float velocityY) {
  65. // TODO Auto-generated method stub
  66. if (e2.getX() - e1.getX() > 120) {    // 从左侧滑进
  67. setInAnimation(AnimationUtils.loadAnimation(mContext,
  68. R.anim.m_push_up_in));     //设置进出动画
  69. setOutAnimation(AnimationUtils.loadAnimation(mContext,
  70. R.anim.m_push_up_out));
  71. //用户手势滑动结束，再次开始自动播放
  72. showPrevious();
  73. setAutoStart(true);
  74. startFlipping();
  75. return true;
  76. } else if (e2.getX() - e1.getX() < -120) {   //从右侧画出
  77. setOutAnimation(AnimationUtils.loadAnimation(mContext,
  78. R.anim.m_push_up_out));         //设置进出动画
  79. setInAnimation(AnimationUtils.loadAnimation(mContext,
  80. R.anim.m_push_up_in));
  81. //滑动结束，再次自动播放
  82. showNext();
  83. setAutoStart(true);
  84. startFlipping();
  85. return true;
  86. }
  87. return false;
  88. }
  89. @Override
  90. public void showNext() {
  91. // TODO Auto-generated method stub
  92. super.showNext();
  93. //监听向下向下翻页
  94. <span style="color:#ff0000;">flipperFacousChangedListener.onFliperChanged(getDisplayedChild());</span>
  95. }
  96. @Override
  97. public void showPrevious() {
  98. // TODO Auto-generated method stub
  99. super.showPrevious();
  100. //监听向上翻页
  101. <span style="color:#ff0000;">flipperFacousChangedListener.onFliperChanged(getDisplayedChild());</span>
  102. }
  103. @Override
  104. public void onLongPress(MotionEvent e) {
  105. // TODO Auto-generated method stub
  106. }
  107. @Override
  108. public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX,
  109. float distanceY) {
  110. // TODO Auto-generated method stub
  111. return true;
  112. }
  113. @Override
  114. public void onShowPress(MotionEvent e) {
  115. // TODO Auto-generated method stub
  116. }
  117. @Override
  118. public boolean onSingleTapUp(MotionEvent e) {
  119. // TODO Auto-generated method stub
  120. return false;
  121. }
  122. /*
  123. * 回调接口，用于监听viewflipper切花事件
  124. */
  125. public interface FlipperFacousChangedListener{
  126. public void onFliperChanged(int index);
  127. }
  128. public void setOnFacousChangedListener(FlipperFacousChangedListener flipperFacousChangedListener){
  129. this.flipperFacousChangedListener=flipperFacousChangedListener;
  130. }
  131. }

接着是实现部分，指引条是由两张图片构成，选中项目一个颜色，未选中时一个颜色。实现比较简单，部分代码如下：

[java]  view plain copy
  1. package com.mobsut.mm.foods;
  2. public class FoodRecomFragment extends Fragment {
  3. private Context mContext=null;
  4. private LinearLayout mainLayout=null;
  5. private LinearLayout indicatorLayout=null;
  6. private ImageView[] mImageView;
  7. private int[] fliperImage={R.drawable.fliper1,R.drawable.fliper2,R.drawable.fliper3};
  8. @Override
  9. public void onCreate(Bundle savedInstanceState) {
  10. // TODO Auto-generated method stub
  11. super.onCreate(savedInstanceState);
  12. mContext=getActivity();
  13. }
  14. @Override
  15. public View onCreateView(LayoutInflater inflater, ViewGroup container,
  16. Bundle savedInstanceState) {
  17. // TODO Auto-generated method stub
  18. mainLayout=(LinearLayout)inflater.inflate(R.layout.food_recom_fragment_main,container,false);
  19. indicatorLayout=(LinearLayout)mainLayout.findViewById(R.id.food_recom_page_indicator);
  20. GestureViewFliper viewFilper=(GestureViewFliper)mainLayout.findViewById(R.id.food_recom_viewfliper);
  21. mImageView=new ImageView[fliperImage.length];
  22. for(int i=0;i<fliperImage.length;i++){
  23. ImageView iv=new ImageView(mContext);
  24. ImageView indicatorView=new ImageView(mContext);
  25. if(i==0){
  26. indicatorView.setImageResource(R.drawable.page_selected);//初始默认选中第一张为当前指引
  27. }else{
  28. indicatorView.setImageResource(R.drawable.page_normal);
  29. }
  30. iv.setImageResource(fliperImage[i]);
  31. //把指引条的图片添加到LinearLayout里面
  32. LinearLayout.LayoutParams lp=new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT,LinearLayout.LayoutParams.WRAP_CONTENT);
  33. lp.setMargins(6, 0, 0, 0);
  34. indicatorView.setLayoutParams(lp);
  35. iv.setScaleType(ScaleType.FIT_XY);
  36. viewFilper.addView(iv, new LayoutParams(LayoutParams.FILL_PARENT,LayoutParams.FILL_PARENT));
  37. mImageView[i]=indicatorView;
  38. indicatorLayout.addView(mImageView[i]);
  39. }
  40. viewFilper.setAutoStart(true);    //让viewFlipper自动播放
  41. viewFilper.setFlipInterval(4000); //间隔为4S
  42. if(viewFilper.isAutoStart()&&viewFilper.isFlipping()){
  43. viewFilper.startFlipping();
  44. }
  45. if(viewFilper.getDisplayedChild()!=0){
  46. viewFilper.setInAnimation(AnimationUtils.loadAnimation(
  47. mContext, R.anim.m_push_up_in));   //进出动画
  48. viewFilper.setOutAnimation(AnimationUtils.loadAnimation(
  49. mContext, R.anim.m_push_up_out));
  50. }
  51. viewFilper.setOnFacousChangedListener(new FlipperFacousChangedListener() {
  52. @Override  //实现监听接口
  53. public void onFliperChanged(int index) {
  54. // TODO Auto-generated method stub
  55. for(int i=0;i<mImageView.length;i++){
  56. if(i==index){
  57. mImageView[i].setImageResource(R.drawable.page_selected);
  58. }else{
  59. mImageView[i].setImageResource(R.drawable.page_normal);
  60. }
  61. }
  62. }
  63. });
  64. return mainLayout;
  65. }
  66. }

ViewFlipper实现带索引效果的自动播放也可手动滑动的广告栏相关推荐

  1. 自定义ViewFlipper实现带索引效果的自动播放广告栏

    前几天看到淘宝和易迅的客户端的广告栏做的不错,今天就尝试了一下,模仿着写了带指引的ViewFlipper.本文主要介绍指引栏的实现,论坛上关于ViewFlipper的使用和介绍很多,就不过多介绍. 效 ...

  2. 用jQuery实现轮播图效果（自动播放，能手动切换）

    大家好,今天我和大家分享一下轮播图的实现,下面是我做的轮播图效果 首先我们看到,它是由背景图片.方向图标和指示器组成.**我们发现背景图片.方向图标和指示器是层叠在一起的,所以布局时我们要用绝对定位. ...

  3. android首页图片轮播效果,Android_Android自动播放Banner图片轮播效果，先看一下效果图支持本地图 - phpStudy...

    Android自动播放Banner图片轮播效果 先看一下效果图 支持本地图片以及网络图片or本地网络混合. 使用方式: android:id="@+id/banner" andro ...

  4. android 滑动自动播放,Android仿新浪微博滑动播放视频

    最近突发奇想,想实现下 类似新浪微博 或者 qq空间,播放视频,所以就在git上边找了一下,若有侵权,请及时联系我,立马删除,谢谢 本文仿照新浪微博/QQ空间实现了滑动自动播放视频的功能.

  5. 网页中视频内容自动播放

    目前主流的浏览器中已经禁止带声音的媒体自动播放.具体内容在这里chrome自动播放策略(可能国内网络访问不了).此处重点是带声音的媒体自动播放. 里面也说明了集中播放的方式 静音播放.只要将video ...

  6. html背景音乐自动播放embed,怎样在网页中插入背景音乐(自动播放代码).doc

    怎样在网页中插入背景音乐 软件 Dreamweaver带浏览器的电脑 1 首先在网上下载一个Dreamweaver软件安装,当然使用其他的网站编程软件也可以. 2 打开软件界面如下. 3 选择&quo ...

  7. Firefox 66 将阻止自动播放音频和视频

    百度智能云 云生态狂欢季 热门云产品1折起>>>   当我们点击一个链接,或者打开新的浏览器选项卡时,浏览器就开始自动播放视频和声音,这是一件十分烦人的事.Chrome 浏览器早已对 ...

  8. audio音频不能自动播放的解决方法

    由于浏览器限制的原因,不允许自动播放audio音频,尝试网上的方法后也没有进展(如果有解决方法,欢迎评论~) 一.首先创建 audio 标签 <audio class="g-back- ...

  9. ppt手动放映怎么设置_为什么ppt已经设置了手动放映还是自动播放呢

    在切换选项那里看看是不是选上了按时间切换,另外录制排练那里也不要选上. 本回答被网友采纳 你要把定时切换的那个地方的对勾取消. 原因:在勾选"点击播放"的同时也点击设置了自动播放时 ...

最新文章

  1. CSS漂亮盒子（上）
  2. php html标签自定义属性,详解H5的自定义属性data-*
  3. laravel5.4根据数据表生成迁移文件
  4. Centos7等保三级检查命令
  5. 【mybatis】学习笔记之conf.xml与mapper.xml配置
  6. 【转】webservice 测试地址
  7. new函数的使用方法
  8. excel使用教程_如何系统地学习Excel？
  9. 用BeautifulSoup爬取豆瓣妹子的图片
  10. Powershell添加英文输入法
  11. 2020版熊猫金币解读及购买方式
  12. 官方活动｜最高可免费领60天会员时长
  13. 男人还是学点一技之长最靠谱
  14. 八百元八核的服务器？二手服务器（工作站）搭建指南（下）
  15. BAT大厂面试题以及答案(一)
  16. MDK中自动添加程序编译日期版本
  17. 存储格式在Hive的应用
  18. kaggle竞赛 | 计算机视觉 | Doodle Recognition Challenge
  19. sql server2008处理笛卡儿积的逻辑——记一次解决疑惑
  20. Pygame 官方文档 - pygame.mouse

热门文章

  1. 杰奇小说系统百度地图生成插件
  2. 关于NC6.X企业报表取不了数的问题及其解决方法。
  3. 用网络求t图的几篇论文框架图
  4. 爱征信，就是爱自己 | 个人征信怎么查？攻略在这里！
  5. python输入复数_如何在Python中作为用户输入获取复数？
  6. Learn English with M / 学习英语的十句经典名言
  7. TFTP协议解析及C/C++代码实现
  8. 几万年前，孙悟空大闹地府后删库跑路了！那阎王生死簿又该怎么写呢？
  9. 计算几何入门 1.3：凸包的构造——增量构造法
  10. PHP字符串函数strlen(获取字符串长度)