基于ViewFlipper实现的自定义新手指引控件.

第一步:新建Android工程ViewFlipperDemo：

第二步:新建AdverView.java代码如下:

[java]  view plain copy

1. package com.tutor.viewflipper;  
2.   
3.   
4. import android.content.Context;  
5. import android.graphics.Bitmap;  
6. import android.graphics.BitmapFactory;  
7. import android.util.AttributeSet;  
8. import android.view.Gravity;  
9. import android.view.MotionEvent;  
10. import android.view.animation.Animation;  
11. import android.view.animation.TranslateAnimation;  
12. import android.widget.FrameLayout;  
13. import android.widget.ImageView;  
14. import android.widget.LinearLayout;  
15. import android.widget.ViewFlipper;  
16.   
17. /** 
18.  * @author frankiewei. 
19.  * 广告推荐插件,可以自定义img个数. 
20.  */  
21. public class AdvserView extends FrameLayout {  
22.       
23.     /** 
24.      * 当前索引值.默认第一张图片被选中. 
25.      */  
26.     private int mCurrentIndex = 0;  
27.       
28.     /** 
29.      * 上下文. 
30.      */  
31.     private Context mContext;  
32.       
33.     /** 
34.      * 点击屏幕的X左边值. 
35.      */  
36.     private float startX;  
37.       
38.     /** 
39.      * 设备的宽度. 
40.      */  
41.     private int mDisplayWidth;  
42.       
43.     /** 
44.      * 从左到右进入的动画. 
45.      */  
46.     private Animation mLeft2RightInAnimation;  
47.       
48.     /** 
49.      * 从左到右出去动画. 
50.      */  
51.     private Animation mLeft2RightOutAnimation;  
52.       
53.     /** 
54.      * 从右到左进入动画. 
55.      */  
56.     private Animation mRight2LeftInAnimation;  
57.       
58.     /** 
59.      * 从右到左出去动画. 
60.      */  
61.     private Animation mRight2LeftOutAnimation;  
62.       
63.     /** 
64.      * 动画播放时间. 
65.      */  
66.     private long duration = 1000;  
67.       
68.     /** 
69.      * ViewFlipper控件,继承FrameLayout，图片的容器. 
70.      */  
71.     private ViewFlipper mViewFlipper;  
72.       
73.     /** 
74.      * 下面动态生成点点tip的容器. 
75.      */  
76.     private LinearLayout mTipLinearLayout;  
77.       
78.     /** 
79.      * 正常点点的Bitmap. 
80.      */  
81.     private Bitmap mPointNorBitmap;  
82.       
83.     /** 
84.      * 被选中的点点的Bitmap. 
85.      */  
86.     private Bitmap mPointSelBitmap;  
87.       
88.       
89.     /** 
90.      * 这里是要显示的广告图片的资源ID，可以自定义个数. 
91.      */  
92.     private int[] imgResIds = {R.drawable.test1,R.drawable.test2,R.drawable.test3,  
93.             R.drawable.test4,R.drawable.test5};  
94.       
95.     public AdvserView(Context context) {  
96.         super(context);  
97.         setupViews();  
98.     }  
99.       
100.     public AdvserView(Context context,AttributeSet attr) {  
101.         super(context,attr);  
102.         setupViews();  
103.     }  
104.       
105.     private void setupViews(){  
106.           
107.         mContext = getContext();          
108.         mDisplayWidth = getResources().getDisplayMetrics().widthPixels;  
109.           
110.         mViewFlipper = new ViewFlipper(mContext);  
111.         mTipLinearLayout = new LinearLayout(mContext);  
112.           
113.         mPointNorBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.point_normal);  
114.           
115.         mPointSelBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.point_selected);  
116.           
117.         //将广告图片加入ViewFlipper.  
118.         for(int i = 0; i < imgResIds.length; i++){  
119.             ImageView imageView = new ImageView(mContext);  
120.             imageView.setImageResource(imgResIds[i]);  
121.             mViewFlipper.addView(imageView);  
122.         }  
123.         //将点点动态加入Linerlayout.  
124.         for(int j = 0; j < imgResIds.length; j++){  
125.             ImageView imageview = new ImageView(mContext);  
126.             if(j == 0){  
127.                 imageview.setImageBitmap(mPointSelBitmap);  
128.             }else{  
129.                 imageview.setImageBitmap(mPointNorBitmap);  
130.             }  
131.               
132.             mTipLinearLayout.addView(imageview);  
133.         }  
134.         addView(mViewFlipper);  
135.         addView(mTipLinearLayout);  
136.         mTipLinearLayout.setGravity(Gravity.BOTTOM|Gravity.CENTER_HORIZONTAL);  
137.           
138.         //初始化动画.  
139.         mLeft2RightInAnimation = new TranslateAnimation(-mDisplayWidth, 0, 0, 0);  
140.         mLeft2RightInAnimation.setDuration(duration);  
141.         mLeft2RightOutAnimation = new TranslateAnimation(0, mDisplayWidth, 0, 0);  
142.         mLeft2RightOutAnimation.setDuration(duration);  
143.           
144.         mRight2LeftInAnimation = new TranslateAnimation(mDisplayWidth, 0, 0, 0);  
145.         mRight2LeftInAnimation.setDuration(duration);  
146.         mRight2LeftOutAnimation = new TranslateAnimation(0, -mDisplayWidth, 0, 0);  
147.         mRight2LeftOutAnimation.setDuration(duration);  
148.     }  
149.       
150.     @Override  
151.     public boolean onTouchEvent(MotionEvent event) {  
152.         switch (event.getAction()) {  
153.         case MotionEvent.ACTION_DOWN:  
154.             startX = event.getX();  
155.             break;  
156.         case MotionEvent.ACTION_UP:  
157.             ImageView lastSelImageView  = (ImageView)mTipLinearLayout.getChildAt(mCurrentIndex);  
158.             //判断左右滑动切换图片.  
159.             if(event.getX() > startX){  
160.                 mViewFlipper.setInAnimation(mLeft2RightInAnimation);  
161.                 mViewFlipper.setOutAnimation(mLeft2RightOutAnimation);  
162.                 mViewFlipper.showNext();  
163.                 mCurrentIndex++;  
164.                 if(mCurrentIndex > imgResIds.length -1){  
165.                     mCurrentIndex = 0;  
166.                 }  
167.               
168.                           
169.             }else if(event.getX() < startX){  
170.                 mViewFlipper.setInAnimation(mRight2LeftInAnimation);  
171.                 mViewFlipper.setOutAnimation(mRight2LeftOutAnimation);  
172.                 mViewFlipper.showPrevious();  
173.                 mCurrentIndex--;  
174.                 if(mCurrentIndex < 0){  
175.                     mCurrentIndex = imgResIds.length -1;  
176.                 }  
177.             }  
178.             ImageView imageview = (ImageView)mTipLinearLayout.getChildAt(mCurrentIndex);  
179.             imageview.setImageBitmap(mPointSelBitmap);  
180.             lastSelImageView.setImageBitmap(mPointNorBitmap);  
181.             break;  
182.         default:  
183.             break;  
184.         }  

[java]  view plain copy

1.         return true;  
2.     }  
3. }  

第三步:修改ViewFlipperDemoActivity.java代码如下:

[java]  view plain copy

1. package com.tutor.viewflipper;  
2.   
3. import android.app.Activity;  
4. import android.os.Bundle;  
5.   
6. public class ViewFlipperDemoActivity extends Activity {  
7.     @Override  
8.     public void onCreate(Bundle savedInstanceState) {  
9.         super.onCreate(savedInstanceState);  
10.         setContentView(new AdvserView(this));  
11.     }  
12. }  

第四步:运行效果如下: