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

Dear 丶 2022-09-20 16:18 211阅读 0赞

第一步:新建Android工程ViewFlipperDemo：

![1339755782_8559.jpg][]

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

**\[java\]** [view plain][] [copy][view plain]

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][view plain]

1.  **return****true**; 
2.   \} 
3.  \}

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

**\[java\]** [view plain][] [copy][view plain]

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. \}

第四步:运行效果如下:

![1339755910_8008.jpg][] ![1339755917_4960.jpg][]

[1339755782_8559.jpg]: https://img-my.csdn.net/uploads/201206/15/1339755782_8559.jpg
[view plain]: http://blog.csdn.net/android_tutor/article/details/7667369#
[1339755910_8008.jpg]: https://img-my.csdn.net/uploads/201206/15/1339755910_8008.jpg
[1339755917_4960.jpg]: https://img-my.csdn.net/uploads/201206/15/1339755917_4960.jpg