仿人人用戶端向右滑出式菜單

人人用戶端向右滑出式菜單：

試著實現了一個，先上：

下面簡單說明一下實現原理：

有兩個activity，MainActivity和SettingActivity，實現這個效果兩個步驟：

1、點擊MainActivity左上方的按鈕，MainActivity先切換到SettingActivity，獲得MainActivity的布局快照，即一張代表其布局的bitmap

2、SettingActivity採用絕對布局，最上面先是覆蓋了一張透明的imageView，接著將這個imageview填充上上一步的布局快照，然後通過位移動畫移動這張imageView，給人的感覺就好像是前一個activity在移動。

待改進：加入手勢控制。

希望大家提出更好的實現方法。

上代碼：有注釋

MainActivity.java

import android.app.Activity;import android.content.Intent;import android.os.Bundle;import android.util.Log;import android.view.GestureDetector;import android.view.GestureDetector.OnGestureListener;import android.view.MotionEvent;import android.view.View;import android.view.View.OnClickListener;import android.view.View.OnTouchListener;import android.widget.Toast;public class MainActivity extends Activity {@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.sample);findViewById(R.id.sample_button).setOnClickListener(new OnClickListener() {@Overridepublic void onClick(View v) {SettingActivity.prepare(MainActivity.this,R.id.inner_content);startActivity(new Intent(MainActivity.this,SettingActivity.class));overridePendingTransition(0, 0);}});}}

SettingActivity.java

import android.app.Activity;import android.content.Context;import android.graphics.Bitmap;import android.graphics.Bitmap.Config;import android.graphics.Canvas;import android.os.Bundle;import android.util.TypedValue;import android.view.KeyEvent;import android.view.View;import android.view.View.OnClickListener;import android.view.WindowManager;import android.view.animation.Animation;import android.view.animation.Animation.AnimationListener;import android.view.animation.TranslateAnimation;import android.widget.AdapterView;import android.widget.AdapterView.OnItemClickListener;import android.widget.ArrayAdapter;import android.widget.ImageView;import android.widget.ListView;import android.widget.RelativeLayout.LayoutParams;public class SettingActivity extends Activity {private ImageView mCover;private ListView mList;private Animation mStartAnimation;private Animation mStopAnimation;private static final int DURATION_MS = 400;private static Bitmap sCoverBitmap = null;// 2個步驟// 1. activity-->other activity// 2. anim// 先切換到另一個activity// 再獲得之前activity螢幕的快照將它作為一個cover覆蓋在下一個螢幕的上面，然後通過動畫移動這個cover，讓人感覺好像是前一個螢幕的移動。public static void prepare(Activity activity, int id) {if (sCoverBitmap != null) {sCoverBitmap.recycle();}// 用指定大小產生一張透明的32位位元影像，並用它構建一張canvas畫布sCoverBitmap = Bitmap.createBitmap(activity.findViewById(id).getWidth(), activity.findViewById(id).getHeight(), Config.ARGB_8888);Canvas canvas = new Canvas(sCoverBitmap);// 將指定的view包括其子view渲染到這種畫布上，在這就是上一個activity布局的一個快照，現在這個bitmap上就是上一個activity的快照activity.findViewById(id).draw(canvas);}@Overridepublic void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);// 絕對布局最上層覆蓋了一個imageviewsetContentView(R.layout.main);initAnim();mCover = (ImageView) findViewById(R.id.slidedout_cover);mCover.setImageBitmap(sCoverBitmap);mCover.setOnClickListener(new OnClickListener() {@Overridepublic void onClick(View v) {close();}});mList = (ListView) findViewById(R.id.list);mList.setAdapter(new ArrayAdapter<String>(SettingActivity.this,android.R.layout.simple_list_item_1, new String[] { " First"," Second", " Third", " Fourth", " Fifth", " Sixth" }));mList.setOnItemClickListener(new OnItemClickListener() {@Overridepublic void onItemClick(AdapterView<?> arg0, View arg1, int arg2,long arg3) {close();}});open();}public void initAnim() {// 採用了絕對布局，絕對布局是view的左上方從(0,0)開始@SuppressWarnings("deprecation")final android.widget.AbsoluteLayout.LayoutParams lp = new android.widget.AbsoluteLayout.LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT, 0, 0);findViewById(R.id.slideout_placeholder).setLayoutParams(lp);// 螢幕的寬度int displayWidth = ((WindowManager) getSystemService(Context.WINDOW_SERVICE)).getDefaultDisplay().getWidth();// 右邊的位移量，60dp轉換成pxint sWidth = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 60, getResources().getDisplayMetrics());// 將快照向右移動的位移量final int shift = displayWidth - sWidth;// 向右移動的位移動畫向右移動shift距離，y方向不變mStartAnimation = new TranslateAnimation(TranslateAnimation.ABSOLUTE,0, TranslateAnimation.ABSOLUTE, shift,TranslateAnimation.ABSOLUTE, 0, TranslateAnimation.ABSOLUTE, 0);// 回退時的位移動畫mStopAnimation = new TranslateAnimation(TranslateAnimation.ABSOLUTE, 0,TranslateAnimation.ABSOLUTE, -shift,TranslateAnimation.ABSOLUTE, 0, TranslateAnimation.ABSOLUTE, 0);// 期間mStartAnimation.setDuration(DURATION_MS);// 動畫完成時停留在結束位置mStartAnimation.setFillAfter(true);mStartAnimation.setAnimationListener(new AnimationListener() {@Overridepublic void onAnimationStart(Animation animation) {}@Overridepublic void onAnimationRepeat(Animation animation) {}@Overridepublic void onAnimationEnd(Animation animation) {// 動畫結束時回調// 將imageview固定在位移後的位置mCover.setAnimation(null);@SuppressWarnings("deprecation")final android.widget.AbsoluteLayout.LayoutParams lp = new android.widget.AbsoluteLayout.LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT,shift, 0);mCover.setLayoutParams(lp);}});mStopAnimation.setDuration(DURATION_MS);mStopAnimation.setFillAfter(true);mStopAnimation.setAnimationListener(new AnimationListener() {@Overridepublic void onAnimationStart(Animation animation) {}@Overridepublic void onAnimationRepeat(Animation animation) {}@Overridepublic void onAnimationEnd(Animation animation) {finish();overridePendingTransition(0, 0);}});}public void open() {mCover.startAnimation(mStartAnimation);}public void close() {mCover.startAnimation(mStopAnimation);}@Overridepublic boolean onKeyDown(int keyCode, KeyEvent event) {// 摁返回鍵時也要觸發動畫if (keyCode == KeyEvent.KEYCODE_BACK) {close();return true;}return super.onKeyDown(keyCode, event);}}

sample.xml

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:id="@+id/inner_content"    android:layout_width="fill_parent"    android:layout_height="fill_parent"    android:background="@android:color/white" >    <LinearLayout        android:layout_width="fill_parent"        android:layout_height="45dip"        android:background="#bb000000"        android:gravity="center_vertical"        android:orientation="horizontal" >        <Button            android:id="@+id/sample_button"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_marginRight="10dip"            android:drawableTop="@drawable/menuicon" />        <TextView            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:text="slide-out navigation"            android:textColor="#ffffff"            android:textSize="19sp" />    </LinearLayout></RelativeLayout>

main.xml

<?xml version="1.0" encoding="utf-8"?><AbsoluteLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:id="@+id/layout"    android:layout_width="fill_parent"    android:layout_height="fill_parent" >    <FrameLayout        android:id="@+id/slideout_placeholder"        android:layout_width="fill_parent"        android:layout_height="fill_parent"        android:background="#777777" >        <ListView            android:id="@+id/list"            android:layout_width="fill_parent"            android:layout_height="fill_parent"            android:cacheColorHint="#00000000" />    </FrameLayout>    <ImageView        android:id="@+id/slidedout_cover"        android:layout_width="fill_parent"        android:layout_height="fill_parent"        android:scaleType="fitXY" /></AbsoluteLayout>