Android 仿 窗帘效果 和 登录界面拖动效果 （Scroller类的应用） 附 2个DEMO及源码...

在Android学习中，动作交互是软件中重要的一部分，其中的Scroller就是提供了拖动效果的类，在网上，比如说一些Launcher实现滑屏都可以通过这个类去实现。下面要说的就是上次Scroller类学习的后的实践了。

如果你还不了解Scroller类，那请先点击：Android 界面滑动实现---Scroller类 从源码和开发文档中学习（让你的布局动起来）

了解之后再阅读以下内容，你会发现原来实现起来很简单。

之前说到过，在广泛使用的侧边滑动导航开源库 --SlidingLayer其实就是使用到了Scroller类进行的实现，(SlidingLayer下载地址：GITHUB )，而是这个库的实现过程中使用到的---Scroller类，我们可以使用这个库实现以下我要达到的效果，可是这样拿来就用，对于初学者提升不大，所以我决定直接去使用Scroller类去实现：

1）窗帘展开和关闭效果

2）登录界面拖动效果（有点类似PopupWindow,可是带上了拖拽效果）。

通过这2个例子，你就大概知道了Scroller类的基本使用情况，可以自己去写一些类似的效果了。

先上图，在上主要代码，最后上DEMO源码。

申明下：DEMO中的资源文件是在网上下载的2个应用中，发现效果不错和可以进一步完善（比如窗帘效果，原本是不带推拽效果），提取了应用的资源文件去自己实现的，目的是为了更好的达到展示效果。

代码中都带上了注释和说明，以便更好的了解实现过程。可能有的地方优化做的不足，望大家见谅。

效果图：

1）窗帘 效果

用途：可以使用于广告墙，公告栏等地方

说明：点击开关可以实现展开关闭功能，也可以通过推拽开关实现展开关闭效果，动画中加入了反弹效果，更加真实。

2）登录窗体 效果

用途：可以使用在登录时候的登录方式选择，菜单选项等，有点类似于带拖拽效果的PopupWindow

说明：可以登录按钮展开关闭登录窗体，也可以通过推拽进行关闭。

注：这里的点击窗体之外消失是通过回调接口实现，这里没有列出，可以下载源码查看

学习了Scroller类，大概的你也知道核心代码会是哪些内容，下面列举下

核心代码：

窗帘效果：

[java] view plain copy

1. publicclassCurtainViewextendsRelativeLayoutimplementsOnTouchListener{
2. privatestaticStringTAG="CurtainView";
3. privateContextmContext;
4. /**Scroller拖动类*/
5. privateScrollermScroller;
6. /**屏幕高度*/
7. privateintmScreenHeigh=0;
8. /**屏幕宽度*/
9. privateintmScreenWidth=0;
10. /**点击时候Y的坐标*/
11. privateintdownY=0;
12. /**拖动时候Y的坐标*/
13. privateintmoveY=0;
14. /**拖动时候Y的方向距离*/
15. privateintscrollY=0;
16. /**松开时候Y的坐标*/
17. privateintupY=0;
18. /**广告幕布的高度*/
19. privateintcurtainHeigh=0;
20. /**是否打开*/
21. privatebooleanisOpen=false;
22. /**是否在动画*/
23. privatebooleanisMove=false;
24. /**绳子的图片*/
25. privateImageViewimg_curtain_rope;
26. /**广告的图片*/
27. privateImageViewimg_curtain_ad;
28. /**上升动画时间*/
29. privateintupDuration=1000;
30. /**下落动画时间*/
31. privateintdownDuration=500;
33. publicCurtainView(Contextcontext){
34. super(context);
35. init(context);
36. }
38. publicCurtainView(Contextcontext,AttributeSetattrs,intdefStyle){
39. super(context,attrs,defStyle);
40. init(context);
41. }
43. publicCurtainView(Contextcontext,AttributeSetattrs){
44. super(context,attrs);
45. init(context);
46. }
47. /**初始化*/
48. privatevoidinit(Contextcontext){
49. this.mContext=context;
50. //Interpolator设置为有反弹效果的（Bounce：反弹）
51. Interpolatorinterpolator=newBounceInterpolator();
52. mScroller=newScroller(context,interpolator);
53. mScreenHeigh=BaseTools.getWindowHeigh(context);
54. mScreenWidth=BaseTools.getWindowWidth(context);
55. //背景设置成透明
56. this.setBackgroundColor(Color.argb(0,0,0,0));
57. finalViewview=LayoutInflater.from(mContext).inflate(R.layout.curtain,null);
58. img_curtain_ad=(ImageView)view.findViewById(R.id.img_curtain_ad);
59. img_curtain_rope=(ImageView)view.findViewById(R.id.img_curtain_rope);
60. addView(view);
61. img_curtain_ad.post(newRunnable(){
63. @Override
64. publicvoidrun(){
65. //TODOAuto-generatedmethodstub
66. curtainHeigh=img_curtain_ad.getHeight();
67. Log.d(TAG,"curtainHeigh="+curtainHeigh);
68. CurtainView.this.scrollTo(0,curtainHeigh);
69. //注意scrollBy和scrollTo的区别
70. }
71. });
72. img_curtain_rope.setOnTouchListener(this);
73. }
75. /**
76. *拖动动画
77. *@paramstartY
78. *@paramdy垂直距离,滚动的y距离
79. *@paramduration时间
80. */
81. publicvoidstartMoveAnim(intstartY,intdy,intduration){
82. isMove=true;
83. mScroller.startScroll(0,startY,0,dy,duration);
84. invalidate();//通知UI线程的更新
85. }
87. @Override
88. protectedvoidonLayout(booleanchanged,intl,intt,intr,intb){
89. //TODOAuto-generatedmethodstub
90. super.onLayout(changed,l,t,r,b);
91. }
93. @Override
94. publicvoidcomputeScroll(){
95. //判断是否还在滚动，还在滚动为true
96. if(mScroller.computeScrollOffset()){
97. scrollTo(mScroller.getCurrX(),mScroller.getCurrY());
98. //更新界面
99. postInvalidate();
100. isMove=true;
101. }else{
102. isMove=false;
103. }
104. super.computeScroll();
105. }
107. @Override
108. publicbooleanonTouch(Viewv,MotionEventevent){
109. //TODOAuto-generatedmethodstub
110. if(!isMove){
111. intoffViewY=0;//屏幕顶部和该布局顶部的距离
112. switch(event.getAction()){
113. caseMotionEvent.ACTION_DOWN:
114. downY=(int)event.getRawY();
115. offViewY=downY-(int)event.getX();
116. returntrue;
117. caseMotionEvent.ACTION_MOVE:
118. moveY=(int)event.getRawY();
119. scrollY=moveY-downY;
120. if(scrollY<0){
121. //向上滑动
122. if(isOpen){
123. if(Math.abs(scrollY)<=img_curtain_ad.getBottom()-offViewY){
124. scrollTo(0,-scrollY);
125. }
126. }
127. }else{
128. //向下滑动
129. if(!isOpen){
130. if(scrollY<=curtainHeigh){
131. scrollTo(0,curtainHeigh-scrollY);
132. }
133. }
134. }
135. break;
136. caseMotionEvent.ACTION_UP:
137. upY=(int)event.getRawY();
138. if(Math.abs(upY-downY)<10){
139. onRopeClick();
140. break;
141. }
142. if(downY>upY){
143. //向上滑动
144. if(isOpen){
145. if(Math.abs(scrollY)>curtainHeigh/2){
146. //向上滑动超过半个屏幕高的时候开启向上消失动画
147. startMoveAnim(this.getScrollY(),
148. (curtainHeigh-this.getScrollY()),upDuration);
149. isOpen=false;
150. }else{
151. startMoveAnim(this.getScrollY(),-this.getScrollY(),upDuration);
152. isOpen=true;
153. }
154. }
155. }else{
156. //向下滑动
157. if(scrollY>curtainHeigh/2){
158. //向上滑动超过半个屏幕高的时候开启向上消失动画
159. startMoveAnim(this.getScrollY(),-this.getScrollY(),upDuration);
160. isOpen=true;
161. }else{
162. startMoveAnim(this.getScrollY(),(curtainHeigh-this.getScrollY()),upDuration);
163. isOpen=false;
164. }
165. }
166. break;
167. default:
168. break;
169. }
170. }
171. returnfalse;
172. }
173. /**
174. *点击绳索开关，会展开关闭
175. *在onToch中使用这个中的方法来当点击事件，避免了点击时候响应onTouch的衔接不完美的影响
176. */
177. publicvoidonRopeClick(){
178. if(isOpen){
179. CurtainView.this.startMoveAnim(0,curtainHeigh,upDuration);
180. }else{
181. CurtainView.this.startMoveAnim(curtainHeigh,-curtainHeigh,downDuration);
182. }
183. isOpen=!isOpen;
184. }
185. }

登录界面：

[java] view plain copy

1. publicclassLoginViewextendsRelativeLayout{
2. /**Scroller拖动类*/
3. privateScrollermScroller;
4. /**屏幕高度*/
5. privateintmScreenHeigh=0;
6. /**屏幕宽度*/
7. privateintmScreenWidth=0;
8. /**点击时候Y的坐标*/
9. privateintdownY=0;
10. /**拖动时候Y的坐标*/
11. privateintmoveY=0;
12. /**拖动时候Y的方向距离*/
13. privateintscrollY=0;
14. /**松开时候Y的坐标*/
15. privateintupY=0;
16. /**是否在移动*/
17. privateBooleanisMoving=false;
18. /**布局的高度*/
19. privateintviewHeight=0;
20. /**是否打开*/
21. publicbooleanisShow=false;
22. /**是否可以拖动*/
23. publicbooleanmEnabled=true;
24. /**点击外面是否关闭该界面*/
25. publicbooleanmOutsideTouchable=true;
26. /**上升动画时间*/
27. privateintmDuration=800;
28. privatefinalstaticStringTAG="LoginView";
29. publicLoginView(Contextcontext){
30. super(context);
31. init(context);
32. }
34. publicLoginView(Contextcontext,AttributeSetattrs){
35. super(context,attrs);
36. init(context);
37. }
39. publicLoginView(Contextcontext,AttributeSetattrs,intdefStyle){
40. super(context,attrs,defStyle);
41. init(context);
42. }
44. privatevoidinit(Contextcontext){
45. setDescendantFocusability(FOCUS_AFTER_DESCENDANTS);
46. setFocusable(true);
47. mScroller=newScroller(context);
48. mScreenHeigh=BaseTools.getWindowHeigh(context);
49. mScreenWidth=BaseTools.getWindowWidth(context);
50. //背景设置成透明
51. this.setBackgroundColor(Color.argb(0,0,0,0));
52. finalViewview=LayoutInflater.from(context).inflate(R.layout.view_login,null);
53. LayoutParamsparams=newLayoutParams(LayoutParams.MATCH_PARENT,LayoutParams.WRAP_CONTENT);//如果不给他设这个，它的布局的MATCH_PARENT就不知道该是多少
54. addView(view,params);//ViewGroup的大小，
55. //背景设置成透明
56. this.setBackgroundColor(Color.argb(0,0,0,0));
57. view.post(newRunnable(){
59. @Override
60. publicvoidrun(){
61. //TODOAuto-generatedmethodstub
62. viewHeight=view.getHeight();
63. }
64. });
65. LoginView.this.scrollTo(0,mScreenHeigh);
66. ImageViewbtn_close=(ImageView)view.findViewById(R.id.btn_close);
67. btn_close.setOnClickListener(newOnClickListener(){
69. @Override
70. publicvoidonClick(Viewv){
71. //TODOAuto-generatedmethodstub
72. dismiss();
73. }
74. });
75. }
77. @Override
78. publicbooleanonInterceptTouchEvent(MotionEventev){
79. if(!mEnabled){
80. returnfalse;
81. }
82. returnsuper.onInterceptTouchEvent(ev);
83. }
85. @Override
86. publicbooleanonTouchEvent(MotionEventevent){
87. //TODOAuto-generatedmethodstub
88. switch(event.getAction()){
89. caseMotionEvent.ACTION_DOWN:
90. downY=(int)event.getY();
91. Log.d(TAG,"downY="+downY);
92. //如果完全显示的时候，让布局得到触摸监听，如果不显示，触摸事件不拦截，向下传递
93. if(isShow){
94. returntrue;
95. }
96. break;
97. caseMotionEvent.ACTION_MOVE:
98. moveY=(int)event.getY();
99. scrollY=moveY-downY;
100. //向下滑动
101. if(scrollY>0){
102. if(isShow){
103. scrollTo(0,-Math.abs(scrollY));
104. }
105. }else{
106. if(mScreenHeigh-this.getTop()<=viewHeight&&!isShow){
107. scrollTo(0,Math.abs(viewHeight-scrollY));
108. }
109. }
110. break;
111. caseMotionEvent.ACTION_UP:
112. upY=(int)event.getY();
113. if(isShow){
114. if(this.getScrollY()<=-(viewHeight/2)){
115. startMoveAnim(this.getScrollY(),-(viewHeight-this.getScrollY()),mDuration);
116. isShow=false;
117. Log.d("isShow","false");
118. }else{
119. startMoveAnim(this.getScrollY(),-this.getScrollY(),mDuration);
120. isShow=true;
121. Log.d("isShow","true");
122. }
123. }
124. Log.d("this.getScrollY()",""+this.getScrollY());
125. changed();
126. break;
127. caseMotionEvent.ACTION_OUTSIDE:
128. Log.d(TAG,"ACTION_OUTSIDE");
129. break;
130. default:
131. break;
132. }
133. returnsuper.onTouchEvent(event);
134. }
136. /**
137. *拖动动画
138. *@paramstartY
139. *@paramdy移动到某点的Y坐标距离
140. *@paramduration时间
141. */
142. publicvoidstartMoveAnim(intstartY,intdy,intduration){
143. isMoving=true;
144. mScroller.startScroll(0,startY,0,dy,duration);
145. invalidate();//通知UI线程的更新
146. }
148. @Override
149. publicvoidcomputeScroll(){
150. if(mScroller.computeScrollOffset()){
151. scrollTo(mScroller.getCurrX(),mScroller.getCurrY());
152. //更新界面
153. postInvalidate();
154. isMoving=true;
155. }else{
156. isMoving=false;
157. }
158. super.computeScroll();
159. }
161. /**开打界面*/
162. publicvoidshow(){
163. if(!isShow&&!isMoving){
164. LoginView.this.startMoveAnim(-viewHeight,viewHeight,mDuration);
165. isShow=true;
166. Log.d("isShow","true");
167. changed();
168. }
169. }
171. /**关闭界面*/
172. publicvoiddismiss(){
173. if(isShow&&!isMoving){
174. LoginView.this.startMoveAnim(0,-viewHeight,mDuration);
175. isShow=false;
176. Log.d("isShow","false");
177. changed();
178. }
179. }
181. /**是否打开*/
182. publicbooleanisShow(){
183. returnisShow;
184. }
186. /**获取是否可以拖动*/
187. publicbooleanisSlidingEnabled(){
188. returnmEnabled;
189. }
191. /**设置是否可以拖动*/
192. publicvoidsetSlidingEnabled(booleanenabled){
193. mEnabled=enabled;
194. }
196. /**
197. *设置监听接口，实现遮罩层效果
198. */
199. publicvoidsetOnStatusListener(onStatusListenerlistener){
200. this.statusListener=listener;
201. }
203. publicvoidsetOutsideTouchable(booleantouchable){
204. mOutsideTouchable=touchable;
205. }
206. /**
207. *显示状态发生改变时候执行回调借口
208. */
209. publicvoidchanged(){
210. if(statusListener!=null){
211. if(isShow){
212. statusListener.onShow();
213. }else{
214. statusListener.onDismiss();
215. }
216. }
217. }
219. /**监听接口*/
220. publiconStatusListenerstatusListener;
222. /**
223. *监听接口，来在主界面监听界面变化状态
224. */
225. publicinterfaceonStatusListener{
226. /**开打状态*/
227. publicvoidonShow();
228. /**关闭状态*/
229. publicvoidonDismiss();
230. }
232. @Override
233. protectedvoidonLayout(booleanchanged,intl,intt,intr,intb){
234. //TODOAuto-generatedmethodstub
235. super.onLayout(changed,l,t,r,b);
236. }
237. }

其实代码大同小异，了解后你就可以举一反三，去自己的VIEW中实现自己想要的效果。

最后，上源码：下载地址