您的位置: 首页  >  文章  >  Android 仿 窗帘效果 和 登录界面拖动效果 （Scroller类的应用） 附 2个DEMO及源码...

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

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

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

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

之前说到过，在广泛使用的侧边滑动导航开源库 --SlidingLayer其实就是使用到了Scroller类进行的实现，(SlidingLayer下载地址：GITHUB )，而是这个库的实现过程中使用到的---Scroller类，我们可以使用这个库实现以下我要达到的效果，可是这样拿来就用，对于初学者提升不大，所以我决定直接去使用Scroller类去实现：
1）窗帘展开和关闭效果
2）登录界面拖动效果（有点类似PopupWindow,可是带上了拖拽效果）。

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

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

申明下：DEMO中的资源文件是在网上下载的2个应用中，发现效果不错和可以进一步完善（比如窗帘效果，原本是不带推拽效果），提取了应用的资源文件去自己实现的，目的是为了更好的达到展示效果。
代码中都带上了注释和说明，以便更好的了解实现过程。可能有的地方优化做的不足，望大家见谅。

效果图：

1）窗帘 效果
用途：可以使用于广告墙，公告栏等地方
说明：点击开关可以实现展开关闭功能，也可以通过推拽开关实现展开关闭效果，动画中加入了反弹效果，更加真实。
Android 仿 窗帘效果 和 登录界面拖动效果 （Scroller类的应用） 附 2个DEMO及源码...


2）登录窗体 效果
用途：可以使用在登录时候的登录方式选择，菜单选项等，有点类似于带拖拽效果的PopupWindow
说明：可以登录按钮展开关闭登录窗体，也可以通过推拽进行关闭。
注：这里的点击窗体之外消失是通过回调接口实现，这里没有列出，可以下载源码查看

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

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

核心代码：

窗帘效果：

[java] view plain copy Android 仿 窗帘效果 和 登录界面拖动效果 （Scroller类的应用） 附 2个DEMO及源码...Android 仿 窗帘效果 和 登录界面拖动效果 （Scroller类的应用） 附 2个DEMO及源码...
  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 Android 仿 窗帘效果 和 登录界面拖动效果 （Scroller类的应用） 附 2个DEMO及源码...Android 仿 窗帘效果 和 登录界面拖动效果 （Scroller类的应用） 附 2个DEMO及源码...
  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中实现自己想要的效果。


最后，上源码：下载地址

相关推荐