一.概述

在現在的Android專案中，首頁圖片輪播是隨處可見的，今天我們看看如何實現,先看效果圖：

二.實現

先給大家看看最簡單的佈局檔案

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    >
    <FrameLayout
        android:layout_width
 
="match_parent"
        android:layout_height="300dp">
        <android.support.v4.view.ViewPager
            android:id="@+id/viewpager"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            />
        <RadioGroup
            android:id
 
="@+id/group"
            android:layout_gravity="center_horizontal|bottom"
            android:layout_width="wrap_content"
            android:layout_marginBottom="10dp"
            android:orientation="horizontal"
            android:layout_height="wrap_content">
        </RadioGroup>
    </FrameLayout
 
>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:gravity="center"
        >
        <Button
            android:id="@+id/start"
            android:layout_width="wrap_content"
            android:onClick="click"
            android:text="開始自動輪播"
            android:layout_height="wrap_content" />
        <Button
            android:id="@+id/stop"
            android:layout_width="wrap_content"
            android:onClick="click"
            android:text="停止自動輪播"
            android:layout_height="wrap_content" />
    </LinearLayout>
</LinearLayout>

上面一個FrameLayout包裹著一個ViewPager和一個RadioGroup,注意這個RadioGroup我們還沒有為其新增按鈕，因為我們的按鈕的個數是根據圖片個數確定的，我們不知道圖片有多少張，因為實際專案中圖片都是從伺服器獲取來的。最下面是兩個按鈕，用於控制是否自動輪播。

接下來我們看看按鈕的樣式，這裡的按鈕我們使用了ImageView，背景我們使用了選擇器。
當你要為一個圖片設定選擇器作為背景的話，使用下面的程式碼：

 imageview.setImageResource(R.drawable.rg_selector);

我們來看看這個選擇器是如何寫的，

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_enabled="false" android:drawable="@drawable/rb_default"/>
    <item android:state_enabled="true" android:drawable="@drawable/rb_select"/>
</selector>

這裡我們設定了按鈕選中和沒有選中時的樣式，下面我們看看分別是如何定義的：

//選中時樣式rb_default
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval"
    >
    <solid android:color="@android:color/holo_blue_bright"/>
   <size android:height="20dp" android:width="20dp"/>
</shape>

//未選中樣式rb_select
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval"
    >
    <solid android:color="@android:color/white"/>
    <size android:height="20dp" android:width="20dp"/>
</shape>

和xml佈局檔案有關的我們就介紹完了，下面看看java程式碼如何實現：

public class MainActivity extends Activity {
    private ViewPager viewPager;
    private RadioGroup group;
    //圖片資源
    private int[] imageIds = {R.drawable.ym1,R.drawable.ym2,R.drawable.ym3,R.drawable.ym4};
    //存放圖片的陣列
    private List<ImageView> mList;
    //當前索引位置以及上一個索引位置
    private int index = 0,preIndex = 0;
    //是否需要輪播標誌
    private boolean isContinue = true;
    //定時器，用於實現輪播
    private Timer timer;
     Handler mHandler  = new Handler(){
        @Override
        public void handleMessage(Message msg) {
            super.handleMessage(msg);
            switch (msg.what){
                case 1:
                    index++;
                    System.out.println("==========index: "+index);
                        viewPager.setCurrentItem(index);
                    }
            }
    };
    private Button btnStart;
    private Button btnStop;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        viewPager = (ViewPager) findViewById(R.id.viewpager);
        group = (RadioGroup) findViewById(R.id.group);
        mList = new ArrayList<>();
        viewPager.setAdapter(pagerAdapter);
        viewPager.addOnPageChangeListener(onPageChangeListener);
        viewPager.setOnTouchListener(onTouchListener);
        btnStart = (Button) findViewById(R.id.start);
        btnStop = (Button) findViewById(R.id.stop);
        initRadioButton(imageIds.length);
        btnStop.setEnabled(false);
    }
    public void click(View view){
        switch (view.getId()){
            case R.id.start:
                timer = new Timer();//建立Timer物件
                //執行定時任務
                timer.schedule(new TimerTask() {
                    @Override
                    public void run() {
                        //首先判斷是否需要輪播，是的話我們才發訊息
                        if (isContinue) {
                            mHandler.sendEmptyMessage(1);
                        }
                    }
                },2000,2000);//延遲2秒，每隔2秒發一次訊息
                btnStart.setEnabled(false);
                btnStop.setEnabled(true);
                break;
            case R.id.stop:
                timer.cancel();
                btnStart.setEnabled(true);
                btnStop.setEnabled(false);
                break;
        }
    }

    /**
     * 根據圖片個數初始化按鈕
     * @param length
     */
    private void initRadioButton(int length) {
        for(int i = 0;i<length;i++){
            ImageView imageview = new ImageView(this);
            imageview.setImageResource(R.drawable.rg_selector);//設定背景選擇器
            imageview.setPadding(20,0,0,0);//設定每個按鈕之間的間距
            //將按鈕依次新增到RadioGroup中
            group.addView(imageview, ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
            //預設選中第一個按鈕，因為預設顯示第一張圖片
            group.getChildAt(0).setEnabled(false);
        }
    }

    /**
     * 根據當前觸控事件判斷是否要輪播
     */
    View.OnTouchListener onTouchListener  = new View.OnTouchListener() {
        @Override
        public boolean onTouch(View v, MotionEvent event) {
            switch (event.getAction()){
                //手指按下和划動的時候停止圖片的輪播
                case MotionEvent.ACTION_DOWN:
                case MotionEvent.ACTION_MOVE:
                    isContinue = false;
                    break;
                default:
                    isContinue = true;
            }
            return false;
        }
    };
    /**
     *根據當前選中的頁面設定按鈕的選中
     */
    ViewPager.OnPageChangeListener onPageChangeListener = new ViewPager.OnPageChangeListener() {
        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
        }
        @Override
        public void onPageSelected(int position) {
           index = position;//當前位置賦值給索引
            setCurrentDot(index%imageIds.length);
        }
        @Override
        public void onPageScrollStateChanged(int state) {

        }
    };

    /**
     * 設定對應位置按鈕的狀態
     * @param i 當前位置
     */
    private void setCurrentDot(int i) {
        if(group.getChildAt(i)!=null){
            group.getChildAt(i).setEnabled(false);//當前按鈕選中
        }
        if(group.getChildAt(preIndex)!=null){
            group.getChildAt(preIndex).setEnabled(true);//上一個取消選中
            preIndex = i;//當前位置變為上一個，繼續下次輪播
        }
    }
    PagerAdapter pagerAdapter = new PagerAdapter() {
        @Override
        public int getCount() {
            //返回一個比較大的值，目的是為了實現無限輪播
            return Integer.MAX_VALUE;
        }

        @Override
        public boolean isViewFromObject(View view, Object object) {
            return view==object;
        }

        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            position = position%imageIds.length;
            ImageView imageView = new ImageView(MainActivity.this);
            imageView.setImageResource(imageIds[position]);
            imageView.setScaleType(ImageView.ScaleType.FIT_XY);
            container.addView(imageView);
            mList.add(imageView);
            return imageView;
        }
        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
            container.removeView(mList.get(position));
        }
    };
}

由於註釋寫的還是比較詳細的，我就不仔細講了，大家有不懂的地方可以給我留言。