您的位置：首页 > 移动开发 > 微信开发

是男人就下100层【第一层】——高仿微信界面（8）

2014-03-04 11:22 344 查看
上一篇《是男人就下100层【第一层】——高仿微信界面（7）》中我们实现了下弹式菜单，这一篇我们来看看如何实现微信中的摇一摇功能。

首先我们来布局我们的摇一摇界面



布局文件如下：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:background="#111"
>

<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_centerInParent="true" >

<ImageView
android:id="@+id/shakeBg"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:src="@drawable/shakehideimg_man2" />

<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:orientation="vertical" >

<RelativeLayout
android:id="@+id/shakeImgUp"
android:layout_width="fill_parent"
android:layout_height="190dp"
android:background="#111">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:src="@drawable/shake_logo_up"
/>
</RelativeLayout>
<RelativeLayout
android:id="@+id/shakeImgDown"
android:layout_width="fill_parent"
android:layout_height="190dp"
android:background="#111">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:src="@drawable/shake_logo_down"
/>
</RelativeLayout>
</LinearLayout>
</RelativeLayout>

<RelativeLayout
android:id="@+id/shake_title_bar"
android:layout_width="fill_parent"
android:layout_height="45dp"
android:background="@drawable/title_bar"
android:gravity="center_vertical"  >
<Button
android:layout_width="70dp"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:text="返回"
android:textSize="14sp"
android:textColor="#fff"
android:onClick="shake_activity_back"
android:background="@drawable/title_btn_back"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="摇一摇"
android:layout_centerInParent="true"
android:textSize="20sp"
android:textColor="#ffffff" />
<ImageButton
android:layout_width="67dp"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_marginRight="5dp"
android:src="@drawable/mm_title_btn_menu"
android:background="@drawable/title_btn_right"
android:onClick="linshi"
/>
</RelativeLayout>

<SlidingDrawer
android:id="@+id/slidingDrawer1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:content="@+id/content"
android:handle="@+id/handle" >
<Button
android:id="@+id/handle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"

android:background="@drawable/shake_report_dragger_up" />
<LinearLayout
android:id="@+id/content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#f9f9f9" >
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scaleType="fitXY"
android:src="@drawable/shake_line_up" />
</LinearLayout>
</SlidingDrawer>

</RelativeLayout>
这个布局里面用到了很多相对布局，最外面是一个相对布局（我们先称为R1），R1内是两个相对布局（分别称为R2、R3）和一个抽屉组件，R3是上部标题栏，R2中有一个ImageView和一个线性布局，这两个组件都位于R2的中心，所以上面的线性布局会将下面的ImageView遮住，为什么要遮住，玩过微信摇一摇的朋友应该明白。

SlidingDrawer隐藏屏外的内容，并允许用户通过handle以显示隐藏内容。它可以垂直或水平滑动，它有俩个View组成，其一是可以拖动的handle,其二是隐藏内容的View.它里面的控件必须设置布局，在布局文件中必须指定handle和content.

接下来我们看看如何检查手机摇晃，摇一摇让手机震动

package com.example.weixin.listener;

import android.content.Context;
import android.hardware.Sensor;
import android.hardware.SensorEvent;
import android.hardware.SensorEventListener;
import android.hardware.SensorManager;
import android.util.Log;

/**
* 一个检测手机摇晃的监听器
*/
public class ShakeListener implements SensorEventListener {
// 速度阈值，当摇晃速度达到这值后产生作用
private static final int SPEED_SHRESHOLD = 3000;
// 两次检测的时间间隔
private static final int UPTATE_INTERVAL_TIME = 70;
// 传感器管理器
private SensorManager sensorManager;
// 传感器
private Sensor sensor;
// 重力感应监听器
private OnShakeListener onShakeListener;
// 上下文
private Context mContext;
// 手机上一个位置时重力感应坐标
private float lastX;
private float lastY;
private float lastZ;
// 上次检测时间
private long lastUpdateTime;

// 构造器
public ShakeListener(Context c) {
// 获得监听对象
mContext = c;
start();
}

// 开始
public void start() {
// 获得传感器管理器
sensorManager = (SensorManager) mContext
.getSystemService(Context.SENSOR_SERVICE);
if (sensorManager != null) {
// 获得重力传感器
sensor = sensorManager.getDefaultSensor(Sensor.TYPE_ACCELEROMETER);
}
// 注册
if (sensor != null) {
sensorManager.registerListener(this, sensor,
SensorManager.SENSOR_DELAY_GAME);
}

}

// 停止检测
public void stop() {
sensorManager.unregisterListener(this);
}

// 设置重力感应监听器
public void setOnShakeListener(OnShakeListener listener) {
onShakeListener = listener;
}

// 重力感应器感应获得变化数据
public void onSensorChanged(SensorEvent event) {
// 现在检测时间
long currentUpdateTime = System.currentTimeMillis();
// 两次检测的时间间隔
long timeInterval = currentUpdateTime - lastUpdateTime;
// 判断是否达到了检测时间间隔
if (timeInterval < UPTATE_INTERVAL_TIME)
return;
// 现在的时间变成last时间
lastUpdateTime = currentUpdateTime;

// 获得x,y,z坐标
float x = event.values[0];
float y = event.values[1];
float z = event.values[2];

// 获得x,y,z的变化值
float deltaX = x - lastX;
float deltaY = y - lastY;
float deltaZ = z - lastZ;

// 将现在的坐标变成last坐标
lastX = x;
lastY = y;
lastZ = z;

double speed = Math.sqrt(deltaX * deltaX + deltaY * deltaY + deltaZ
* deltaZ)
/ timeInterval * 10000;
//Log.v("thelog", "===========log===================");
// 达到速度阀值，发出提示
if (speed >= SPEED_SHRESHOLD) {
onShakeListener.onShake();
}
}

public void onAccuracyChanged(Sensor sensor, int accuracy) {

}

// 摇晃监听接口
public interface OnShakeListener {
public void onShake();
}

}
SensorManager是一个系统提供来管理传感器的服务。

SensorManager通过getDefaultSensor(int type)方法来获取指定类型的传感器。

// 获得重力传感器
sensor = sensorManager.getDefaultSensor(Sensor.TYPE_ACCELEROMETER);
SensorManager提供了一个注册传感器的方法：registerListener

sensorManager.registerListener(this, sensor,
SensorManager.SENSOR_DELAY_GAME);
SensorEventListener接口定义了两个方法需要实现

onSensorChanged()方法，当传感器的值发生改变时触发该方法。

onAccuracyChanged()方法，当传感器的精度发生改变时触发该方法。

// 重力感应器感应获得变化数据
public void onSensorChanged(SensorEvent event) {
// 现在检测时间
long currentUpdateTime = System.currentTimeMillis();
// 两次检测的时间间隔
long timeInterval = currentUpdateTime - lastUpdateTime;
// 判断是否达到了检测时间间隔
if (timeInterval < UPTATE_INTERVAL_TIME)
return;
// 现在的时间变成last时间
lastUpdateTime = currentUpdateTime;

// 获得x,y,z坐标
float x = event.values[0];
float y = event.values[1];
float z = event.values[2];

// 获得x,y,z的变化值
float deltaX = x - lastX;
float deltaY = y - lastY;
float deltaZ = z - lastZ;

// 将现在的坐标变成last坐标
lastX = x;
lastY = y;
lastZ = z;

double speed = Math.sqrt(deltaX * deltaX + deltaY * deltaY + deltaZ
* deltaZ)
/ timeInterval * 10000;
//Log.v("thelog", "===========log===================");
// 达到速度阀值，发出提示
if (speed >= SPEED_SHRESHOLD) {
onShakeListener.onShake();
}
}
坐标对应的关系看下图可知



这里计算速度的公式是高中学过的知识v=s/t=(a^2+b^2+c^2)/t

double speed = Math.sqrt(deltaX * deltaX + deltaY * deltaY + deltaZ
* deltaZ)
/ timeInterval * 10000;



在Activity中创建摇动监听实例并设置监听

mShakeListener = new ShakeListener(this);
mShakeListener.setOnShakeListener(new OnShakeListener() {
public void onShake() {
//Toast.makeText(getApplicationContext(), "抱歉，暂时没有找到在同一时刻摇一摇的人。\n再试一次吧！", Toast.LENGTH_SHORT).show();
startAnim();  //开始 摇一摇手掌动画
mShakeListener.stop();
startVibrato(); //开始 震动
new Handler().postDelayed(new Runnable(){
@Override
public void run(){
//Toast.makeText(getApplicationContext(), "抱歉，暂时没有找到\n在同一时刻摇一摇的人。\n再试一次吧！", 500).setGravity(Gravity.CENTER,0,0).show();
Toast mtoast;
mtoast = Toast.makeText(getApplicationContext(),
"抱歉，暂时没有找到\n在同一时刻摇一摇的人。\n再试一次吧！", 10);
//mtoast.setGravity(Gravity.CENTER, 0, 0);
mtoast.show();
mVibrator.cancel();
mShakeListener.start();
}
}, 2000);
}
});


在设置监听之前，在Activity的onCreate方法中需呀获得系统提供的振动服务对象

Vibrator mVibrator = (Vibrator)getApplication().getSystemService(VIBRATOR_SERVICE);
有关Vibrator的使用请看我的另一篇博文：http://blog.csdn.net/dawanganban/article/details/17531697

public void startVibrato(){		//定义震动
mVibrator.vibrate( new long[]{500,200,500,200}, -1); //第一个｛｝里面是节奏数组， 第二个参数是重复次数，-1为不重复，非-1俄日从pattern的指定下标开始重复
}
摇一摇的时候还有一个图片移动的动画，设置动画代码如下：

public void startAnim () {   //定义摇一摇动画动画
AnimationSet animup = new AnimationSet(true);
TranslateAnimation mytranslateanimup0 = new TranslateAnimation(Animation.RELATIVE_TO_SELF,0f,Animation.RELATIVE_TO_SELF,0f,Animation.RELATIVE_TO_SELF,0f,Animation.RELATIVE_TO_SELF,-0.5f);
mytranslateanimup0.setDuration(1000);
TranslateAnimation mytranslateanimup1 = new TranslateAnimation(Animation.RELATIVE_TO_SELF,0f,Animation.RELATIVE_TO_SELF,0f,Animation.RELATIVE_TO_SELF,0f,Animation.RELATIVE_TO_SELF,+0.5f);
mytranslateanimup1.setDuration(1000);
mytranslateanimup1.setStartOffset(1000);
animup.addAnimation(mytranslateanimup0);
animup.addAnimation(mytranslateanimup1);
mImgUp.startAnimation(animup);

AnimationSet animdn = new AnimationSet(true);
TranslateAnimation mytranslateanimdn0 = new TranslateAnimation(Animation.RELATIVE_TO_SELF,0f,Animation.RELATIVE_TO_SELF,0f,Animation.RELATIVE_TO_SELF,0f,Animation.RELATIVE_TO_SELF,+0.5f);
mytranslateanimdn0.setDuration(1000);
TranslateAnimation mytranslateanimdn1 = new TranslateAnimation(Animation.RELATIVE_TO_SELF,0f,Animation.RELATIVE_TO_SELF,0f,Animation.RELATIVE_TO_SELF,0f,Animation.RELATIVE_TO_SELF,-0.5f);
mytranslateanimdn1.setDuration(1000);
mytranslateanimdn1.setStartOffset(1000);
animdn.addAnimation(mytranslateanimdn0);
animdn.addAnimation(mytranslateanimdn1);
mImgDn.startAnimation(animdn);
}
运行效果如下：



源代码下载：http://download.csdn.net/detail/lxq_xsyu/6990129
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航