Android-使用ViewFlipper實現輪番切換廣告欄

本文轉載自查看原文 2014-06-17 07:48 2137 Android

所謂的輪番切換廣告欄，指的是下面這個東西，筆主不知道該怎么確切描述這貨...

筆主沒有百度研究過其他大牛是怎么實現這個功能的，在這里筆主充分發揮DIY精神，利用ViewFlipper閉門土制了一個，下面盡筆主所能，將整個仿造過程所需的全部技能一次性放送出來，先上效果圖！

（不保證以上廣告真實性...）

素材：請自行百度圖片，美女尤佳

圓點：1： 2：

ViewFlipper：

android自帶的ViewFlipper類提供了定時自動輪放內置View對象的功能，基本上這個博文所需要的大部分功能其實都已經現成實現了。。

但是有一個缺陷，原生的ViewFlipper並不提供自動播放時切換回調的監聽器，就是說，圖片廣告切換的時候，你並不知道什么時候切換的，也不知道切換到了哪一張圖，筆主通過研究源代碼，繼承派生了一個新的 NotifiableViewFlipper ，目的就是為了提供上述回調所需的監聽器，代碼如下

 1 import android.content.Context;
 2 import android.util.AttributeSet;
 3 import android.widget.ViewFlipper;
 4 
 5 /**
 6  * 
 7  * @author wavky.wand
 8  * 
 9  */
10 public class NotifiableViewFlipper extends ViewFlipper {
11 
12     private OnFlipListener onFlipListener;
13 
14     public static interface OnFlipListener {
15         public void onShowPrevious(NotifiableViewFlipper flipper);
16 
17         public void onShowNext(NotifiableViewFlipper flipper);
18     }
19 
20     public void setOnFlipListener(
21             OnFlipListener onFlipListener) {
22         this.onFlipListener = onFlipListener;
23     }
24 
25     public NotifiableViewFlipper(Context context) {
26         super(context);
27     }
28 
29     public NotifiableViewFlipper(Context context, AttributeSet attrs) {
30         super(context, attrs);
31     }
32 
33     @Override
34     public void showPrevious() {
35         super.showPrevious();
36         if(hasFlipListener()){
37             onFlipListener.onShowPrevious(this);
38         }
39     }
40 
41     @Override
42     public void showNext() {
43         super.showNext();
44         if(hasFlipListener()){
45             onFlipListener.onShowNext(this);
46         }
47     }
48 
49     private boolean hasFlipListener() {
50         return onFlipListener != null;
51     }
52 }

布局文件：

筆主使用 RadioButton組作為標記顯示播放進度的那排小圓點，關於 RadioButton 的布局參數，如果遇到問題，請先參考博文 Android中使用RadioButton代替ImageButton

 1 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
 2     xmlns:tools="http://schemas.android.com/tools"
 3     android:layout_width="match_parent"
 4     android:layout_height="match_parent"
 5     android:background="#333"
 6     android:orientation="vertical" >
 7 
 8     <wavky.wand.NotifiableViewFlipper
 9         android:id="@+id/viewFlipper_AD"
10         android:layout_width="match_parent"
11         android:layout_height="wrap_content"
12         android:layout_alignParentLeft="true"
13         android:layout_alignParentTop="true"
14         android:animateFirstView="true"
15         android:autoStart="true"
16         android:flipInterval="2000"
17         android:inAnimation="@anim/left_in"
18         android:minHeight="100dp"
19         android:outAnimation="@anim/left_out" />
20 
21     <RadioGroup
22         android:id="@+id/radioGroup_flipperPoints"
23         android:layout_width="wrap_content"
24         android:layout_height="wrap_content"
25         android:layout_alignBottom="@+id/viewFlipper_AD"
26         android:layout_centerHorizontal="true"
27         android:layout_marginBottom="10dp"
28         android:orientation="horizontal" >
29 
30         <RadioButton
31             android:id="@+id/radioButton_flipperPoint0"
32             style="@style/radioStyle_ADPoint"
33             android:checked="true" />
34 
35         <RadioButton
36             android:id="@+id/radioButton_flipperPoint1"
37             style="@style/radioStyle_ADPoint" />
38 
39         <RadioButton
40             android:id="@+id/radioButton_flipperPoint2"
41             style="@style/radioStyle_ADPoint" />
42 
43         <RadioButton
44             android:id="@+id/radioButton_flipperPoint3"
45             style="@style/radioStyle_ADPoint" />
46 
47         <RadioButton
48             android:id="@+id/radioButton_flipperPoint4"
49             style="@style/radioStyle_ADPoint" />
50 
51         <RadioButton
52             android:id="@+id/radioButton_flipperPoint5"
53             style="@style/radioStyle_ADPoint" />
54     </RadioGroup>
55 
56 </RelativeLayout>

RadioButton的style腳本（截取）：

 1     <style name="radioStyle_ADPoint">
 2         <item name="android:gravity">center</item>
 3         <item name="android:layout_width">wrap_content</item>
 4         <item name="android:layout_height">wrap_content</item>
 5         <item name="android:layout_gravity">center</item>
 6         <item name="android:button">@null</item>
 7         <item name="android:background">@null</item>
 8         <item name="android:clickable">false</item>
 9         <item name="android:drawableLeft">@drawable/radio_adpoint</item>
10         <item name="android:layout_marginLeft">8dp</item>
11     </style>

Activity實現類：

  1 package wavky.wand.activity;
  2 
  3 import android.app.Activity;
  4 import android.os.Bundle;
  5 import android.view.View;
  6 import android.view.View.OnClickListener;
  7 import android.widget.ImageView;
  8 import android.widget.RadioGroup;
  9 import android.widget.Toast;
 10 
 11 import wavky.wand.R;
 12 import wavky.wand.activity.base.NotifiableViewFlipper;
 13 import wavky.wand.activity.base.NotifiableViewFlipper.OnFlipListener;
 14 
 15 /**
 16  * 
 17  * @author wavky.wand
 18  * 
 19  */
 20 public class HomeActivity extends Activity{
 21 
 22     // 輪番廣告Flipper
 23     private NotifiableViewFlipper adViewFlipper;
 24     
 25     // Flipper內的ImageView數組，保留引用，目前沒什么用
 26     private ImageView[] adFlipperImageViews;
 27     
 28     // 這里放六個具體廣告圖片的id
 29     private int[] adIds = { R.drawable.home_ad_banner,
 30             R.drawable.home_ad_banner, R.drawable.home_ad_banner,
 31             R.drawable.home_ad_banner, R.drawable.home_ad_banner,
 32             R.drawable.home_ad_banner };
 33     
 34     // 輪番廣告進度錨點（小圓點）
 35     private RadioGroup adPointRadioGroup;
 36     
 37     // 六個小圓點的id
 38     private static final int[] AD_POINT_IDS = { R.id.radioButton_flipperPoint0,
 39             R.id.radioButton_flipperPoint1, R.id.radioButton_flipperPoint2,
 40             R.id.radioButton_flipperPoint3, R.id.radioButton_flipperPoint4,
 41             R.id.radioButton_flipperPoint5 };
 42     
 43     // 廣告數量
 44     private static final int AD_FLIPPER_COUNT = AD_POINT_IDS.length;
 45 
 46     @Override
 47     protected void onCreate(Bundle savedInstanceState) {
 48         super.onCreate(savedInstanceState);
 49         setContentView(R.layout.activity_home);
 50         adViewFlipper = (NotifiableViewFlipper) findViewById(R.id.viewFlipper_AD);
 51         adPointRadioGroup = (RadioGroup) findViewById(R.id.radioGroup_flipperPoints);
 52         adViewFlipper.setOnFlipListener(adFlipListener);
 53         addAdFlipperImageViews();
 54     }
 55 
 56     /**
 57      * 初始化插入輪番廣告
 58      */
 59     private void addAdFlipperImageViews() {
 60         adFlipperImageViews = new ImageView[AD_FLIPPER_COUNT];
 61         for (int i = 0; i < AD_FLIPPER_COUNT; i++) {
 62             ImageView imageView = makeAdFlipperImageView();
 63             imageView.setImageResource(adIds[i]);
 64             imageView.setOnClickListener(adFlipperImageViewListener);
 65             adFlipperImageViews[i] = imageView;
 66             adViewFlipper.addView(imageView);
 67         }
 68     }
 69 
 70     /**
 71      * 工廠生產輪番廣告容器ImageView對象
 72      * @return
 73      */
 74     private ImageView makeAdFlipperImageView() {
 75         ImageView i = new ImageView(this);
 76         i.setBackgroundColor(0xFF000000);
 77         i.setScaleType(ImageView.ScaleType.FIT_CENTER);
 78         i.setLayoutParams(new NotifiableViewFlipper.LayoutParams(
 79                 NotifiableViewFlipper.LayoutParams.MATCH_PARENT,
 80                 NotifiableViewFlipper.LayoutParams.MATCH_PARENT));
 81         return i;
 82     }
 83 
 84     /**
 85      * 每個廣告的點擊事件監聽器
 86      */
 87     private OnClickListener adFlipperImageViewListener = new OnClickListener() {
 88         
 89         @Override
 90         public void onClick(View v) {
 91             Toast.makeText(HomeActivity.this, "廣告 " + adViewFlipper.getDisplayedChild(), Toast.LENGTH_SHORT).show();
 92         }
 93     };
 94     
 95     /**
 96      * 輪番廣告切換監聽器，更新進度標記錨點的顯示
 97      */
 98     private OnFlipListener adFlipListener = new OnFlipListener() {
 99 
100         @Override
101         public void onShowPrevious(NotifiableViewFlipper flipper) {
102             adPointRadioGroup.check(AD_POINT_IDS[flipper.getDisplayedChild()]);
103         }
104 
105         @Override
106         public void onShowNext(NotifiableViewFlipper flipper) {
107             adPointRadioGroup.check(AD_POINT_IDS[flipper.getDisplayedChild()]);
108         }
109     };
110 }

上述代碼或存在引用包缺少、錯誤，缺少package指向，style文件頭不完整等小問題，包括監聽器具體功能的實現，請各位批判性自行調整修改。

完畢。

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 Android 通過ViewFlipper實現廣告輪播功能並可以通過手勢滑動進行廣告切換 Android-實現切換Fragment頁功能 viewflipper動畫切換屏幕【android-音視頻】listview中播放音頻，實現音頻時長的倒計時，暫停，切換。 JS實現 Tab欄切換案例 jquery實現的導航欄切換 Html | 基於Bootstrap實現導航欄切換 Android自定義頂部欄及側滑菜單和fragment+viewpag滑動切換的實現 Android-操作欄之選項菜單微信小程序--Tab欄切換的快速實現