Android圖片滾動，加入自動播放功能，使用自定義屬性實現，霸氣十足！

轉自： http://blog.csdn.net/guolin_blog/article/details/8796877

轉載請註明出處：http://blog.csdn.net/guolin_blog/article/details/8796877

大家好，記得上次我帶着大家一起實現了一個類似與淘寶客戶端中帶有的圖片滾動播放器的效果，但是在做完了之後，發現忘了加入圖片自動播放的功能(或許是我有意忘記加的.....)，結果圖片只能通過手指滑動來播放。於是今天我將再次帶領大家，添加上之前遺漏的功能，讓我們的圖片播放器更加完善。

這次的程序開發將完全基於上一次的代碼，如果有朋友還未看過上篇文章，請先閱讀 Android實現圖片滾動控件，含頁籤功能，讓你的應用像淘寶一樣炫起來 。

既然是要加入自動播放的功能，那麼就有一個非常重要的問題需要考慮。如果當前已經滾動到了最後一張圖片，應該怎麼辦？由於我們目前的實現方案是，所有的圖片都按照佈局文件裏面定義的順序橫向排列，然後通過偏移第一個圖片的leftMargin，來決定顯示哪一張圖片。因此當圖片滾動在最後一張時，我們可以讓程序迅速地回滾到第一張圖片，然後從頭開始滾動。這種效果和淘寶客戶端是有一定差異的(淘寶並沒有回滾機制，而是很自然地由最後一張圖片滾動到第一張圖片)，我也研究過淘寶圖片滾動器的實現方法，並不難實現。但是由於我們是基於上次的代碼進行開發的，方案上無法實現和淘寶客戶端一樣的效果，因此這裏也就不追求和它完全一致了，各有風格也挺好的。

好了，現在開始實現功能，首先是打開SlidingSwitcherView，在裏面加入一個新的AsyncTask，專門用於回滾到第一張圖片：

class ScrollToFirstItemTask extends AsyncTask<Integer, Integer, Integer> {

    @Override
    protected Integer doInBackground(Integer... speed) {
        int leftMargin = firstItemParams.leftMargin;
        while (true) {
            leftMargin = leftMargin + speed[0];
            // 當leftMargin大於0時，說明已經滾動到了第一個元素，跳出循環
            if (leftMargin > 0) {
                leftMargin = 0;
                break;
            }
            publishProgress(leftMargin);
            sleep(20);
        }
        return leftMargin;
    }

    @Override
    protected void onProgressUpdate(Integer... leftMargin) {
        firstItemParams.leftMargin = leftMargin[0];
        firstItem.setLayoutParams(firstItemParams);
    }

    @Override
    protected void onPostExecute(Integer leftMargin) {
        firstItemParams.leftMargin = leftMargin;
        firstItem.setLayoutParams(firstItemParams);
    }

}

然後在SlidingSwitcherView裏面加入一個新的方法：

/**
 * 滾動到第一個元素。
 */
public void scrollToFirstItem() {
    new ScrollToFirstItemTask().execute(20 * itemsCount);
}

這個方法非常簡單，就是啓動了我們新增的ScrollToFirstItemTask，滾動速度設定爲20 * itemsCount，這樣當我們需要滾動的圖片數量越多，回滾速度就會越快。定義好這個方法後，只要在任意地方調用scrollToFirstItem這個方法，就可以立刻從當前圖片回滾到第一張圖片了。

OK，然後我們要定義一個方法用於啓動自動播放功能。仍然是在SlidingSwitcherView中新增如下代碼：

/**
 * 用於在定時器當中操作UI界面。
 */
private Handler handler = new Handler();

/**
 * 開啓圖片自動播放功能，當滾動到最後一張圖片的時候，會自動回滾到第一張圖片。
 */
public void startAutoPlay() {
    new Timer().scheduleAtFixedRate(new TimerTask() {
        @Override
        public void run() {
            if (currentItemIndex == itemsCount - 1) {
                currentItemIndex = 0;
                handler.post(new Runnable() {
                    @Override
                    public void run() {
                        scrollToFirstItem();
                        refreshDotsLayout();
                    }
                });
            } else {
                currentItemIndex++;
                handler.post(new Runnable() {
                    @Override
                    public void run() {
                        scrollToNext();
                        refreshDotsLayout();
                    }
                });
            }
        }
    }, 3000, 3000);
}

我們可以看到，這個方法裏啓用了一個定時器，每隔三秒就會執行一次。然後在定時器的執行邏輯裏面進行判斷當前圖片是否是最後一張，如果不是最後一張就滾動到下一張圖片，如果是最後一張就回滾到第一張圖片。其中需要注意，定時器中的代碼是在子線程中運行的，而滾動圖片操作和更新頁籤操作都是UI操作，因此需要放到Handler中去執行。

之後只要在Activity創建的時候去調用SlidingSwitcherView的startAutoPlay方法，自動播放功能就實現了！！

結束了？Naive!!  如果就這麼結束了，怎麼對得起大家的期待，如此簡單的功能還要用一篇文章來講簡直是弱爆了。

接下來纔是今天的重點，我們要使用自定義屬性來啓用自動播放功能，這樣才能讓你更加接近高手，才能讓你更加玩轉Android。

那我們繼續，在res/values目錄下新建一個attrs.xml文件，裏面加入代碼：

<?xml version="1.0" encoding="UTF-8"?>
<resources>

    <attr name="auto_play" forMymat="boolean" />

    <declare-styleable name="SlidingSwitcherView">
        <attr name="auto_play" />
    </declare-styleable>

</resources>

其中，auto_play是我們將要使用的屬性名，格式是布爾型。SlidingSwitcherView這個值可以隨意，主要在代碼中需要引用相應的id。

然後重寫SlidingSwitcherView的構造函數，在裏面加入從佈局文件中獲取自定義屬性的代碼：

public SlidingSwitcherView(Context context, AttributeSet attrs) {
    super(context, attrs);
    TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.SlidingSwitcherView);
    boolean isAutoPlay = a.getBoolean(R.styleable.SlidingSwitcherView_auto_play, false);
    if (isAutoPlay) {
        startAutoPlay();
    }
    a.recycle();
}

可以看到，我們在構造函數中去獲取auto_play的值，如果爲true,就調用startAutoPlay方法，從而啓用了自動播放的功能。

接下來就是見證奇蹟的時刻！讓我們打開activity_main.xml，在裏面加入兩行關鍵性代碼。在最外層的LinearLayout加入xmlns:myattr="http://schemas.android.com/apk/res/com.example.viewswitcher"。在我們自定義的com.example.viewswitcher.SlidingSwitcherView加入myattr:auto_play="true"。完整XML代碼如下：

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

    <com.example.viewswitcher.SlidingSwitcherView
        android:id="@+id/slidingLayout"
        myattr:auto_play="true"
        android:layout_width="fill_parent"
        android:layout_height="100dip" >

        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:orientation="horizontal" >

            <Button
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:background="@drawable/image1" />

            <Button
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:background="@drawable/image2" />

            <Button
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:background="@drawable/image3" />

            <Button
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:background="@drawable/image4" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="60dip"
            android:layout_height="20dip"
            android:layout_alignParentBottom="true"
            android:layout_alignParentRight="true"
            android:layout_margin="15dip"
            android:orientation="horizontal" >
        </LinearLayout>
    </com.example.viewswitcher.SlidingSwitcherView>

</LinearLayout>

也就是說，我們只需要通過設定myattr:auto_play是等於true還是false，就可以決定是否啓用自動播放功能，非常簡單方便。