Android 侧滑菜单的实现，参考网上的代码，实现侧滑菜单。最重要的是这个动画类UgcAnimations，如何使用动画类来侧滑的封装FlipperLayout。
1、实现效果
2、动画类UgcAnimations
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
|
package com.mmsx.base; import android.content.Context; import android.view.View; import android.view.ViewGroup.MarginLayoutParams; import android.view.animation.AlphaAnimation; import android.view.animation.Animation; import android.view.animation.AnimationSet; import android.view.animation.AnticipateInterpolator; import android.view.animation.OvershootInterpolator; import android.view.animation.RotateAnimation; import android.view.animation.ScaleAnimation; import android.view.animation.TranslateAnimation; import android.widget.ImageView; import android.widget.RelativeLayout; /** * Path动画类 * */public class UgcAnimations { private static int xOffset = 15; private static int yOffset = -13; public static void initOffset(Context context) { xOffset = (int) (15 * context.getResources().getDisplayMetrics().density); yOffset = -(int) (13 * context.getResources().getDisplayMetrics().density); } public static Animation getRotateAnimation(float fromDegrees, float toDegrees, long durationMillis) { RotateAnimation rotate = new RotateAnimation(fromDegrees, toDegrees, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f); rotate.setDuration(durationMillis); rotate.setFillAfter(true); return rotate; } public static Animation getAlphaAnimation(float fromAlpha, float toAlpha, long durationMillis) { AlphaAnimation alpha = new AlphaAnimation(fromAlpha, toAlpha); alpha.setDuration(durationMillis); alpha.setFillAfter(true); return alpha; } public static Animation getScaleAnimation(long durationMillis) { ScaleAnimation scale = new ScaleAnimation(1.0f, 1.5f, 1.0f, 1.5f, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f); scale.setDuration(durationMillis); return scale; } public static Animation getTranslateAnimation(float fromXDelta, float toXDelta, float fromYDelta, float toYDelta, long durationMillis) { TranslateAnimation translate = new TranslateAnimation(fromXDelta, toXDelta, fromYDelta, toYDelta); translate.setDuration(durationMillis); translate.setFillAfter(true); return translate; } public static void startOpenAnimation(RelativeLayout relativeLayout, ImageView background, ImageView menu, long durationMillis) { background.setVisibility(View.VISIBLE); relativeLayout.setVisibility(View.VISIBLE); background.startAnimation(getAlphaAnimation(0f, 1f, durationMillis)); menu.startAnimation(getRotateAnimation(0, 90, durationMillis)); for (int i = 0; i < relativeLayout.getChildCount(); i++) { ImageView imageView = (ImageView) relativeLayout.getChildAt(i); imageView.setVisibility(View.VISIBLE); MarginLayoutParams params = (MarginLayoutParams) imageView .getLayoutParams(); AnimationSet set = new AnimationSet(true); set.addAnimation(getRotateAnimation(-270, 0, durationMillis)); set.addAnimation(getAlphaAnimation(0.5f, 1.0f, durationMillis)); set.addAnimation(getTranslateAnimation( -params.leftMargin + xOffset, 0f, params.bottomMargin + yOffset, 0f, durationMillis)); set.setFillAfter(true); set.setDuration(durationMillis); set.setStartOffset((i * 100) / (-1 + relativeLayout.getChildCount())); set.setInterpolator(new OvershootInterpolator(1f)); imageView.startAnimation(set); } } public static void startCloseAnimation(final RelativeLayout relativeLayout, final ImageView background, ImageView menu, long durationMillis) { background.startAnimation(getAlphaAnimation(1f, 0f, durationMillis)); menu.startAnimation(getRotateAnimation(90, 0, durationMillis)); for (int i = 0; i < relativeLayout.getChildCount(); i++) { final ImageView imageView = (ImageView) relativeLayout .getChildAt(i); MarginLayoutParams params = (MarginLayoutParams) imageView .getLayoutParams(); AnimationSet set = new AnimationSet(true); set.addAnimation(getRotateAnimation(0, -270, durationMillis)); set.addAnimation(getAlphaAnimation(1.0f, 0.5f, durationMillis)); set.addAnimation(getTranslateAnimation(0f, -params.leftMargin + xOffset, 0f, params.bottomMargin + yOffset, durationMillis)); set.setFillAfter(true); set.setDuration(durationMillis); set.setStartOffset(((relativeLayout.getChildCount() - i) * 100) / (-1 + relativeLayout.getChildCount())); set.setInterpolator(new AnticipateInterpolator(1f)); set.setAnimationListener(new Animation.AnimationListener() { public void onAnimationStart(Animation arg0) { } public void onAnimationRepeat(Animation arg0) { } public void onAnimationEnd(Animation arg0) { relativeLayout.setVisibility(View.GONE); background.setVisibility(View.GONE); } }); imageView.startAnimation(set); } } public static Animation clickAnimation(long durationMillis) { AnimationSet set = new AnimationSet(true); set.addAnimation(getAlphaAnimation(1.0f, 0.3f, durationMillis)); set.addAnimation(getScaleAnimation(durationMillis)); set.setDuration(durationMillis); return set; } } |
3、封装使用动画类FlipperLayout
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
|
package com.mmsx.base; import android.content.Context; import android.util.AttributeSet; import android.util.TypedValue; import android.view.MotionEvent; import android.view.VelocityTracker; import android.view.View; import android.view.ViewConfiguration; import android.view.ViewGroup; import android.widget.Scroller; /** * 自己重写的ViewGroup,用与滑动切换界面使用,代码不详解,慢点看的话应该能看懂的... */public class FlipperLayout extends ViewGroup { private Scroller mScroller; private VelocityTracker mVelocityTracker; private int mWidth; public static final int SCREEN_STATE_CLOSE = 0; public static final int SCREEN_STATE_OPEN = 1; public static final int TOUCH_STATE_RESTART = 0; public static final int TOUCH_STATE_SCROLLING = 1; public static final int SCROLL_STATE_NO_ALLOW = 0; public static final int SCROLL_STATE_ALLOW = 1; private int mScreenState = 0; private int mTouchState = 0; private int mScrollState = 0; private int mVelocityValue = 0; private boolean mOnClick = false; private onUgcDismissListener mOnUgcDismissListener; private onUgcShowListener mOnUgcShowListener; public FlipperLayout(Context context) { super(context); mScroller = new Scroller(context); mWidth = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 54, getResources().getDisplayMetrics()); } public FlipperLayout(Context context, AttributeSet attrs, int defStyle) { super(context, attrs, defStyle); } public FlipperLayout(Context context, AttributeSet attrs) { super(context, attrs); } protected void onLayout(boolean changed, int l, int t, int r, int b) { for (int i = 0; i < getChildCount(); i++) { View child = getChildAt(i); int height = child.getMeasuredHeight(); int width = child.getMeasuredWidth(); child.layout(0, 0, width, height); } } protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { super.onMeasure(widthMeasureSpec, heightMeasureSpec); int width = MeasureSpec.getSize(widthMeasureSpec); int height = MeasureSpec.getSize(heightMeasureSpec); setMeasuredDimension(width, height); for (int i = 0; i < getChildCount(); i++) { getChildAt(i).measure(widthMeasureSpec, heightMeasureSpec); } } public boolean dispatchTouchEvent(MotionEvent ev) { obtainVelocityTracker(ev); switch (ev.getAction()) { case MotionEvent.ACTION_DOWN: mTouchState = mScroller.isFinished() ? TOUCH_STATE_RESTART : TOUCH_STATE_SCROLLING; if (mTouchState == TOUCH_STATE_RESTART) { int x = (int) ev.getX(); int screenWidth = getWidth(); if (x <= mWidth && mScreenState == SCREEN_STATE_CLOSE && mTouchState == TOUCH_STATE_RESTART || x >= screenWidth - mWidth && mScreenState == SCREEN_STATE_OPEN && mTouchState == TOUCH_STATE_RESTART) { if (mScreenState == SCREEN_STATE_OPEN) { mOnClick = true; } mScrollState = SCROLL_STATE_ALLOW; } else { mOnClick = false; mScrollState = SCROLL_STATE_NO_ALLOW; } } else { return false; } break; case MotionEvent.ACTION_MOVE: mVelocityTracker.computeCurrentVelocity(1000, ViewConfiguration.getMaximumFlingVelocity()); if (mScrollState == SCROLL_STATE_ALLOW && getWidth() - (int) ev.getX() < mWidth) { return true; } break; case MotionEvent.ACTION_UP: releaseVelocityTracker(); if (mOnClick) { mOnClick = false; mScreenState = SCREEN_STATE_CLOSE; mScroller.startScroll(getChildAt(1).getScrollX(), 0, -getChildAt(1).getScrollX(), 0, 800); invalidate(); } break; } return super.dispatchTouchEvent(ev); } public boolean onInterceptTouchEvent(MotionEvent ev) { obtainVelocityTracker(ev); switch (ev.getAction()) { case MotionEvent.ACTION_DOWN: mTouchState = mScroller.isFinished() ? TOUCH_STATE_RESTART : TOUCH_STATE_SCROLLING; if (mTouchState == TOUCH_STATE_SCROLLING) { return false; } break; case MotionEvent.ACTION_MOVE: mOnClick = false; mVelocityTracker.computeCurrentVelocity(1000, ViewConfiguration.getMaximumFlingVelocity()); if (mScrollState == SCROLL_STATE_ALLOW && Math.abs(mVelocityTracker.getXVelocity()) > 200) { return true; } break; case MotionEvent.ACTION_UP: releaseVelocityTracker(); if (mScrollState == SCROLL_STATE_ALLOW && mScreenState == SCREEN_STATE_OPEN) { return true; } break; } return super.onInterceptTouchEvent(ev); } public boolean onTouchEvent(MotionEvent event) { obtainVelocityTracker(event); switch (event.getAction()) { case MotionEvent.ACTION_DOWN: mTouchState = mScroller.isFinished() ? TOUCH_STATE_RESTART : TOUCH_STATE_SCROLLING; if (mTouchState == TOUCH_STATE_SCROLLING) { return false; } break; case MotionEvent.ACTION_MOVE: mVelocityTracker.computeCurrentVelocity(1000, ViewConfiguration.getMaximumFlingVelocity()); mVelocityValue = (int) mVelocityTracker.getXVelocity(); getChildAt(1).scrollTo(-(int) event.getX(), 0); break; case MotionEvent.ACTION_UP: if (mScrollState == SCROLL_STATE_ALLOW) { if (mVelocityValue > 2000) { mScreenState = SCREEN_STATE_OPEN; mScroller .startScroll( getChildAt(1).getScrollX(), 0, -(getWidth() - Math.abs(getChildAt(1) .getScrollX()) - mWidth), 0, 250); invalidate(); } else if (mVelocityValue < -2000) { mScreenState = SCREEN_STATE_CLOSE; mScroller.startScroll(getChildAt(1).getScrollX(), 0, -getChildAt(1).getScrollX(), 0, 250); invalidate(); } else if (event.getX() < getWidth() / 2) { mScreenState = SCREEN_STATE_CLOSE; mScroller.startScroll(getChildAt(1).getScrollX(), 0, -getChildAt(1).getScrollX(), 0, 800); invalidate(); } else { mScreenState = SCREEN_STATE_OPEN; mScroller .startScroll( getChildAt(1).getScrollX(), 0, -(getWidth() - Math.abs(getChildAt(1) .getScrollX()) - mWidth), 0, 800); invalidate(); } } break; } return super.onTouchEvent(event); } public void open() { mTouchState = mScroller.isFinished() ? TOUCH_STATE_RESTART : TOUCH_STATE_SCROLLING; if (mTouchState == TOUCH_STATE_RESTART) { mScreenState = SCREEN_STATE_OPEN; mScroller.startScroll(getChildAt(1).getScrollX(), 0, -(getWidth() - Math.abs(getChildAt(1).getScrollX()) - mWidth), 0, 800); invalidate(); } } //关闭当前的侧滑菜单，用view打开点击事件的页面 public void close(View view) { mScreenState = SCREEN_STATE_CLOSE; mScroller.startScroll(getChildAt(1).getScrollX(), 0, -getChildAt(1) .getScrollX(), 0, 800); invalidate(); setContentView(view); } public void computeScroll() { super.computeScroll(); if (mScroller.computeScrollOffset()) { getChildAt(1).scrollTo(mScroller.getCurrX(), mScroller.getCurrY()); postInvalidate(); } else { if (mScreenState == SCREEN_STATE_OPEN) { if (mOnUgcDismissListener != null) { mOnUgcDismissListener.dismiss(); } } else if (mScreenState == SCREEN_STATE_CLOSE) { if (mOnUgcShowListener != null) { mOnUgcShowListener.show(); } } } } private void obtainVelocityTracker(MotionEvent event) { if (mVelocityTracker == null) { mVelocityTracker = VelocityTracker.obtain(); } mVelocityTracker.addMovement(event); } private void releaseVelocityTracker() { if (mVelocityTracker != null) { mVelocityTracker.recycle(); mVelocityTracker = null; } } public int getScreenState() { return mScreenState; } public void setContentView(View view) { removeViewAt(1); addView(view, 1, getLayoutParams()); } public interface OnOpenListener { public abstract void open(); } public interface OnCloseListener { public abstract void close(); } public interface onUgcDismissListener { public abstract void dismiss(); } public interface onUgcShowListener { public abstract void show(); } public void setOnUgcDismissListener( onUgcDismissListener onUgcDismissListener) { mOnUgcDismissListener = onUgcDismissListener; } public void setOnUgcShowListener(onUgcShowListener onUgcShowListener) { mOnUgcShowListener = onUgcShowListener; } } |
4、主界面MainActivity
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
|
package com.mmsx.activity; import com.mmsx.activity.SideslipMenu.onChangeViewListener; import com.mmsx.activity.SideslipOther.onDataListener; import com.mmsx.base.FlipperLayout; import com.mmsx.base.FlipperLayout.OnOpenListener; import com.mmsx.base.ViewUtil; import android.os.Bundle; import android.app.Activity; import android.view.ViewGroup.LayoutParams; import android.widget.Toast; public class MainActivity extends Activity implements OnOpenListener{ //侧滑主要控制类，设置跟布局 private FlipperLayout mRoot; //侧滑的默认界面，主界面 private SideslipHome mHome; //侧滑的菜单，进行选择的 private SideslipMenu mSideslipMenu; //其他菜单列表选择的效果 private SideslipOther mOther; //退出时间间隔变量 private long mExitTime; //时间间隔2s private static final int INTERVAL = 2000; //侧滑菜单选中的item private int mViewPosition; //侧滑传递的标题 private String mstrTitle; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); //创建容器,并设置全屏大小 mRoot = new FlipperLayout(this); //布局的参数 LayoutParams params = new LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT); mRoot.setLayoutParams(params); //创建菜单界面和内容首页界面,并添加到容器中,用于初始显示 mHome = new SideslipHome(this, this); mSideslipMenu = new SideslipMenu(this); mRoot.addView(mSideslipMenu.getView(), params); mRoot.addView(mHome.getView(), params); //设置跟布局 setContentView(mRoot); //设置监听 setListener(); } //设置监听 private void setListener() { mHome.setOnOpenListener(this); //监听菜单界面切换显示内容(onChangeViewListener接口在SideslipMenu中定义) mSideslipMenu.setOnChangeViewListener(new onChangeViewListener() { public void onChangeView(int arg0) { mViewPosition = arg0; mOther = new SideslipOther(MainActivity.this); switch (arg0) { case ViewUtil.HOME: mRoot.close(mHome.getView()); break; case ViewUtil.MESSAGE: mstrTitle = "消息"; //设置数据接口监听 mOther.setDataTitle(new DataTitle()); mRoot.close(mOther.getView()); break; case ViewUtil.FRIENDS: mstrTitle = "好友"; mOther.setDataTitle(new DataTitle()); mRoot.close(mOther.getView()); break; case ViewUtil.PHOTO: mstrTitle = "照片"; mOther.setDataTitle(new DataTitle()); mRoot.close(mOther.getView()); break; case ViewUtil.VIEWED: mstrTitle = "转帖"; mOther.setDataTitle(new DataTitle()); mRoot.close(mOther.getView()); break; case ViewUtil.GIFTS: mstrTitle = "礼物"; mOther.setDataTitle(new DataTitle()); mRoot.close(mOther.getView()); break; case ViewUtil.RECOMMEND: mstrTitle = "游戏"; mOther.setDataTitle(new DataTitle()); mRoot.close(mOther.getView()); break; case ViewUtil.LBS: mstrTitle = "附近 "; mOther.setDataTitle(new DataTitle()); mRoot.close(mOther.getView()); break; default: break; } } }); } //传递数据到侧滑选中的页面 private class DataTitle implements onDataListener{ @Override public String getDataTitle() { return mstrTitle; } } @Override public void open() { if (mRoot.getScreenState() == FlipperLayout.SCREEN_STATE_CLOSE) { mRoot.open(); } } /** * 返回键监听 */ public void onBackPressed() { /** * 如果界面的path菜单没有关闭时,先将path菜单关闭,否则则判断两次返回时间间隔,小于两秒则退出程序 */ if (mRoot.getScreenState() == FlipperLayout.SCREEN_STATE_OPEN) { if (mSideslipMenu.getUgcIsShowing()) { mSideslipMenu.closeUgc(); } else { exit(); } } else { switch (mViewPosition) { case ViewUtil.HOME: if (mHome.getUgcIsShowing()) { mHome.closeUgc(); } else { exit(); } break; default: exit(); break; } } } /** * 判断两次返回时间间隔,小于两秒则退出程序 */ private void exit() { if (System.currentTimeMillis() - mExitTime > INTERVAL) { Toast.makeText(this, "再按一次返回键,可直接退出程序", Toast.LENGTH_SHORT).show(); mExitTime = System.currentTimeMillis(); } else { finish(); android.os.Process.killProcess(android.os.Process.myPid()); System.exit(0); } } } |
5、SideslipHome
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
|
package com.mmsx.activity; import com.mmsx.base.FlipperLayout.OnOpenListener; import android.app.Activity; import android.content.Context; import android.view.LayoutInflater; import android.view.View; import android.widget.TextView; public class SideslipHome { private Context mContext; private Activity mActivity; private View mHomeView; private boolean mUgcIsShowing = false; private OnOpenListener mOnOpenListener; public SideslipHome(Context context, Activity activity) { mContext = context; mActivity = activity; mHomeView = LayoutInflater.from(context).inflate(R.layout.sideslip_home, null); initUI(); } private void initUI() { TextView ivTitleName = (TextView)mHomeView.findViewById(R.id.ivTitleName); ivTitleName.setText("主页动态"); } public void setOnOpenListener(OnOpenListener onOpenListener) { mOnOpenListener = onOpenListener; } public View getView() { return mHomeView; } /** * 获取Path菜单显示状态 */ public boolean getUgcIsShowing() { return mUgcIsShowing; } /** * 关闭Path菜单 */ public void closeUgc() { mUgcIsShowing = false; } } |
好了，以上就是本文的全部叙述，希望大家喜欢。
