移動開發之實現圖片輪播效果

時間 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>