您的位置: 首页  >  文章  >  仿人人客户端向右滑出式菜单

仿人人客户端向右滑出式菜单

分类: 文章 • 2025-01-02 09:18:46

人人客户端向右滑出式菜单：

仿人人客户端向右滑出式菜单

试着实现了一个，先上效果图：

仿人人客户端向右滑出式菜单

下面简单说明一下实现原理：

有两个activity，MainActivity和SettingActivity，实现这个效果两个步骤：

1、点击MainActivity左上角的按钮，MainActivity先切换到SettingActivity，获得MainActivity的布局快照，即一张代表其布局的bitmap

2、SettingActivity采用绝对布局，最上面先是覆盖了一张透明的imageView，接着将这个imageview填充上上一步的布局快照，然后通过位移动画移动这张imageView，给人的感觉就好像是前一个activity在移动。

待改进：加入手势控制。

希望大家提出更好的实现方法。

上代码：有注释

MainActivity.java

[java]view plaincopy
  1. importandroid.app.Activity;
  2. importandroid.content.Intent;
  3. importandroid.os.Bundle;
  4. importandroid.util.Log;
  5. importandroid.view.GestureDetector;
  6. importandroid.view.GestureDetector.OnGestureListener;
  7. importandroid.view.MotionEvent;
  8. importandroid.view.View;
  9. importandroid.view.View.OnClickListener;
  10. importandroid.view.View.OnTouchListener;
  11. importandroid.widget.Toast;
  13. publicclassMainActivityextendsActivity{
  14. @Override
  15. protectedvoidonCreate(BundlesavedInstanceState){
  16. super.onCreate(savedInstanceState);
  17. setContentView(R.layout.sample);
  18. findViewById(R.id.sample_button).setOnClickListener(
  19. newOnClickListener(){
  20. @Override
  21. publicvoidonClick(Viewv){
  22. SettingActivity.prepare(MainActivity.this,
  23. R.id.inner_content);
  24. startActivity(newIntent(MainActivity.this,
  25. SettingActivity.class));
  26. overridePendingTransition(0,0);
  27. }
  28. });
  29. }
  30. }
SettingActivity.java

[java]view plaincopy
  1. importandroid.app.Activity;
  2. importandroid.content.Context;
  3. importandroid.graphics.Bitmap;
  4. importandroid.graphics.Bitmap.Config;
  5. importandroid.graphics.Canvas;
  6. importandroid.os.Bundle;
  7. importandroid.util.TypedValue;
  8. importandroid.view.KeyEvent;
  9. importandroid.view.View;
  10. importandroid.view.View.OnClickListener;
  11. importandroid.view.WindowManager;
  12. importandroid.view.animation.Animation;
  13. importandroid.view.animation.Animation.AnimationListener;
  14. importandroid.view.animation.TranslateAnimation;
  15. importandroid.widget.AdapterView;
  16. importandroid.widget.AdapterView.OnItemClickListener;
  17. importandroid.widget.ArrayAdapter;
  18. importandroid.widget.ImageView;
  19. importandroid.widget.ListView;
  20. importandroid.widget.RelativeLayout.LayoutParams;
  22. publicclassSettingActivityextendsActivity{
  24. privateImageViewmCover;
  25. privateListViewmList;
  26. privateAnimationmStartAnimation;
  27. privateAnimationmStopAnimation;
  28. privatestaticfinalintDURATION_MS=400;
  29. privatestaticBitmapsCoverBitmap=null;
  31. //2个步骤
  32. //1.activity-->otheractivity
  33. //2.anim
  34. //先切换到另一个activity
  35. //再获得之前activity屏幕的快照将它作为一个cover覆盖在下一个屏幕的上面，然后通过动画移动这个cover，让人感觉好像是前一个屏幕的移动。
  37. publicstaticvoidprepare(Activityactivity,intid){
  38. if(sCoverBitmap!=null){
  39. sCoverBitmap.recycle();
  40. }
  41. //用指定大小生成一张透明的32位位图，并用它构建一张canvas画布
  42. sCoverBitmap=Bitmap.createBitmap(
  43. activity.findViewById(id).getWidth(),activity.findViewById(id)
  44. .getHeight(),Config.ARGB_8888);
  45. Canvascanvas=newCanvas(sCoverBitmap);
  46. //将指定的view包括其子view渲染到这种画布上，在这就是上一个activity布局的一个快照，现在这个bitmap上就是上一个activity的快照
  47. activity.findViewById(id).draw(canvas);
  48. }
  50. @Override
  51. publicvoidonCreate(BundlesavedInstanceState){
  52. super.onCreate(savedInstanceState);
  53. //绝对布局最上层覆盖了一个imageview
  54. setContentView(R.layout.main);
  55. initAnim();
  56. mCover=(ImageView)findViewById(R.id.slidedout_cover);
  57. mCover.setImageBitmap(sCoverBitmap);
  58. mCover.setOnClickListener(newOnClickListener(){
  59. @Override
  60. publicvoidonClick(Viewv){
  61. close();
  62. }
  63. });
  64. mList=(ListView)findViewById(R.id.list);
  65. mList.setAdapter(newArrayAdapter<String>(SettingActivity.this,
  66. android.R.layout.simple_list_item_1,newString[]{"First",
  67. "Second","Third","Fourth","Fifth","Sixth"}));
  68. mList.setOnItemClickListener(newOnItemClickListener(){
  70. @Override
  71. publicvoidonItemClick(AdapterView<?>arg0,Viewarg1,intarg2,
  72. longarg3){
  73. close();
  74. }
  75. });
  76. open();
  77. }
  79. publicvoidinitAnim(){
  81. //采用了绝对布局，绝对布局是view的左上角从(0,0)开始
  82. @SuppressWarnings("deprecation")
  83. finalandroid.widget.AbsoluteLayout.LayoutParamslp=newandroid.widget.AbsoluteLayout.LayoutParams(
  84. LayoutParams.FILL_PARENT,LayoutParams.FILL_PARENT,0,0);
  85. findViewById(R.id.slideout_placeholder).setLayoutParams(lp);
  87. //屏幕的宽度
  88. intdisplayWidth=((WindowManager)getSystemService(Context.WINDOW_SERVICE))
  89. .getDefaultDisplay().getWidth();
  90. //右边的位移量，60dp转换成px
  91. intsWidth=(int)TypedValue.applyDimension(
  92. TypedValue.COMPLEX_UNIT_DIP,60,getResources()
  93. .getDisplayMetrics());
  94. //将快照向右移动的偏移量
  95. finalintshift=displayWidth-sWidth;
  97. //向右移动的位移动画向右移动shift距离，y方向不变
  98. mStartAnimation=newTranslateAnimation(TranslateAnimation.ABSOLUTE,
  99. 0,TranslateAnimation.ABSOLUTE,shift,
  100. TranslateAnimation.ABSOLUTE,0,TranslateAnimation.ABSOLUTE,0);
  102. //回退时的位移动画
  103. mStopAnimation=newTranslateAnimation(TranslateAnimation.ABSOLUTE,0,
  104. TranslateAnimation.ABSOLUTE,-shift,
  105. TranslateAnimation.ABSOLUTE,0,TranslateAnimation.ABSOLUTE,0);
  106. //持续时间
  107. mStartAnimation.setDuration(DURATION_MS);
  108. //动画完成时停留在结束位置
  109. mStartAnimation.setFillAfter(true);
  110. mStartAnimation.setAnimationListener(newAnimationListener(){
  112. @Override
  113. publicvoidonAnimationStart(Animationanimation){
  114. }
  116. @Override
  117. publicvoidonAnimationRepeat(Animationanimation){
  118. }
  120. @Override
  121. publicvoidonAnimationEnd(Animationanimation){
  122. //动画结束时回调
  123. //将imageview固定在位移后的位置
  124. mCover.setAnimation(null);
  125. @SuppressWarnings("deprecation")
  126. finalandroid.widget.AbsoluteLayout.LayoutParamslp=newandroid.widget.AbsoluteLayout.LayoutParams(
  127. LayoutParams.FILL_PARENT,LayoutParams.FILL_PARENT,
  128. shift,0);
  129. mCover.setLayoutParams(lp);
  130. }
  131. });
  133. mStopAnimation.setDuration(DURATION_MS);
  134. mStopAnimation.setFillAfter(true);
  135. mStopAnimation.setAnimationListener(newAnimationListener(){
  137. @Override
  138. publicvoidonAnimationStart(Animationanimation){
  139. }
  141. @Override
  142. publicvoidonAnimationRepeat(Animationanimation){
  143. }
  145. @Override
  146. publicvoidonAnimationEnd(Animationanimation){
  147. finish();
  148. overridePendingTransition(0,0);
  149. }
  150. });
  152. }
  154. publicvoidopen(){
  155. mCover.startAnimation(mStartAnimation);
  156. }
  158. publicvoidclose(){
  159. mCover.startAnimation(mStopAnimation);
  160. }
  162. @Override
  163. publicbooleanonKeyDown(intkeyCode,KeyEventevent){
  164. //摁返回键时也要触发动画
  165. if(keyCode==KeyEvent.KEYCODE_BACK){
  166. close();
  167. returntrue;
  168. }
  169. returnsuper.onKeyDown(keyCode,event);
  170. }
  171. }
sample.xml

[html]view plaincopy
  1. <?xmlversion="1.0"encoding="utf-8"?>
  2. <RelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android"
  3. android:id="@+id/inner_content"
  4. android:layout_width="fill_parent"
  5. android:layout_height="fill_parent"
  6. android:background="@android:color/white">
  8. <LinearLayout
  9. android:layout_width="fill_parent"
  10. android:layout_height="45dip"
  11. android:background="#bb000000"
  12. android:gravity="center_vertical"
  13. android:orientation="horizontal">
  15. <Button
  16. android:id="@+id/sample_button"
  17. android:layout_width="wrap_content"
  18. android:layout_height="wrap_content"
  19. android:layout_marginRight="10dip"
  20. android:drawableTop="@drawable/menuicon"/>
  22. <TextView
  23. android:layout_width="wrap_content"
  24. android:layout_height="wrap_content"
  25. android:text="slide-outnavigation"
  26. android:textColor="#ffffff"
  27. android:textSize="19sp"/>
  28. </LinearLayout>
  30. </RelativeLayout>
main.xml

[html]view plaincopy
  1. <?xmlversion="1.0"encoding="utf-8"?>
  2. <AbsoluteLayoutxmlns:android="http://schemas.android.com/apk/res/android"
  3. android:id="@+id/layout"
  4. android:layout_width="fill_parent"
  5. android:layout_height="fill_parent">
  7. <FrameLayout
  8. android:id="@+id/slideout_placeholder"
  9. android:layout_width="fill_parent"
  10. android:layout_height="fill_parent"
  11. android:background="#777777">
  13. <ListView
  14. android:id="@+id/list"
  15. android:layout_width="fill_parent"
  16. android:layout_height="fill_parent"
  17. android:cacheColorHint="#00000000"/>
  18. </FrameLayout>
  20. <ImageView
  21. android:id="@+id/slidedout_cover"
  22. android:layout_width="fill_parent"
  23. android:layout_height="fill_parent"
  24. android:scaleType="fitXY"/>
  26. </AbsoluteLayout>

相关推荐