专栏首页非著名程序员移动开发之实现图片轮播效果

移动开发之实现图片轮播效果

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

我记得一周前有人在程序员交流群里问过,有没有图片轮播的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[i] = new ImageView(this);            
            if (i == 0) {
                pointIvs[i].setImageResource(R.drawable.ad_point_pressed);
            } else {
                pointIvs[i].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[i].setLayoutParams(pointIvParams);
            adPointLayout.addView(pointIvs[i]);
        }
    }    
    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[i].setImageResource(R.drawable.ad_point_pressed);
            } else {
                pointIvs[i].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[i].setImageResource(R.drawable.ad_point_pressed);
            } else {
                pointIvs[i].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>

到这里基本就完事了,其实很简单,谁有更好的实现方法,欢迎大家共享出来,一起共同学习进步。

本文分享自微信公众号 - 非著名程序员(non-famous-coder),作者:loonggg

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2016-01-31

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Android自定义下拉刷新动画--仿百度外卖下拉刷新

    ? 好久没写博客了,小编之前一段时间一直在找工作,从天津来到了我们的大帝都,感觉还不错。好了废话不多说了,开始我们今天的主题吧。现如今的APP各式各样,同样也...

    非著名程序员
  • Android实现滑动刻度尺效果,选择身高体重和生日

    刻度尺效果虽然看起来很美,我个人认为很不实用,即使再不实用,也有用的,鉴于群里成员对我的苦苦哀求,我就分享一个他用不到的,横屏滑动刻度尺,因为他需要竖屏的,哈哈...

    非著名程序员
  • Android开发:最详细的 Toolbar 开发实践总结

    ? 最详细的 Toolbar 开发实践总结 过年前发了一篇介绍 Translucent System Bar 特性的文章 Translucent Syste...

    非著名程序员
  • 移动开发之实现图片轮播效果(附:demo)

    公众号:smart_android 作者:loonggg 点击“阅读原文”,可查看更多内容和干货

    咻咻ing
  • [android] 轮播图-滑动图片标题焦点

    在布局文件中,先添加<android.support.v4.view.ViewPager/>控件,这个只是轮播的区域

    陶士涵
  • C#-Xamarin的Android项目开发(一)——创建项目

    使用Xamarin开发安卓项目,首先需要安装VS2017以上版本。因为VS2017以上的版本,可以直接创建Xamarin项目。

    Kiba518
  • Android TextView 属性大全

    Android 中我们知道有一个使用频率非常高的控件,它就是 TextView,但是它的属性特别多,今天我们就来探究下,它都有哪些属性。

    IT大飞说
  • RecyclerView 实现gallery画廊效果

    1、RecyclerView的基本用法 首先主Activity的布局文件: <RelativeLayout xmlns:android="http://sc...

    xiangzhihong
  • 运行时权限

    我们在夸数据共享的时候,遇到危险的权限时候系统会让我们进行是否授权,只有我们授权了才能使用这些权限.比如拨号(可能引起收费的敏感权限)等,这里我们来演示一下调用...

    Dream城堡
  • Android DataBinding 从入门到进阶(2)

    半年多前写了一篇:Android DataBinding 从入门到进阶 的文章,最近发现里面有些小错误,就修改了下文章,并且增添了几个 DataBinding ...

    叶应是叶

扫码关注云+社区

领取腾讯云代金券