快捷導(dǎo)航

Android使用自定義屬性實現(xiàn)圖片自動播放滾動的功能

更新時間：2018年05月11日 09:56:19 作者：guolin

這篇文章主要介紹了Android使用自定義屬性實現(xiàn)圖片自動播放滾動的功能，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

大家好，記得上次我?guī)е蠹乙黄饘崿F(xiàn)了一個類似與淘寶客戶端中帶有的圖片滾動播放器的效果，但是在做完了之后，發(fā)現(xiàn)忘了加入圖片自動播放的功能(或許是我有意忘記加的.....)，結(jié)果圖片只能通過手指滑動來播放。于是今天我將再次帶領(lǐng)大家，添加上之前遺漏的功能，讓我們的圖片播放器更加完善。

這次的程序開發(fā)將完全基于上一次的代碼，如果有朋友還未看過上篇文章，請先閱讀Android實現(xiàn)圖片滾動和頁簽控件功能的實現(xiàn)代碼。

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

好了，現(xiàn)在開始實現(xiàn)功能，首先是打開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]; 
 // 當(dāng)leftMargin大于0時，說明已經(jīng)滾動到了第一個元素，跳出循環(huán) 
 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，滾動速度設(shè)定為20 * itemsCount，這樣當(dāng)我們需要滾動的圖片數(shù)量越多，回滾速度就會越快。定義好這個方法后，只要在任意地方調(diào)用scrollToFirstItem這個方法，就可以立刻從當(dāng)前圖片回滾到第一張圖片了。

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

/** 
 * 用于在定時器當(dāng)中操作UI界面。 
 */ 
private Handler handler = new Handler(); 
/** 
 * 開啟圖片自動播放功能，當(dāng)滾動到最后一張圖片的時候，會自動回滾到第一張圖片。 
 */ 
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); 
}

我們可以看到，這個方法里啟用了一個定時器，每隔三秒就會執(zhí)行一次。然后在定時器的執(zhí)行邏輯里面進(jìn)行判斷當(dāng)前圖片是否是最后一張，如果不是最后一張就滾動到下一張圖片，如果是最后一張就回滾到第一張圖片。其中需要注意，定時器中的代碼是在子線程中運(yùn)行的，而滾動圖片操作和更新頁簽操作都是UI操作，因此需要放到Handler中去執(zhí)行。

之后只要在Activity創(chuàng)建的時候去調(diào)用SlidingSwitcherView的startAutoPlay方法，自動播放功能就實現(xiàn)了！！

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

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

那我們繼續(xù)，在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這個值可以隨意，主要在代碼中需要引用相應(yīng)的id。

然后重寫SlidingSwitcherView的構(gòu)造函數(shù)，在里面加入從布局文件中獲取自定義屬性的代碼：

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(); 
}

可以看到，我們在構(gòu)造函數(shù)中去獲取auto_play的值，如果為true,就調(diào)用startAutoPlay方法，從而啟用了自動播放的功能。

接下來就是見證奇跡的時刻！讓我們打開activity_main.xml，在里面加入兩行關(guān)鍵性代碼。在最外層的LinearLayout加入在我們自定義的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>

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

好了，今天的講解到此結(jié)束，有疑問的朋友請在下面留言。

源碼下載，請點擊這里

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。

您可能感興趣的文章: