大家好,記得上次我帶著大家一起實現了一個類似與淘寶客戶端中帶有的圖片滾動播放器的效果,但是在做完了之后,發現忘了加入圖片自動播放的功能(或許是我有意忘記加的.....),結果圖片只能通過手指滑動來播放。于是今天我將再次帶領大家,添加上之前遺漏的功能,讓我們的圖片播放器更加完善。
這次的程序開發將完全基于上一次的代碼,如果有朋友還未看過上篇文章,請先閱讀Android實現圖片滾動和頁簽控件功能的實現代碼。
既然是要加入自動播放的功能,那么就有一個非常重要的問題需要考慮。如果當前已經滾動到了最后一張圖片,應該怎么辦?由于我們目前的實現方案是,所有的圖片都按照布局文件里面定義的順序橫向排列,然后通過偏移第一個圖片的leftMargin,來決定顯示哪一張圖片。因此當圖片滾動在最后一張時,我們可以讓程序迅速地回滾到第一張圖片,然后從頭開始滾動。這種效果和淘寶客戶端是有一定差異的(淘寶并沒有回滾機制,而是很自然地由最后一張圖片滾動到第一張圖片),我也研究過淘寶圖片滾動器的實現方法,并不難實現。但是由于我們是基于上次的代碼進行開發的,方案上無法實現和淘寶客戶端一樣的效果,因此這里也就不追求和它完全一致了,各有風格也挺好的。
好了,現在開始實現功能,首先是打開SlidingSwitcherView,在里面加入一個新的AsyncTask,專門用于回滾到第一張圖片:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
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里面加入一個新的方法:
1
2
3
4
5
6
|
/** * 滾動到第一個元素。 */ public void scrollToFirstItem() { new ScrollToFirstItemTask().execute( 20 * itemsCount); } |
這個方法非常簡單,就是啟動了我們新增的ScrollToFirstItemTask,滾動速度設定為20 * itemsCount,這樣當我們需要滾動的圖片數量越多,回滾速度就會越快。定義好這個方法后,只要在任意地方調用scrollToFirstItem這個方法,就可以立刻從當前圖片回滾到第一張圖片了。
OK,然后我們要定義一個方法用于啟動自動播放功能。仍然是在SlidingSwitcherView中新增如下代碼:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
/** * 用于在定時器當中操作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文件,里面加入代碼:
1
2
3
4
5
6
7
|
<? 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的構造函數,在里面加入從布局文件中獲取自定義屬性的代碼:
1
2
3
4
5
6
7
8
9
|
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加入在我們自定義的com.example.viewswitcher.SlidingSwitcherView加入myattr:auto_play="true"。完整XML代碼如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
|
< 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,就可以決定是否啟用自動播放功能,非常簡單方便。
好了,今天的講解到此結束,有疑問的朋友請在下面留言。
以上就是這篇文章的全部內容了,希望本文的內容對大家的學習或者工作具有一定的參考學習價值,如果有疑問大家可以留言交流,謝謝大家對服務器之家的支持。
原文鏈接:https://blog.csdn.net/guolin_blog/article/details/8796877