• 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 plaincopy在CODE上查看代码片派生到我的代码片
     
    1. public class CurtainView extends RelativeLayout implements OnTouchListener{  
    2.     private static String TAG = "CurtainView";  
    3.     private Context mContext;  
    4.     /** Scroller 拖动类 */  
    5.     private Scroller mScroller;  
    6.     /** 屏幕高度  */  
    7.     private int mScreenHeigh = 0;  
    8.     /** 屏幕宽度  */  
    9.     private int mScreenWidth = 0;  
    10.     /** 点击时候Y的坐标*/  
    11.     private int downY = 0;  
    12.     /** 拖动时候Y的坐标*/  
    13.     private int moveY = 0;  
    14.     /** 拖动时候Y的方向距离*/  
    15.     private int scrollY = 0;  
    16.     /** 松开时候Y的坐标*/  
    17.     private int upY = 0;  
    18.     /** 广告幕布的高度*/  
    19.     private int curtainHeigh = 0;  
    20.     /** 是否 打开*/  
    21.     private boolean isOpen = false;  
    22.     /** 是否在动画 */  
    23.     private boolean isMove = false;  
    24.     /** 绳子的图片*/  
    25.     private ImageView img_curtain_rope;  
    26.     /** 广告的图片*/  
    27.     private ImageView img_curtain_ad;  
    28.     /** 上升动画时间 */  
    29.     private int upDuration = 1000;  
    30.     /** 下落动画时间 */  
    31.     private int downDuration = 500;  
    32.       
    33.     public CurtainView(Context context) {  
    34.         super(context);  
    35.         init(context);  
    36.     }  
    37.   
    38.     public CurtainView(Context context, AttributeSet attrs, int defStyle) {  
    39.         super(context, attrs, defStyle);  
    40.         init(context);  
    41.     }  
    42.   
    43.     public CurtainView(Context context, AttributeSet attrs) {  
    44.         super(context, attrs);  
    45.         init(context);  
    46.     }  
    47.     /** 初始化 */  
    48.     private void init(Context context) {  
    49.         this.mContext = context;  
    50.         //Interpolator 设置为有反弹效果的  （Bounce：反弹）  
    51.         Interpolator interpolator = new BounceInterpolator();  
    52.         mScroller = new Scroller(context, interpolator);  
    53.         mScreenHeigh = BaseTools.getWindowHeigh(context);  
    54.         mScreenWidth = BaseTools.getWindowWidth(context);  
    55.         // 背景设置成透明  
    56.         this.setBackgroundColor(Color.argb(0, 0, 0, 0));  
    57.         final View view = 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(new Runnable() {  
    62.               
    63.             @Override  
    64.             public void run() {  
    65.                 // TODO Auto-generated method stub  
    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.     }  
    74.   
    75.     /** 
    76.      * 拖动动画 
    77.      * @param startY   
    78.      * @param dy  垂直距离, 滚动的y距离 
    79.      * @param duration 时间 
    80.      */  
    81.     public void startMoveAnim(int startY, int dy, int duration) {  
    82.         isMove = true;  
    83.         mScroller.startScroll(0, startY, 0, dy, duration);  
    84.         invalidate();//通知UI线程的更新  
    85.     }  
    86.       
    87.     @Override  
    88.     protected void onLayout(boolean changed, int l, int t, int r, int b) {  
    89.         // TODO Auto-generated method stub  
    90.         super.onLayout(changed, l, t, r, b);  
    91.     }  
    92.       
    93.     @Override  
    94.     public void computeScroll() {  
    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.     }  
    106.   
    107.     @Override  
    108.     public boolean onTouch(View v, MotionEvent event) {  
    109.         // TODO Auto-generated method stub  
    110.         if (!isMove) {  
    111.             int offViewY = 0;//屏幕顶部和该布局顶部的距离  
    112.             switch (event.getAction()) {  
    113.             case MotionEvent.ACTION_DOWN:  
    114.                 downY = (int) event.getRawY();  
    115.                 offViewY = downY - (int)event.getX();  
    116.                 return true;  
    117.             case MotionEvent.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.             case MotionEvent.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.         return false;  
    172.     }  
    173.     /** 
    174.      * 点击绳索开关，会展开关闭 
    175.      * 在onToch中使用这个中的方法来当点击事件，避免了点击时候响应onTouch的衔接不完美的影响 
    176.      */  
    177.     public void onRopeClick(){  
    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 plaincopy在CODE上查看代码片派生到我的代码片
     
    1. public class LoginView extends RelativeLayout {  
    2.     /** Scroller 拖动类 */  
    3.     private Scroller mScroller;  
    4.     /** 屏幕高度  */  
    5.     private int mScreenHeigh = 0;  
    6.     /** 屏幕宽度  */  
    7.     private int mScreenWidth = 0;  
    8.     /** 点击时候Y的坐标*/  
    9.     private int downY = 0;  
    10.     /** 拖动时候Y的坐标*/  
    11.     private int moveY = 0;  
    12.     /** 拖动时候Y的方向距离*/  
    13.     private int scrollY = 0;  
    14.     /** 松开时候Y的坐标*/  
    15.     private int upY = 0;  
    16.     /** 是否在移动*/  
    17.     private Boolean isMoving = false;  
    18.     /** 布局的高度*/  
    19.     private int viewHeight = 0;  
    20.     /** 是否打开*/    
    21.     public boolean isShow = false;  
    22.     /** 是否可以拖动*/      
    23.     public boolean mEnabled = true;  
    24.     /** 点击外面是否关闭该界面*/     
    25.     public boolean mOutsideTouchable = true;  
    26.     /** 上升动画时间 */  
    27.     private int mDuration = 800;  
    28.     private final static String TAG = "LoginView";  
    29.     public LoginView(Context context) {  
    30.         super(context);  
    31.         init(context);  
    32.     }  
    33.   
    34.     public LoginView(Context context, AttributeSet attrs) {  
    35.         super(context, attrs);  
    36.         init(context);  
    37.     }  
    38.   
    39.     public LoginView(Context context, AttributeSet attrs, int defStyle) {  
    40.         super(context, attrs, defStyle);  
    41.         init(context);  
    42.     }  
    43.   
    44.     private void init(Context context) {  
    45.         setDescendantFocusability(FOCUS_AFTER_DESCENDANTS);  
    46.         setFocusable(true);  
    47.         mScroller = new Scroller(context);  
    48.         mScreenHeigh = BaseTools.getWindowHeigh(context);  
    49.         mScreenWidth = BaseTools.getWindowWidth(context);  
    50.         // 背景设置成透明  
    51.         this.setBackgroundColor(Color.argb(0, 0, 0, 0));  
    52.         final View view = LayoutInflater.from(context).inflate(R.layout.view_login,null);  
    53.         LayoutParams params = new LayoutParams(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(new Runnable() {  
    58.               
    59.             @Override  
    60.             public void run() {  
    61.                 // TODO Auto-generated method stub  
    62.                 viewHeight = view.getHeight();  
    63.             }  
    64.         });  
    65.         LoginView.this.scrollTo(0, mScreenHeigh);  
    66.         ImageView btn_close = (ImageView)view.findViewById(R.id.btn_close);  
    67.         btn_close.setOnClickListener(new OnClickListener() {  
    68.               
    69.             @Override  
    70.             public void onClick(View v) {  
    71.                 // TODO Auto-generated method stub  
    72.                 dismiss();  
    73.             }  
    74.         });  
    75.     }  
    76.   
    77.     @Override  
    78.     public boolean onInterceptTouchEvent(MotionEvent ev) {  
    79.         if(!mEnabled){  
    80.             return false;  
    81.         }  
    82.         return super.onInterceptTouchEvent(ev);  
    83.     }  
    84.       
    85.     @Override  
    86.     public boolean onTouchEvent(MotionEvent event) {  
    87.         // TODO Auto-generated method stub  
    88.         switch (event.getAction()) {  
    89.         case MotionEvent.ACTION_DOWN:  
    90.             downY = (int) event.getY();  
    91.             Log.d(TAG, "downY = " + downY);  
    92.             //如果完全显示的时候，让布局得到触摸监听，如果不显示，触摸事件不拦截，向下传递  
    93.             if(isShow){  
    94.                 return true;  
    95.             }  
    96.             break;  
    97.         case MotionEvent.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.         case MotionEvent.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.         case MotionEvent.ACTION_OUTSIDE:  
    128.             Log.d(TAG, "ACTION_OUTSIDE");  
    129.             break;  
    130.         default:  
    131.             break;  
    132.         }  
    133.         return super.onTouchEvent(event);  
    134.     }  
    135.       
    136.     /** 
    137.      * 拖动动画 
    138.      * @param startY   
    139.      * @param dy  移动到某点的Y坐标距离 
    140.      * @param duration 时间 
    141.      */  
    142.     public void startMoveAnim(int startY, int dy, int duration) {  
    143.         isMoving = true;  
    144.         mScroller.startScroll(0, startY, 0, dy, duration);  
    145.         invalidate();//通知UI线程的更新  
    146.     }  
    147.       
    148.     @Override  
    149.     public void computeScroll() {  
    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.     }  
    160.       
    161.     /** 开打界面 */  
    162.     public void show(){  
    163.         if(!isShow && !isMoving){  
    164.             LoginView.this.startMoveAnim(-viewHeight,   viewHeight, mDuration);  
    165.             isShow = true;  
    166.             Log.d("isShow", "true");  
    167.             changed();  
    168.         }  
    169.     }  
    170.       
    171.     /** 关闭界面 */  
    172.     public void dismiss(){  
    173.         if(isShow && !isMoving){  
    174.             LoginView.this.startMoveAnim(0, -viewHeight, mDuration);  
    175.             isShow = false;  
    176.             Log.d("isShow", "false");  
    177.             changed();  
    178.         }  
    179.     }  
    180.       
    181.     /** 是否打开 */  
    182.     public boolean isShow(){  
    183.         return isShow;  
    184.     }  
    185.       
    186.     /** 获取是否可以拖动*/  
    187.     public boolean isSlidingEnabled() {  
    188.         return mEnabled;  
    189.     }  
    190.       
    191.     /** 设置是否可以拖动*/  
    192.     public void setSlidingEnabled(boolean enabled) {  
    193.         mEnabled = enabled;  
    194.     }  
    195.       
    196.     /** 
    197.      * 设置监听接口，实现遮罩层效果 
    198.      */  
    199.     public void setOnStatusListener(onStatusListener listener){  
    200.         this.statusListener = listener;  
    201.     }  
    202.       
    203.     public void setOutsideTouchable(boolean touchable) {  
    204.         mOutsideTouchable = touchable;  
    205.     }  
    206.     /** 
    207.      * 显示状态发生改变时候执行回调借口 
    208.      */  
    209.     public void changed(){  
    210.         if(statusListener != null){  
    211.             if(isShow){  
    212.                 statusListener.onShow();  
    213.             }else{  
    214.                 statusListener.onDismiss();  
    215.             }  
    216.         }  
    217.     }  
    218.       
    219.     /** 监听接口*/  
    220.     public onStatusListener statusListener;  
    221.       
    222.     /** 
    223.      * 监听接口，来在主界面监听界面变化状态 
    224.      */  
    225.     public interface onStatusListener{  
    226.         /**  开打状态  */  
    227.         public void onShow();  
    228.         /**  关闭状态  */  
    229.         public void onDismiss();  
    230.     }  
    231.       
    232.     @Override  
    233.     protected void onLayout(boolean changed, int l, int t, int r, int b) {  
    234.         // TODO Auto-generated method stub  
    235.         super.onLayout(changed, l, t, r, b);  
    236.     }  
    237. }  
    其实代码大同小异，了解后你就可以举一反三，去自己的VIEW中实现自己想要的效果。
     
     
    最后，上源码：下载地址

     

    版权声明：本文为博主原创文章，未经博主允许不得转载。
  • 相关阅读:
    vue学习6
    vue学习5
    vue学习3
    vue学习2
    vue学习1
    idea快速查找和替换快捷键
    mysql三元表达式
    1 Java Lambda表达式forEach无法跳出循环的解决思路
    6 Mybatis Plus and 和 or，分页Page使用
    4 Mybatis Plus使用redis作为二级缓存
  • 原文地址：https://www.cnblogs.com/Free-Thinker/p/4785004.html
Copyright © 2020-2023  润新知