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

于 2012-08-19 12:32:00 发布
阅读量67 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： android 文章标签： android
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/iteye_9512/article/details/82401982
先上效果图：
[img]
[img]http://dl.iteye.com/upload/attachment/0071/5161/fe3a121a-071e-3348-bdb6-65f2c3e1470e.png[/img]
[/img]
[img]
[img]http://dl.iteye.com/upload/attachment/0071/5163/fd64b1fd-1761-3da2-b2d1-6244c5eb41e2.gif[/img]
[/img]

运行程序后首先显示图：
[img]
[img]http://dl.iteye.com/upload/attachment/0071/5167/9a42f147-fe6d-3f4f-8ced-1279a9d53d58.jpg[/img]
[/img]
当点击左上角按钮时如下图：
[img]
[img]http://dl.iteye.com/upload/attachment/0071/5169/38f12f56-7d19-3289-9048-d6dd3ce5016c.jpg[/img]
[/img]

工程结构图：
[img]
[img]http://dl.iteye.com/upload/attachment/0071/5171/802adc35-a432-3db1-9797-dc9968e0dca8.jpg[/img]
[/img]

MainActivity: 
package com.amaker.renren;


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 {
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.sample);
		findViewById(R.id.sample_button).setOnClickListener(
				new OnClickListener() {
					@Override
					public void onClick(View v) {
						SettingActivity.prepare(MainActivity.this,
								R.id.inner_content);
						startActivity(new Intent(MainActivity.this,
								SettingActivity.class));
						overridePendingTransition(0, 0);
					}
				});
	}
}



SettingActivity: 
package com.amaker.renren;


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);
	}

	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		// 绝对布局最上层覆盖了一个imageview
		setContentView(R.layout.main);
		initAnim();
		mCover = (ImageView) findViewById(R.id.slidedout_cover);
		mCover.setImageBitmap(sCoverBitmap);
		mCover.setOnClickListener(new OnClickListener() {
			@Override
			public 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() {

			@Override
			public 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转换成px
		int 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() {

			@Override
			public void onAnimationStart(Animation animation) {
			}

			@Override
			public void onAnimationRepeat(Animation animation) {
			}

			@Override
			public 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() {

			@Override
			public void onAnimationStart(Animation animation) {
			}

			@Override
			public void onAnimationRepeat(Animation animation) {
			}

			@Override
			public void onAnimationEnd(Animation animation) {
				finish();
				overridePendingTransition(0, 0);
			}
		});

	}

	public void open() {
		mCover.startAnimation(mStartAnimation);
	}

	public void close() {
		mCover.startAnimation(mStopAnimation);
	}

	@Override
	public 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/icon" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="MainActivity........"
            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>


AndroidManifest.xml： 
<?xml version="1.0" encoding="utf-8"?>
<manifest
	xmlns:android="http://schemas.android.com/apk/res/android"
	package="com.amaker.renren"
	android:versionCode="1"
	android:versionName="1.0">
	<uses-sdk
		android:minSdkVersion="8" />

	<application
		android:icon="@drawable/icon"
		android:label="@string/app_name">
		<activity
			android:name=".MainActivity"
			android:label="@string/app_name">
			<intent-filter>
				<action
					android:name="android.intent.action.MAIN" />
				<category
					android:name="android.intent.category.LAUNCHER" />
			</intent-filter>
		</activity>

		<activity
			android:name="com.amaker.renren.SettingActivity" />

	</application>
</manifest>
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值