您的位置:首页 > 移动开发 > Android开发

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

2016-09-12 16:05 375 查看
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





public class CurtainView extends RelativeLayout implements OnTouchListener{  
    private static String TAG = "CurtainView";  
    private Context mContext;  
    /** Scroller 拖动类 */  
    private Scroller mScroller;  
    /** 屏幕高度  */  
    private int mScreenHeigh = 0;  
    /** 屏幕宽度  */  
    private int mScreenWidth = 0;  
    /** 点击时候Y的坐标*/  
    private int downY = 0;  
    /** 拖动时候Y的坐标*/  
    private int moveY = 0;  
    /** 拖动时候Y的方向距离*/  
    private int scrollY = 0;  
    /** 松开时候Y的坐标*/  
    private int upY = 0;  
    /** 广告幕布的高度*/  
    private int curtainHeigh = 0;  
    /** 是否 打开*/  
    private boolean isOpen = false;  
    /** 是否在动画 */  
    private boolean isMove = false;  
    /** 绳子的图片*/  
    private ImageView img_curtain_rope;  
    /** 广告的图片*/  
    private ImageView img_curtain_ad;  
    /** 上升动画时间 */  
    private int upDuration = 1000;  
    /** 下落动画时间 */  
    private int downDuration = 500;  
      
    public CurtainView(Context context) {  
        super(context);  
        init(context);  
    }  
  
    public CurtainView(Context context, AttributeSet attrs, int defStyle) {  
        super(context, attrs, defStyle);  
        init(context);  
    }  
  
    public CurtainView(Context context, AttributeSet attrs) {  
        super(context, attrs);  
        init(context);  
    }  
    /** 初始化 */  
    private void init(Context context) {  
        this.mContext = context;  
        //Interpolator 设置为有反弹效果的  (Bounce:反弹)  
        Interpolator interpolator = new BounceInterpolator();  
        mScroller = new Scroller(context, interpolator);  
        mScreenHeigh = BaseTools.getWindowHeigh(context);  
        mScreenWidth = BaseTools.getWindowWidth(context);  
        // 背景设置成透明  
        this.setBackgroundColor(Color.argb(0, 0, 0, 0));  
        final View view = LayoutInflater.from(mContext).inflate(R.layout.curtain, null);  
        img_curtain_ad = (ImageView)view.findViewById(R.id.img_curtain_ad);  
        img_curtain_rope = (ImageView)view.findViewById(R.id.img_curtain_rope);  
        addView(view);  
        img_curtain_ad.post(new Runnable() {  
              
            @Override  
            public void run() {  
                // TODO Auto-generated method stub  
                curtainHeigh  = img_curtain_ad.getHeight();  
                Log.d(TAG, "curtainHeigh= " + curtainHeigh);  
                CurtainView.this.scrollTo(0, curtainHeigh);  
                //注意scrollBy和scrollTo的区别  
            }  
        });  
        img_curtain_rope.setOnTouchListener(this);  
    }  
  
    /** 
     * 拖动动画 
     * @param startY   
     * @param dy  垂直距离, 滚动的y距离 
     * @param duration 时间 
     */  
    public void startMoveAnim(int startY, int dy, int duration) {  
        isMove = true;  
        mScroller.startScroll(0, startY, 0, dy, duration);  
        invalidate();//通知UI线程的更新  
    }  
      
    @Override  
    protected void onLayout(boolean changed, int l, int t, int r, int b) {  
        // TODO Auto-generated method stub  
        super.onLayout(changed, l, t, r, b);  
    }  
      
    @Override  
    public void computeScroll() {  
        //判断是否还在滚动,还在滚动为true  
        if (mScroller.computeScrollOffset()) {  
            scrollTo(mScroller.getCurrX(), mScroller.getCurrY());  
            //更新界面  
            postInvalidate();  
            isMove = true;  
        } else {  
            isMove = false;  
        }  
        super.computeScroll();  
    }  
  
    @Override  
    public boolean onTouch(View v, MotionEvent event) {  
        // TODO Auto-generated method stub  
        if (!isMove) {  
            int offViewY = 0;//屏幕顶部和该布局顶部的距离  
            switch (event.getAction()) {  
            case MotionEvent.ACTION_DOWN:  
                downY = (int) event.getRawY();  
                offViewY = downY - (int)event.getX();  
                return true;  
            case MotionEvent.ACTION_MOVE:  
                moveY = (int) event.getRawY();  
                scrollY = moveY - downY;  
                if (scrollY < 0) {  
                    // 向上滑动  
                    if(isOpen){  
                        if(Math.abs(scrollY) <= img_curtain_ad.getBottom() - offViewY){  
                            scrollTo(0, -scrollY);  
                        }  
                    }  
                } else {  
                    // 向下滑动  
                    if(!isOpen){  
                        if (scrollY <= curtainHeigh) {  
                            scrollTo(0, curtainHeigh - scrollY);  
                        }  
                    }  
                }  
                break;  
            case MotionEvent.ACTION_UP:  
                upY = (int) event.getRawY();  
                if(Math.abs(upY - downY) < 10){  
                    onRopeClick();  
                    break;  
                }  
                if (downY > upY) {  
                    // 向上滑动  
                    if(isOpen){  
                        if (Math.abs(scrollY) > curtainHeigh / 2) {  
                            // 向上滑动超过半个屏幕高的时候 开启向上消失动画  
                            startMoveAnim(this.getScrollY(),  
                                    (curtainHeigh - this.getScrollY()), upDuration);  
                            isOpen = false;  
                        } else {  
                            startMoveAnim(this.getScrollY(), -this.getScrollY(),upDuration);  
                            isOpen = true;  
                        }  
                    }  
                } else {  
                    // 向下滑动  
                    if (scrollY > curtainHeigh / 2) {  
                        // 向上滑动超过半个屏幕高的时候 开启向上消失动画  
                        startMoveAnim(this.getScrollY(), -this.getScrollY(),upDuration);  
                        isOpen = true;  
                    } else {  
                        startMoveAnim(this.getScrollY(),(curtainHeigh - this.getScrollY()), upDuration);  
                        isOpen = false;  
                    }  
                }  
                break;  
            default:  
                break;  
            }  
        }  
        return false;  
    }  
    /** 
     * 点击绳索开关,会展开关闭 
     * 在onToch中使用这个中的方法来当点击事件,避免了点击时候响应onTouch的衔接不完美的影响 
     */  
    public void onRopeClick(){  
        if(isOpen){  
            CurtainView.this.startMoveAnim(0, curtainHeigh, upDuration);  
        }else{  
            CurtainView.this.startMoveAnim(curtainHeigh,-curtainHeigh, downDuration);  
        }  
        isOpen = !isOpen;  
    }  
}  

登录界面:

[java]
view plain
copy





public class LoginView extends RelativeLayout {  
    /** Scroller 拖动类 */  
    private Scroller mScroller;  
    /** 屏幕高度  */  
    private int mScreenHeigh = 0;  
    /** 屏幕宽度  */  
    private int mScreenWidth = 0;  
    /** 点击时候Y的坐标*/  
    private int downY = 0;  
    /** 拖动时候Y的坐标*/  
    private int moveY = 0;  
    /** 拖动时候Y的方向距离*/  
    private int scrollY = 0;  
    /** 松开时候Y的坐标*/  
    private int upY = 0;  
    /** 是否在移动*/  
    private Boolean isMoving = false;  
    /** 布局的高度*/  
    private int viewHeight = 0;  
    /** 是否打开*/    
    public boolean isShow = false;  
    /** 是否可以拖动*/      
    public boolean mEnabled = true;  
    /** 点击外面是否关闭该界面*/     
    public boolean mOutsideTouchable = true;  
    /** 上升动画时间 */  
    private int mDuration = 800;  
    private final static String TAG = "LoginView";  
    public LoginView(Context context) {  
        super(context);  
        init(context);  
    }  
  
    public LoginView(Context context, AttributeSet attrs) {  
        super(context, attrs);  
        init(context);  
    }  
  
    public LoginView(Context context, AttributeSet attrs, int defStyle) {  
        super(context, attrs, defStyle);  
        init(context);  
    }  
  
    private void init(Context context) {  
        setDescendantFocusability(FOCUS_AFTER_DESCENDANTS);  
        setFocusable(true);  
        mScroller = new Scroller(context);  
        mScreenHeigh = BaseTools.getWindowHeigh(context);  
        mScreenWidth = BaseTools.getWindowWidth(context);  
        // 背景设置成透明  
        this.setBackgroundColor(Color.argb(0, 0, 0, 0));  
        final View view = LayoutInflater.from(context).inflate(R.layout.view_login,null);  
        LayoutParams params = new LayoutParams(LayoutParams.MATCH_PARENT,LayoutParams.WRAP_CONTENT);// 如果不给他设这个,它的布局的MATCH_PARENT就不知道该是多少  
        addView(view, params);// ViewGroup的大小,  
        // 背景设置成透明  
        this.setBackgroundColor(Color.argb(0, 0, 0, 0));  
        view.post(new Runnable() {  
              
            @Override  
            public void run() {  
                // TODO Auto-generated method stub  
                viewHeight = view.getHeight();  
            }  
        });  
        LoginView.this.scrollTo(0, mScreenHeigh);  
        ImageView btn_close = (ImageView)view.findViewById(R.id.btn_close);  
        btn_close.setOnClickListener(new OnClickListener() {  
              
            @Override  
            public void onClick(View v) {  
                // TODO Auto-generated method stub  
                dismiss();  
            }  
        });  
    }  
  
    @Override  
    public boolean onInterceptTouchEvent(MotionEvent ev) {  
        if(!mEnabled){  
            return false;  
        }  
        return super.onInterceptTouchEvent(ev);  
    }  
      
    @Override  
    public boolean onTouchEvent(MotionEvent event) {  
        // TODO Auto-generated method stub  
        switch (event.getAction()) {  
        case MotionEvent.ACTION_DOWN:  
            downY = (int) event.getY();  
            Log.d(TAG, "downY = " + downY);  
            //如果完全显示的时候,让布局得到触摸监听,如果不显示,触摸事件不拦截,向下传递  
            if(isShow){  
                return true;  
            }  
            break;  
        case MotionEvent.ACTION_MOVE:  
            moveY = (int) event.getY();  
            scrollY = moveY - downY;  
            //向下滑动  
            if (scrollY > 0) {  
                if(isShow){  
                    scrollTo(0, -Math.abs(scrollY));  
                }  
            }else{  
                if(mScreenHeigh - this.getTop() <= viewHeight && !isShow){  
                    scrollTo(0, Math.abs(viewHeight - scrollY));  
                }  
            }  
            break;  
        case MotionEvent.ACTION_UP:  
            upY = (int) event.getY();  
            if(isShow){  
                if( this.getScrollY() <= -(viewHeight /2)){  
                    startMoveAnim(this.getScrollY(),-(viewHeight - this.getScrollY()), mDuration);  
                    isShow = false;  
                    Log.d("isShow", "false");  
                } else {  
                    startMoveAnim(this.getScrollY(), -this.getScrollY(), mDuration);  
                    isShow = true;  
                    Log.d("isShow", "true");  
                }  
            }  
            Log.d("this.getScrollY()", ""+this.getScrollY());  
            changed();  
            break;  
        case MotionEvent.ACTION_OUTSIDE:  
            Log.d(TAG, "ACTION_OUTSIDE");  
            break;  
        default:  
            break;  
        }  
        return super.onTouchEvent(event);  
    }  
      
    /** 
     * 拖动动画 
     * @param startY   
     * @param dy  移动到某点的Y坐标距离 
     * @param duration 时间 
     */  
    public void startMoveAnim(int startY, int dy, int duration) {  
        isMoving = true;  
        mScroller.startScroll(0, startY, 0, dy, duration);  
        invalidate();//通知UI线程的更新  
    }  
      
    @Override  
    public void computeScroll() {  
        if (mScroller.computeScrollOffset()) {  
            scrollTo(mScroller.getCurrX(), mScroller.getCurrY());  
            // 更新界面  
            postInvalidate();  
            isMoving = true;  
        } else {  
            isMoving = false;  
        }  
        super.computeScroll();  
    }  
      
    /** 开打界面 */  
    public void show(){  
        if(!isShow && !isMoving){  
            LoginView.this.startMoveAnim(-viewHeight,   viewHeight, mDuration);  
            isShow = true;  
            Log.d("isShow", "true");  
            changed();  
        }  
    }  
      
    /** 关闭界面 */  
    public void dismiss(){  
        if(isShow && !isMoving){  
            LoginView.this.startMoveAnim(0, -viewHeight, mDuration);  
            isShow = false;  
            Log.d("isShow", "false");  
            changed();  
        }  
    }  
      
    /** 是否打开 */  
    public boolean isShow(){  
        return isShow;  
    }  
      
    /** 获取是否可以拖动*/  
    public boolean isSlidingEnabled() {  
        return mEnabled;  
    }  
      
    /** 设置是否可以拖动*/  
    public void setSlidingEnabled(boolean enabled) {  
        mEnabled = enabled;  
    }  
      
    /** 
     * 设置监听接口,实现遮罩层效果 
     */  
    public void setOnStatusListener(onStatusListener listener){  
        this.statusListener = listener;  
    }  
      
    public void setOutsideTouchable(boolean touchable) {  
        mOutsideTouchable = touchable;  
    }  
    /** 
     * 显示状态发生改变时候执行回调借口 
     */  
    public void changed(){  
        if(statusListener != null){  
            if(isShow){  
                statusListener.onShow();  
            }else{  
                statusListener.onDismiss();  
            }  
        }  
    }  
      
    /** 监听接口*/  
    public onStatusListener statusListener;  
      
    /** 
     * 监听接口,来在主界面监听界面变化状态 
     */  
    public interface onStatusListener{  
        /**  开打状态  */  
        public void onShow();  
        /**  关闭状态  */  
        public void onDismiss();  
    }  
      
    @Override  
    protected void onLayout(boolean changed, int l, int t, int r, int b) {  
        // TODO Auto-generated method stub  
        super.onLayout(changed, l, t, r, b);  
    }  
}  

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

最后,上源码:下载地址
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
相关文章推荐