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类，大概的你也知道核心代码会是哪些内容，下面列举下

核心代码：

窗帘效果：

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() {@Overridepublic void run() {// TODO Auto-generated method stubcurtainHeigh  = 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线程的更新}@Overrideprotected void onLayout(boolean changed, int l, int t, int r, int b) {// TODO Auto-generated method stubsuper.onLayout(changed, l, t, r, b);}@Overridepublic void computeScroll() {//判断是否还在滚动，还在滚动为trueif (mScroller.computeScrollOffset()) {scrollTo(mScroller.getCurrX(), mScroller.getCurrY());//更新界面postInvalidate();isMove = true;} else {isMove = false;}super.computeScroll();}@Overridepublic boolean onTouch(View v, MotionEvent event) {// TODO Auto-generated method stubif (!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;}}

登录界面：

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() {@Overridepublic void run() {// TODO Auto-generated method stubviewHeight = view.getHeight();}});LoginView.this.scrollTo(0, mScreenHeigh);ImageView btn_close = (ImageView)view.findViewById(R.id.btn_close);btn_close.setOnClickListener(new OnClickListener() {@Overridepublic void onClick(View v) {// TODO Auto-generated method stubdismiss();}});}@Overridepublic boolean onInterceptTouchEvent(MotionEvent ev) {if(!mEnabled){return false;}return super.onInterceptTouchEvent(ev);}@Overridepublic boolean onTouchEvent(MotionEvent event) {// TODO Auto-generated method stubswitch (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线程的更新}@Overridepublic 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();}@Overrideprotected void onLayout(boolean changed, int l, int t, int r, int b) {// TODO Auto-generated method stubsuper.onLayout(changed, l, t, r, b);}}

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

最后，上源码：下载地址