素材:請自行百度圖片,美女尤佳
圓點: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 }