最近在商店下载了zaker ,闲暇时拿来看看新闻!发现每次打开软件进入主界面时有个界面,需要你把它往上滑到一
定距离才能进入到主界面。每次进入软件时它的背景可能不一样,在往上拨的时候你会看见主界面,好似向上推的门一样!
打开它你就可以看到外面的世界。与窗帘有点不同的是在你没有拉开足够距离时,它会俏皮的关闭自己不让你看到外面的美景。
说这么多想像起来挺模糊的,那让我们看看实际效果图,我现在打开zaker截两张图 如下所示
左边一张是不做任何操作时的效果,右边一张是界面跟着手往上滑的效果,在滑的时候你会发现即将进入的界面,当你没有滑到一定的距离松开手后窗帘会慢慢关闭,在合闭的时候有个弹动的效果。非常棒!
正如你看到的图片内容,今天是国庆节,在这里祝大家节日快乐!所以你每次打开的时候图片可能不一样。这个效果看起来有点像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程序 查看效果
上面的图片是模拟器上运行的截图,看起来有点卡。其实在真机上测试的很流畅。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用手向上推动的效果的实现到此为止。
点击源码下载