0
点赞
收藏
分享

微信扫一扫

Android 仿zaker用手向上推动的效果(推动门效果



 最近在商店下载了zaker ,闲暇时拿来看看新闻!发现每次打开软件进入主界面时有个界面,需要你把它往上滑到一

定距离才能进入到主界面。每次进入软件时它的背景可能不一样,在往上拨的时候你会看见主界面,好似向上推的门一样!

打开它你就可以看到外面的世界。与窗帘有点不同的是在你没有拉开足够距离时,它会俏皮的关闭自己不让你看到外面的美景。

      说这么多想像起来挺模糊的,那让我们看看实际效果图,我现在打开zaker截两张图 如下所示 

Android 仿zaker用手向上推动的效果(推动门效果_java

              

Android 仿zaker用手向上推动的效果(推动门效果_android_02

     左边一张是不做任何操作时的效果,右边一张是界面跟着手往上滑的效果,在滑的时候你会发现即将进入的界面,当你没有滑到一定的距离松开手后窗帘会慢慢关闭,在合闭的时候有个弹动的效果。非常棒!

正如你看到的图片内容,今天是国庆节,在这里祝大家节日快乐!所以你每次打开的时候图片可能不一样。这个效果看起来有点像android里面讲的TranslateAnimation动画,我觉得用Animation动画应该很难实现出这种效果(当然有用animation实现zaker这种效果的大牛可以与我们分享下)。QQ里也有这么个功能的界面,只不过QQ的是展示一张图片两到三秒后再进入主界面。

    下面开始实现这种效果 推动们效果。

    根据效果我实现出一个类,方便与需要用的筒靴使用。代码中有注释


 


    1. package com.manymore13.scrollerdemo;  
    2.   
    3. import android.annotation.SuppressLint;  
    4. import android.content.Context;  
    5. import android.graphics.Color;  
    6. import android.graphics.drawable.Drawable;  
    7. import android.util.AttributeSet;  
    8. import android.util.DisplayMetrics;  
    9. import android.util.Log;  
    10. import android.view.MotionEvent;  
    11. import android.view.View;  
    12. import android.view.WindowManager;  
    13. import android.view.animation.AccelerateInterpolator;  
    14. import android.view.animation.BounceInterpolator;  
    15. import android.view.animation.Interpolator;  
    16. import android.widget.FrameLayout;  
    17. import android.widget.ImageView;  
    18. import android.widget.RelativeLayout;  
    19. import android.widget.Scroller;  
    20.   
    21. public class PullDoorView extends RelativeLayout {  
    22.   
    23. private Context mContext;  
    24.   
    25. private Scroller mScroller;  
    26.   
    27. private int mScreenWidth = 0;  
    28.   
    29. private int mScreenHeigh = 0;  
    30.   
    31. private int mLastDownY = 0;  
    32.   
    33. private int mCurryY;  
    34.   
    35. private int mDelY;  
    36.   
    37. private boolean mCloseFlag = false;  
    38.   
    39. private ImageView mImgView;  
    40.   
    41. public PullDoorView(Context context) {  
    42. super(context);  
    43.         mContext = context;  
    44.         setupView();  
    45.     }  
    46.   
    47. public PullDoorView(Context context, AttributeSet attrs) {  
    48. super(context, attrs);  
    49.         mContext = context;  
    50.         setupView();  
    51.     }  
    52.   
    53. @SuppressLint("NewApi")  
    54. private void setupView() {  
    55.   
    56. // 这个Interpolator你可以设置别的 我这里选择的是有弹跳效果的Interpolator  
    57. new BounceInterpolator();  
    58. new Scroller(mContext, polator);  
    59.   
    60. // 获取屏幕分辨率  
    61.         WindowManager wm = (WindowManager) (mContext  
    62.                 .getSystemService(Context.WINDOW_SERVICE));  
    63. new DisplayMetrics();  
    64.         wm.getDefaultDisplay().getMetrics(dm);  
    65.         mScreenHeigh = dm.heightPixels;  
    66.         mScreenWidth = dm.widthPixels;  
    67.   
    68. // 这里你一定要设置成透明背景,不然会影响你看到底层布局  
    69. this.setBackgroundColor(Color.argb(0, 0, 0, 0));  
    70. new ImageView(mContext);  
    71. new LayoutParams(LayoutParams.MATCH_PARENT,  
    72.                 LayoutParams.MATCH_PARENT));  
    73. // 填充整个屏幕  
    74. // 默认背景  
    75.         addView(mImgView);  
    76.     }  
    77.   
    78. // 设置推动门背景  
    79. public void setBgImage(int id) {  
    80.         mImgView.setImageResource(id);  
    81.     }  
    82.   
    83. // 设置推动门背景  
    84. public void setBgImage(Drawable drawable) {  
    85.         mImgView.setImageDrawable(drawable);  
    86.     }  
    87.   
    88. // 推动门的动画  
    89. public void startBounceAnim(int startY, int dy, int duration) {  
    90. 0, startY, 0, dy, duration);  
    91.         invalidate();  
    92.     }  
    93.   
    94. @Override  
    95. public boolean onTouchEvent(MotionEvent event) {  
    96. int action = event.getAction();  
    97. switch (action) {  
    98. case MotionEvent.ACTION_DOWN:  
    99. int) event.getY();  
    100. "ACTION_DOWN=" + mLastDownY);  
    101. return true;  
    102. case MotionEvent.ACTION_MOVE:  
    103. int) event.getY();  
    104. "ACTION_MOVE=" + mCurryY);  
    105.             mDelY = mCurryY - mLastDownY;  
    106. // 只准上滑有效  
    107. if (mDelY < 0) {  
    108. 0, -mDelY);  
    109.             }  
    110. "-------------  " + mDelY);  
    111.   
    112. break;  
    113. case MotionEvent.ACTION_UP:  
    114. int) event.getY();  
    115.             mDelY = mCurryY - mLastDownY;  
    116. if (mDelY < 0) {  
    117.   
    118. if (Math.abs(mDelY) > mScreenHeigh / 2) {  
    119.   
    120. // 向上滑动超过半个屏幕高的时候 开启向上消失动画  
    121. this.getScrollY(), mScreenHeigh, 450);  
    122. true;  
    123.   
    124. else {  
    125. // 向上滑动未超过半个屏幕高的时候 开启向下弹动动画  
    126. this.getScrollY(), -this.getScrollY(), 1000);  
    127.   
    128.                 }  
    129.             }  
    130.   
    131. break;  
    132.         }  
    133. return super.onTouchEvent(event);  
    134.     }  
    135.   
    136. @Override  
    137. public void computeScroll() {  
    138.   
    139. if (mScroller.computeScrollOffset()) {  
    140.             scrollTo(mScroller.getCurrX(), mScroller.getCurrY());  
    141. "scroller", "getCurrX()= " + mScroller.getCurrX()  
    142. "     getCurrY()=" + mScroller.getCurrY()  
    143. "  getFinalY() =  " + mScroller.getFinalY());  
    144. // 不要忘记更新界面  
    145.             postInvalidate();  
    146. else {  
    147. if (mCloseFlag) {  
    148. this.setVisibility(View.GONE);  
    149.             }  
    150.         }  
    151.     }  
    152.   
    153. }


    View中的scrollTo函数,使View具有滚动效果,就像ListView一样,它的内容是可以滑动的,ViewGroup继承View,所以Relativelayout可以做到滑动效果,另外向下弹动效果是用到Scroller类,而在构造Scroller类时加入BounceInterpolator,你也可以加入别的插值器。其实Scroller只是一个辅助View滑动的一个类,帮助View存储滑动数据的类,当view滑动时,你可以从scroller中取出滑动数据,而真实滑动运动效果其实是利用scrollTo瞬间达到目的地,View结合scroller以及scroller就可以实现这种推动门的效果。

    运行Demo程序 查看效果

    Android 仿zaker用手向上推动的效果(推动门效果_android_03

     

    上面的图片是模拟器上运行的截图,看起来有点卡。其实在真机上测试的很流畅。zaker的效果基本是这个样子。

    如果你想使用这个类的话,想实现这种效果的话,那么请满足下面两个条件。

    1. PullDoorView  match_parent占据全屏 像下面这样整个项目父ViewGroup可以用Framelayout 

    2.PullDoorView 必须要放在界面的最上面 使其可以获取touch事件

     

     


     


    1. <com.manymore13.scrollerdemo.PullDoorView  
    2. android:id="@+id/myImage"  
    3. android:layout_width="match_parent"  
    4. android:layout_height="match_parent"  
    5. android:background="#ddd" >  
    6.   
    7. <Button  
    8. android:id="@+id/btn_above"  
    9. android:layout_width="wrap_content"  
    10. android:layout_height="wrap_content"  
    11. android:layout_centerInParent="true"  
    12. android:text="第二层" />  
    13.   
    14. <TextView  
    15. android:id="@+id/tv_hint"  
    16. android:layout_width="wrap_content"  
    17. android:layout_height="wrap_content"  
    18. android:layout_alignParentBottom="true"  
    19. android:layout_centerHorizontal="true"  
    20. android:layout_marginBottom="10dp"  
    21. android:text="上滑可以进入首页"  
    22. android:textColor="#ffffffff"  
    23. android:textSize="18sp" />  
    24. </com.manymore13.scrollerdemo.PullDoorView>


     

    因为PullDoorView是一个RelativeLayout,所以你可以发挥自己的想象在里面添加任何View或者ViewGroup,上面XML中我添加了一个button和一个textView,我想这两个View你可以再上面的动态图片中应该看到了。另外PullDoorView可以根据需要更换背景图片

     你可以 PullDoorView.setBgImage(图片)

    好了就写这么多,仿zaker用手向上推动的效果的实现到此为止。

    点击源码下载

    举报

    相关推荐

    0 条评论