【Android UI】ViewFlipper实现广告轮播图

江湖老规矩，先看示例图

1、为ViewFlipper实现切换监听器

public class BlueViewFlipper extends ViewFlipper {

    private OnDisplayChangedListener mListener;

    public BlueViewFlipper(Context context) {
        super(context);
    }

    public BlueViewFlipper(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public void setOnDisplayChagnedListener(OnDisplayChangedListener listener) {
        if (mListener != listener) {
            this.mListener = listener;
        }
    }

    @Override
    public void showNext() {
        super.showNext();
        if(mListener != null){
            mListener.OnDisplayChildChanging(this, super.getDisplayedChild());
        }
    }

    @Override
    public void showPrevious() {
        super.showPrevious();
        if(mListener != null){
            mListener.OnDisplayChildChanging(this, super.getDisplayedChild());
        }
    }

    public interface OnDisplayChangedListener {
        void OnDisplayChildChanging(ViewFlipper view, int index);
    }
}

2、MainActivity.java

public class MainActivity extends ActionBarActivity {

    private BlueViewFlipper viewFlipper;
    private float startX;
    //定时任务
    private ScheduledExecutorService executorService;
    private LinearLayout dotLL;
    private ImageView dotIV;
    private List<ImageView> ivs;

    private Handler mHandler = new Handler() {
        @Override
        public void handleMessage(Message msg) {
            super.handleMessage(msg);
            viewFlipper.setInAnimation(MainActivity.this, R.anim.in_from_right);
            viewFlipper.setOutAnimation(MainActivity.this, R.anim.out_from_left);
            viewFlipper.showPrevious();

        }
    };

    public MainActivity() {
    }

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        init();
        setListener();

        startPlay();
    }

    private void startPlay(){
        executorService = Executors.newSingleThreadScheduledExecutor();
        executorService.scheduleAtFixedRate(new SlideShowTask(), 1, 3, TimeUnit.SECONDS);
    }

    private void stopPlay(){
        executorService.shutdown();
    }

    private void init() {
        this.viewFlipper = (BlueViewFlipper) this.findViewById(R.id.viewFlipper);
        this.dotIV = (ImageView) this.findViewById(R.id.dotIV);
        this.dotLL = (LinearLayout) this.findViewById(R.id.dotLL);
        ViewGroup.LayoutParams layoutParams = this.dotIV.getLayoutParams();
        this.ivs = new ArrayList<>();
        this.dotLL.removeAllViews();
        for(int i=0; i<viewFlipper.getChildCount(); i++) {
            ImageView iv = new ImageView(this);
            iv.setLayoutParams(layoutParams);
            if(i==0) {
                iv.setImageResource(R.drawable.dot_focus);
            }else {
                iv.setImageResource(R.drawable.dot_default);
            }
            ivs.add(iv);
            this.dotLL.addView(iv);
        }
    }

    public void enterApp(View view) {
        Toast.makeText(this, "Enter APP", Toast.LENGTH_SHORT).show();
    }

    private void setListener() {
        viewFlipper.setOnTouchListener(new View.OnTouchListener() {
            @Override
            public boolean onTouch(View v, MotionEvent event) {
                switch (event.getAction()) {
                    case MotionEvent.ACTION_DOWN:
                        startX = event.getX();
                        stopPlay();
                        break;
                    case MotionEvent.ACTION_UP:
                        startPlay();
                        if(event.getX() > startX) {
                            viewFlipper.setInAnimation(MainActivity.this, R.anim.in_from_left);
                            viewFlipper.setOutAnimation(MainActivity.this, R.anim.out_from_right);
                            viewFlipper.showNext();
                        }else if(event.getX() < startX) {
                            viewFlipper.setInAnimation(MainActivity.this, R.anim.in_from_right);
                            viewFlipper.setOutAnimation(MainActivity.this, R.anim.out_from_left);
                            viewFlipper.showPrevious();
                        }
                        break;
                }
                return true;
            }
        });
        viewFlipper.setOnDisplayChagnedListener(new BlueViewFlipper.OnDisplayChangedListener() {
            @Override
            public void OnDisplayChildChanging(ViewFlipper view, int index) {
                Log.i("Blue", "Current Item: " + index + "");
                for(int i = 0; i < ivs.size(); i++) {
                    if((ivs.size() - i - 1) == index) {
                        ivs.get(i).setImageResource(R.drawable.dot_focus);
                    }else {
                        ivs.get(i).setImageResource(R.drawable.dot_default);
                    }
                }

            }
        });
    }
    
    private class SlideShowTask implements Runnable{
        @Override
        public void run() {
            // TODO Auto-generated method stub
            synchronized (viewFlipper) {
                mHandler.obtainMessage().sendToTarget();
            }
        }

    }
}

3、activity_main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <com.gigaset.viewflipper.widgets.BlueViewFlipper
            android:id="@+id/viewFlipper"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" >

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:src="@drawable/header01"
                android:scaleType="fitXY"/>

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:src="@drawable/header02"
                android:scaleType="fitXY"/>

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:src="@drawable/header03"
                android:scaleType="fitXY"/>

        </com.gigaset.viewflipper.widgets.BlueViewFlipper>

        <LinearLayout
            android:id="@+id/dotLL"
            android:layout_width="match_parent"
            android:layout_height="30dp"
            android:background="#99666666"
            android:orientation="horizontal"
            android:layout_gravity="bottom"
            android:gravity="center">

            <ImageView
                android:id="@+id/dotIV"
                android:layout_width="10dp"
                android:layout_height="10dp"
                android:layout_marginLeft="5dp"
                android:layout_marginRight="5dp"
                android:src="@drawable/dot_focus"/>

        </LinearLayout>

    </FrameLayout>

</LinearLayout>