• UID1
  • 登录2016-01-24
  • 粉丝579
  • 关注562
  • 发帖64
  • 主页
  • 金币202096枚
原创写手
社区居民
admin 发布于2015-08-06 09:22
3/2587

Android图片轮播解决方案

楼层直达
移动开发之实现图片轮播效果(附:demo)

前天发了一篇比较轻松愉快的文章,后台就有人发消息问我了,这是技术分享吗?我可以负责任的说,我们这个号不仅分享技术,也分享与程序员有关的幽默搞笑的文章,包括从程序员的角度去吐槽的文章,在工作压力这么大的情况,希望可以帮助程序员提高技术的同时,也可以宣泄压力,放松精神。让大家生活的更加美好。这不,我承诺的技术文章来了!
导语:前天发了一篇比较轻松愉快的文章,后台就有人发消息问我了,这是技术分享吗?我可以负责任的说,我们这个号不仅分享技术,也分享与程序员有关的幽默搞笑的文章,包括从程序员的角度去吐槽的文章,在工作压力这么大的情况,希望可以帮助程序员提高技术的同时,也可以宣泄压力,放松精神。让大家生活的更加美好。这不,我承诺的技术文章来了!


我记得一周前有人在程序员交流群里问过,有没有图片轮播的demo,当时我说自己试着去写写,一周后我再写个demo,分享给大家。今天我就是来兑现承诺了。其实在公众号后台和群里发消息的人很多,提问题的也很多,我都尽量去看,有时间和有能力我会尽量回复,和写一些有关的技术分享,争取能够帮助到大家。


对于图片轮播实现方法,各种各样,今天我分享一下我的实现思路,我是用的ViewFlipper控件,重写了里面的方法,增加了手势判断,既可以做到自动轮播,也可以使用手势左右滑动轮播,效果应该还是可以的。因为写的着急,可能注释少,但是相对来说还是很简单的。废话不多说了,直接上代码。


效果图如下:



第一步:重写ViewFlipper
这里的重写主要是重写ViewFlipper里的两个方法,分别是showNext()showPrevious(),重写这两个方法的目的是在判断手势滑动的时候,调用这里的方法。我们在重写的时候,也定义了一个回调的接口,OnViewFlipperChangeState,在ViewFlipper中重写的方法中调用接口里的方法,进行回调,并处理图片集合或数组里的图片,从而实现了循环轮播。


代码如下:

public class AdViewFlipper extends ViewFlipper {    
    private OnViewFlipperChangeState listener;    
    public AdViewFlipper(Context context, AttributeSet attrs) {              super(context, attrs);
    }    
    public AdViewFlipper(Context context) {        
        super(context);
    }
    @Override    public void showNext() {        
        super.showNext();        
        if (listener != null)
            listener.changeNext();
    }    
    @Override    public void showPrevious() {        
        super.showPrevious();        
        if (listener != null)
            listener.changePre();
    }    
    public interface OnViewFlipperChangeState {        
        void changePre();        
        void changeNext();
    }    
    public void setOnViewFlipperChangeState(OnViewFlipperChangeState listener) {        
        this.listener = listener;
    }
}

第二步:在Activity中实现定义的接口,并实现OnGestureListener和OnTouchListener接口来判断手势。


代码如下:

public class MainActivity extends Activity implements OnGestureListener, OnTouchListener, OnViewFlipperChangeState {    
    private LinearLayout adPointLayout;    
    private AdViewFlipper adVf;    
    private ImageView[] pointIvs;    
    private int adIndex = 0;    
    private GestureDetector detector;    
    private String[] strs = new String[6];    
    @Override    protected void onCreate(Bundle savedInstanceState) {        
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
 
        adPointLayout = (LinearLayout) findViewById(R.id.ad_point_layout);
        adVf = (AdViewFlipper) findViewById(R.id.ad_view_flipper);
        adVf.setOnTouchListener(this);
        adVf.setFlipInterval(5000);
        adVf.setLongClickable(true);// 设置长按事件        adVf.setAutoStart(true);// 设置是否自动播放,默认不自动播放        detector = new GestureDetector(this);
 
        setBanner();
        adVf.setInAnimation(AnimationUtils.loadAnimation(this,
                R.anim.push_left_in));
        adVf.setOutAnimation(AnimationUtils.loadAnimation(this,
                R.anim.push_left_out));
        adVf.showNext();// 向右滑动    }    
    private void setBanner() {
        adVf.removeAllViews();
        pointIvs = new ImageView[strs.length];
        adPointLayout.removeAllViews();
        setAdPoints();
        adVf.setOnViewFlipperChangeState(this);        
        for (int i = 0; i < strs.length; i++) {            //这里从我们获得的图片数组或者集合中传入获取的图片链接,这里我就传null了。            adVf.addView(getImageView(null));
        }
    }    
    private void setAdPoints() {        
        for (int i = 0; i < pointIvs.length; i++) {
            pointIvs = new ImageView(this);            
            if (i == 0) {
                pointIvs.setImageResource(R.drawable.ad_point_pressed);
            } else {
                pointIvs.setImageResource(R.drawable.ad_point_normal);
            }
            LinearLayout.LayoutParams pointIvParams = new LinearLayout.LayoutParams(
                    LinearLayout.LayoutParams.WRAP_CONTENT,
                    LinearLayout.LayoutParams.WRAP_CONTENT);
            pointIvParams.setMargins(10, 0, 0, 0);
            pointIvs.setLayoutParams(pointIvParams);
            adPointLayout.addView(pointIvs);
        }
    }    
    private ImageView getImageView(String url) {
        ImageView imageView = new ImageView(this);
        imageView.setScaleType(ScaleType.CENTER_CROP);
        imageView.setLayoutParams(new LayoutParams(
                LinearLayout.LayoutParams.FILL_PARENT,
                LinearLayout.LayoutParams.WRAP_CONTENT));
        imageView.setImageResource(R.drawable.test);        return imageView;
    }    
     
    @Override    public void changePre() {        
        if (adIndex > 0) {
            adIndex--;
        } else {
            adIndex = pointIvs.length - 1;
        }        
        for (int i = 0; i < pointIvs.length; i++) {            
            if (adIndex == i) {
                pointIvs.setImageResource(R.drawable.ad_point_pressed);
            } else {
                pointIvs.setImageResource(R.drawable.ad_point_normal);
            }
 
        }
 
    }
    @Override    public void changeNext() {        
        if (adIndex < pointIvs.length - 1) {
            adIndex++;
        } else {
            adIndex = 0;
        }        for (int i = 0; i < pointIvs.length; i++) {                if (adIndex == i) {
                pointIvs.setImageResource(R.drawable.ad_point_pressed);
            } else {
                pointIvs.setImageResource(R.drawable.ad_point_normal);
            }
 
        }
 
    }    
        @Override    public boolean onTouch(View v, MotionEvent event) {        
        return detector.onTouchEvent(event);
    }    
        @Override    public boolean onDown(MotionEvent arg0) {        
        return false;
    }    
        @Override    public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,float velocityY) {        
        if (e1.getX() - e2.getX() > 120) {
            adVf.setInAnimation(AnimationUtils.loadAnimation(this,
                    R.anim.push_left_in));
            adVf.setOutAnimation(AnimationUtils.loadAnimation(this,
                    R.anim.push_left_out));
            adVf.showNext();// 向右滑动            return true;
        } else if (e1.getX() - e2.getX() < -120) {
            adVf.setInAnimation(AnimationUtils.loadAnimation(this,
                    R.anim.push_right_in));
            adVf.setOutAnimation(AnimationUtils.loadAnimation(this,
                    R.anim.push_right_out));
            adVf.showPrevious();// 向左滑动            return true;
        }        return false;
    }    
        @Override    public void onLongPress(MotionEvent arg0) {
 
    }    
        @Override    public boolean onScroll(MotionEvent arg0, MotionEvent arg1, float arg2,            float arg3) {        return false;
    }    
        @Override    public void onShowPress(MotionEvent arg0) {
 
    }    
        @Override    public boolean onSingleTapUp(MotionEvent arg0) {       
         return false;
    }
 
}

第三步:要想有轮播滑动的动画效果,我们就得写一个anim的文件,从而才会有这种效果。


代码如下:

1、push_left_in.xml
 
<?xml version="1.0" encoding="utf-8"?>     <set xmlns:android="http://schemas.android.com/apk/res/android">    
    <translate    
    android:fromXDelta="100%p"     
    android:toXDelta="0"     
    android:duration="500"/>    
    <alpha    
    android:fromAlpha="0.0"     
    android:toAlpha="1.0"   
    android:duration="500" />     </set>
2、push_left_out.xml
 
 
<?xml version="1.0" encoding="utf-8"?>     <set xmlns:android="http://schemas.android.com/apk/res/android">    
    <translate    
    android:fromXDelta="0"     
    android:toXDelta="-100%p"     
    android:duration="500"/>    
    <alpha    
    android:fromAlpha="1.0"     
    android:toAlpha="0.0"     
    android:duration="500" />    </set>
3、push_right_in.xml
 
<?xml version="1.0" encoding="utf-8"?>    <set xmlns:android="http://schemas.android.com/apk/res/android">     
    <translate      
    android:fromXDelta="-100%p"       
    android:toXDelta="0"       
    android:duration="500"/>      
    <alpha      
    android:fromAlpha="0.0"       
    android:toAlpha="1.0"       
    android:duration="500" />       </set>
4、push_right_out.xml
 
<?xml version="1.0" encoding="utf-8"?>       <set xmlns:android="http://schemas.android.com/apk/res/android">      
    <translate      
    android:fromXDelta="0"       
    android:toXDelta="100%p"       
    android:duration="500"/>      
    <alpha      
    android:fromAlpha="1.0"       
    android:toAlpha="1.0"     
    android:duration="500" />       </set>

到这里基本就完事了,其实很简单,谁有更好的实现方法,欢迎大家共享出来,一起共同学习进步。获取demo的方式跟以前一样,只需要在公众号内回复关键字“图片轮播”即可。


原文来自:http://www.codernote.top/blog/info/10

0人打赏
  • UID1999
  • 登录2015-12-28
  • 粉丝0
  • 关注0
  • 发帖6
  • 主页
  • 金币13枚
Ice™♪ 发布于2015-12-28 14:47
沙发F
在那?
  • UID7132
  • 登录2016-03-04
  • 粉丝0
  • 关注0
  • 发帖2
  • 主页
  • 金币16枚
RainhowChan 发布于2016-02-19 23:04
板凳F
  • UID80
  • 登录2017-12-11
  • 粉丝64
  • 关注21
  • 发帖1124
  • 主页
  • 金币6515枚
社区居民
忠实会员
原创写手
潇潇宇 发布于2016-03-03 15:50
地板F
Ice™♪:在那?回到原帖
已经有了
您需要登录后才可以回帖
发表回复
极贡献
技术问答
专题荟萃
程序人生
视觉设计
Android开发
iOS开发
编程语言
前端开发
后端开发
服务器架构
软件测试
运维方案
创业路上



最热文章墙

  • 80595/379   【精品推荐】200多种Android动画效果的强悍框架,太全了,不看这个,再有动画的问题,不理你了^@^

  • 45812/191   情人节福利,程序员表白的正确姿势:改几行代码就变成自己的表白了

  • 45498/0   Python爬虫:常用浏览器的useragent

  • 42020/261   【精品推荐】Android版产品级的音乐播放器源码,功能太强大了,最好的产品原型有木有?

  • 39013/145   省时省力的Android组件群来了,非常棒的原型参考

  • 30470/143   2016抢红包软件及源码

  • 29532/71   原创表白APP,以程序员的姿势备战新年后的7夕,持续完善中!

  • 29454/2   超全!整理常用的iOS第三方资源

  • 24785/161   Android版类似UC浏览器:非常赞,产品级的源码

  • 23029/31   麻省理工的一帮疯子,真的实现了随意操控万物!(绝对黑科技)

  • 22730/26   Android工程师面试题大全

  • 22693/27   2016程序员跳槽全攻略

  • 22063/10   GitHub上排名前50的iOS项目:总有一款你用得着

  • 21063/21   码魂:程序员的牛B漫画

  • 19283/74   【持续更新中】Android福利贴(二):资料源码大放送

  • 19282/85   Android小而全的博客源码:非常适合全面掌握开发技巧

  • 19145/43   一个绚丽的loading动效分析与实现!

  • 19103/10   2016年最全的Android面试考题+答案 精编版

  • 18867/3   吐槽那些程序员的搞笑牛逼注释

  • 17851/45   惊艳的App引导页:背景图片切换加各个页面动画效果

  • 17752/104   Android带弹幕的视频播放器源码,来自大名鼎鼎的Bilibili弹幕网站

  • 17732/1   iOS 动画总结

  • 17716/82   仿京东商城客户端Android最新版,不错的原型和学习资料

  • 17366/25   个人收集的Android 各类功能源代码

  • 16890/5   新一代Android渠道打包工具:1000个渠道包只需要5秒

  • 16846/22   Android福利第三波【Android电子书】

  • 16660/1   iOS中文版资源库,非常全

  • 16651/81   【精品推荐】类似360安全卫士安Android源码:非常赞的产品原型

  • 16615/54   基于瀑布流的美女图片浏览App,有注释的源代码

  • 16491/18   用JavaScript 来开发iOS和Android 原生应用:React Native开源框架中文版来啦

  • 16484/10   女程序员的梦,众网友的神回复

  • 16187/23   珍藏多年的素材,灵感搜寻网站

  • 16187/11   年会上现场review代码是怎么样的体验!

  • 15792/19   65条最常用正则表达式,你要的都在这里了

  • 14980/16   基于Android支付宝支付设计和开发方案

  • 14391/11   有木有这样一张酷图帮你集齐所有git命令超实用

  • 14313/18   什么是真正的黑客:收获12200+Stars,人气远超微软开源VS

  • 14131/47   在线音乐播放器完整版(商用级的源码):非常赞,可听免费高品质专辑

  • 13929/62   【技巧一】搭配Android Studio,如何实现App远程真机debug?

  • 13815/0   GitHub iOS 库和框架Top100 

  • 13659/7   用程序员的姿势抢过年的火车票

  • 13626/7   一张图搞定iOS学习路线,非常全面

  • 13260/10   成为Java顶尖程序员 ,看这11本书就够了

  • 13220/10   微信支付终于成功了(安卓,iOS),在此分享

  • 13102/18   一张图搞定Android学习路线,非常全面

  • 12954/29   【持续更新中】Android福利贴(一):资料源码

  • 12858/4   基于Node.js的强大爬虫,能直接发布抓取的文章哦

  • 12663/4   46 个非常有用的 PHP 代码片段

  • 12132/3   即时通信第三方库

  • 11558/9   流媒体视频直播方案

  • 11512/18   八个最优秀的Android Studio插件

  • 11366/9   B站建开源工作组:APP想支持炫酷弹幕的看过来

  • 11193/2   【精品推荐】高质量PHP代码的50个实用技巧:非常值得收藏

  • 11137/9   烧了5亿美金,这家神秘的公司即将颠覆人类未来!

  • 11064/12   中国黑客的隐秘江湖:攻守对立,顶尖高手月入千万美元

  • 10503/1   基于node-webkit跨平台应用案例集之(一)

  • 10315/6   开箱即用!Android四款系统架构工具

  • 10113/11   十大技巧快速提升Android应用开发性能

  • 10098/4   10款GitHub上最火爆的国产开源项目——可以媲美西半球

  • 10055/2   Android性能优化视频,文档以及工具

  • 返回顶部