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

时间 2021-08-12

标签 android 程序员数组 app ide 学习动画 this url spa 栏目无线繁體版

原文原文链接

导语：前天发了一篇比较轻松愉快的文章，后台就有人发消息问我了，这是技术分享吗？我能够负责任的说，咱们这个号不只分享技术，也分享与程序员有关的幽默搞笑的文章，包括从程序员的角度去吐槽的文章，在工做压力这么大的状况，但愿能够帮助程序员提升技术的同时，也能够宣泄压力，放松精神。让你们生活的更加美好。这不，我承诺的技术文章来了！android

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

对于图片轮播实现方法，各类各样，今天我分享一下个人实现思路，我是用的ViewFlipper控件，重写了里面的方法，增长了手势判断，既能够作到自动轮播，也可使用手势左右滑动轮播，效果应该仍是能够的。由于写的着急，可能注释少，可是相对来讲仍是很简单的。废话很少说了，直接上代码。数组

效果图以下：app

第一步：重写ViewFlipperide

这里的重写主要是重写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接口来判断手势。this

代码以下：url

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的文件，从而才会有这种效果。
spa

代码以下：

一、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>

二、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>

三、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>

四、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的方式跟之前同样，只须要在公众号内回复关键字“图片轮播”便可。

另：

立刻春节了，相信不少人都归心似箭，在外奔波忙碌了一年，回家多陪陪家人父母，顺便好好放松玩玩吧，毕竟程序员太累，压力太大。注意：不要饮食不规律，胡吃海喝，假期最重要的是快乐。