Android 微信搖一搖功能實(shí)現(xiàn)詳細(xì)介紹

更新時(shí)間：2016年11月02日 09:20:15 投稿：lqh

這篇文章主要介紹了Android 微信搖一搖功能實(shí)現(xiàn)詳細(xì)介紹的相關(guān)資料,并附實(shí)例代碼及實(shí)現(xiàn)微信搖一搖的思路，需要的朋友可以參考下

Android 微信搖一搖功能實(shí)現(xiàn)，最近學(xué)習(xí)傳感器，就想實(shí)現(xiàn)搖一搖的功能，上網(wǎng)查了些資料，就整理下。如有錯(cuò)誤，還請(qǐng)指正。

開發(fā)環(huán)境

Android Studio 2.2.1
JDK1.7
API 24
Gradle 2.2.1

相關(guān)知識(shí)點(diǎn)

加速度傳感器
補(bǔ)間動(dòng)畫
手機(jī)震動(dòng) (Vibrator)
較短聲音/音效的播放 (SoundPool)

案例：

我們接下來(lái)分析一下這個(gè)案例, 當(dāng)用戶晃動(dòng)手機(jī)時(shí), 會(huì)觸發(fā)加速傳感器, 此時(shí)加速傳感器會(huì)調(diào)用相應(yīng)接口供我們使用, 此時(shí)我們可以做一些相應(yīng)的動(dòng)畫效果, 震動(dòng)效果和聲音效果. 大致思路就是這樣. 具體功能點(diǎn):

用戶晃動(dòng)后兩張圖片分開, 顯示后面圖片
晃動(dòng)后伴隨震動(dòng)效果, 聲音效果

根據(jù)以上的簡(jiǎn)單分析, 我們就知道該怎么做了, Just now

先搭建布局

布局沒啥可說(shuō)的, 大家直接看代碼吧

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:tools="http://schemas.android.com/tools"
  android:id="@+id/activity_main"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:background="#ff222222"
  android:orientation="vertical"
  tools:context="com.lulu.weichatshake.MainActivity">
  <RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <!--搖一搖中心圖片-->
    <ImageView
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_centerInParent="true"
      android:src="@mipmap/weichat_icon"/>
    <LinearLayout
      android:gravity="center"
      android:orientation="vertical"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:layout_alignParentTop="true"
      android:layout_alignParentLeft="true"
      android:layout_alignParentStart="true">
      <!--頂部的橫線和圖片-->
      <LinearLayout
        android:gravity="center_horizontal|bottom"
        android:id="@+id/main_linear_top"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">
        <ImageView
          android:src="@mipmap/shake_top"
          android:id="@+id/main_shake_top"
          android:layout_width="wrap_content"
          android:layout_height="100dp"/>
        <ImageView
          android:background="@mipmap/shake_top_line"
          android:id="@+id/main_shake_top_line"
          android:layout_width="match_parent"
          android:layout_height="5dp"/>
      </LinearLayout>
      <!--底部的橫線和圖片-->
      <LinearLayout
        android:gravity="center_horizontal|bottom"
        android:id="@+id/main_linear_bottom"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">
        <ImageView
          android:background="@mipmap/shake_bottom_line"
          android:id="@+id/main_shake_bottom_line"
          android:layout_width="match_parent"
          android:layout_height="5dp"/>
        <ImageView
          android:src="@mipmap/shake_bottom"
          android:id="@+id/main_shake_bottom"
          android:layout_width="wrap_content"
          android:layout_height="100dp"/>
      </LinearLayout>
    </LinearLayout>
  </RelativeLayout>
</LinearLayout>

得到加速度傳感器的回調(diào)接口

step1: 在onStart() 方法中獲取傳感器的SensorManager

@Override
protected void onStart() {
  super.onStart();
  //獲取 SensorManager 負(fù)責(zé)管理傳感器
  mSensorManager = ((SensorManager) getSystemService(SENSOR_SERVICE));
  if (mSensorManager != null) {
    //獲取加速度傳感器
    mAccelerometerSensor = mSensorManager.getDefaultSensor(Sensor.TYPE_ACCELEROMETER);
    if (mAccelerometerSensor != null) {
      mSensorManager.registerListener(this, mAccelerometerSensor, SensorManager.SENSOR_DELAY_UI);
    }
  }
}

step2: 緊接著我們就要在Pause中注銷傳感器

@Override
protected void onPause() {
  // 務(wù)必要在pause中注銷 mSensorManager
  // 否則會(huì)造成界面退出后搖一搖依舊生效的bug
  if (mSensorManager != null) {
    mSensorManager.unregisterListener(this);
  }
  super.onPause();
}

Note: 至于為什么我們要在onStart和onPause中就行SensorManager的注冊(cè)和注銷, 就是因?yàn)? 防止在界面退出(包括按Home鍵)時(shí), 搖一搖依舊生效(代碼中有注釋)

step3: 在step1中的注冊(cè)監(jiān)聽事件方法中, 我們傳入了當(dāng)前Activity對(duì)象, 故讓其實(shí)現(xiàn)回調(diào)接口, 得到以下方法

///////////////////////////////////////////////////////////////////////////
// SensorEventListener回調(diào)方法
///////////////////////////////////////////////////////////////////////////
@Override
public void onSensorChanged(SensorEvent event) {
  int type = event.sensor.getType();

  if (type == Sensor.TYPE_ACCELEROMETER) {
    //獲取三個(gè)方向值
    float[] values = event.values;
    float x = values[0];
    float y = values[1];
    float z = values[2];

    if ((Math.abs(x) > 17 || Math.abs(y) > 17 || Math
        .abs(z) > 17) && !isShake) {
      isShake = true;
      // TODO: 2016/10/19 實(shí)現(xiàn)搖動(dòng)邏輯, 搖動(dòng)后進(jìn)行震動(dòng)
      Thread thread = new Thread() {
        @Override
        public void run() {
          super.run();
          try {
            Log.d(TAG, "onSensorChanged: 搖動(dòng)");

            //開始震動(dòng) 發(fā)出提示音 展示動(dòng)畫效果
            mHandler.obtainMessage(START_SHAKE).sendToTarget();
            Thread.sleep(500);
            //再來(lái)一次震動(dòng)提示
            mHandler.obtainMessage(AGAIN_SHAKE).sendToTarget();
            Thread.sleep(500);
            mHandler.obtainMessage(END_SHAKE).sendToTarget();

          } catch (InterruptedException e) {
            e.printStackTrace();
          }
        }
      };
      thread.start();
    }
  }
}

@Override
public void onAccuracyChanged(Sensor sensor, int accuracy) {
}

Note: 當(dāng)用戶晃動(dòng)手機(jī)會(huì)調(diào)用onSensorChanged方法, 可以做一些相應(yīng)的操作

為解決動(dòng)畫和震動(dòng)延遲, 我們開啟了一個(gè)子線程來(lái)實(shí)現(xiàn).

子線程中會(huì)通過(guò)發(fā)送Handler消息, 先開始動(dòng)畫效果, 并伴隨震動(dòng)和聲音，先把Handler的實(shí)現(xiàn)放一放, 我們?cè)賮?lái)看一下震動(dòng)和聲音初始化動(dòng)畫, 震動(dòng)和音效實(shí)現(xiàn)

step 1: 先獲取到震動(dòng)相關(guān)的服務(wù),注意要加權(quán)限. 至于音效, 我們采用SoundPool來(lái)播放, 在這里非常感謝Vincent 的貼子, 好初始化SoundPool

震動(dòng)權(quán)限

<uses-permission android:name="android.permission.VIBRATE"/>

//初始化SoundPool
mSoundPool = new SoundPool(1, AudioManager.STREAM_SYSTEM, 5);
mWeiChatAudio = mSoundPool.load(this, R.raw.weichat_audio, 1);

//獲取Vibrator震動(dòng)服務(wù)
mVibrator = (Vibrator) getSystemService(VIBRATOR_SERVICE);

Note: 大家可能發(fā)現(xiàn)SoundPool的構(gòu)造方法已經(jīng)過(guò)時(shí), 不過(guò)不用擔(dān)心這是Api21之后過(guò)時(shí)的, 所以也不算太”過(guò)時(shí)”吧　

step2: 接下來(lái)我們就要介紹Handler中的實(shí)現(xiàn)了, 為避免Activity內(nèi)存泄漏, 采用了軟引用方式

private static class MyHandler extends Handler {
  private WeakReference<MainActivity> mReference;
  private MainActivity mActivity;
  public MyHandler(MainActivity activity) {
    mReference = new WeakReference<MainActivity>(activity);
    if (mReference != null) {
      mActivity = mReference.get();
    }
  }
  @Override
  public void handleMessage(Message msg) {
    super.handleMessage(msg);
    switch (msg.what) {
      case START_SHAKE:
        //This method requires the caller to hold the permission VIBRATE.
        mActivity.mVibrator.vibrate(300);
        //發(fā)出提示音
        mActivity.mSoundPool.play(mActivity.mWeiChatAudio, 1, 1, 0, 0, 1);
        mActivity.mTopLine.setVisibility(View.VISIBLE);
        mActivity.mBottomLine.setVisibility(View.VISIBLE);
        mActivity.startAnimation(false);//參數(shù)含義: (不是回來(lái)) 也就是說(shuō)兩張圖片分散開的動(dòng)畫
        break;
      case AGAIN_SHAKE:
        mActivity.mVibrator.vibrate(300);
        break;
      case END_SHAKE:
        //整體效果結(jié)束, 將震動(dòng)設(shè)置為false
        mActivity.isShake = false;
        // 展示上下兩種圖片回來(lái)的效果
        mActivity.startAnimation(true);
        break;
    }
  }
}

Note: 內(nèi)容不多說(shuō)了, 代碼注釋中很詳細(xì), 還有一個(gè)startAnimation方法
我先來(lái)說(shuō)一下它的參數(shù), true表示布局中兩張圖片從打開到關(guān)閉的動(dòng)畫, 反之, false是從關(guān)閉到打開狀態(tài), 上代碼

step3: startAnimaion方法上的實(shí)現(xiàn)

/**
 * 開啟 搖一搖動(dòng)畫
 *
 * @param isBack 是否是返回初識(shí)狀態(tài)
 */
private void startAnimation(boolean isBack) {
  //動(dòng)畫坐標(biāo)移動(dòng)的位置的類型是相對(duì)自己的
  int type = Animation.RELATIVE_TO_SELF;

  float topFromY;
  float topToY;
  float bottomFromY;
  float bottomToY;
  if (isBack) {
    topFromY = -0.5f;
    topToY = 0;
    bottomFromY = 0.5f;
    bottomToY = 0;
  } else {
    topFromY = 0;
    topToY = -0.5f;
    bottomFromY = 0;
    bottomToY = 0.5f;
  }

  //上面圖片的動(dòng)畫效果
  TranslateAnimation topAnim = new TranslateAnimation(
      type, 0, type, 0, type, topFromY, type, topToY
  );
  topAnim.setDuration(200);
  //動(dòng)畫終止時(shí)停留在最后一幀~不然會(huì)回到?jīng)]有執(zhí)行之前的狀態(tài)
  topAnim.setFillAfter(true);

  //底部的動(dòng)畫效果
  TranslateAnimation bottomAnim = new TranslateAnimation(
      type, 0, type, 0, type, bottomFromY, type, bottomToY
  );
  bottomAnim.setDuration(200);
  bottomAnim.setFillAfter(true);

  //大家一定不要忘記, 當(dāng)要回來(lái)時(shí), 我們中間的兩根線需要GONE掉
  if (isBack) {
    bottomAnim.setAnimationListener(new Animation.AnimationListener() {
      @Override
      public void onAnimationStart(Animation animation) {}
      @Override
      public void onAnimationRepeat(Animation animation) {}
      @Override
      public void onAnimationEnd(Animation animation) {
        //當(dāng)動(dòng)畫結(jié)束后 , 將中間兩條線GONE掉, 不讓其占位
        mTopLine.setVisibility(View.GONE);
        mBottomLine.setVisibility(View.GONE);
      }
    });
  }
  //設(shè)置動(dòng)畫
  mTopLayout.startAnimation(topAnim);
  mBottomLayout.startAnimation(bottomAnim);

}

至此核心代碼已經(jīng)介紹完畢 , 但是還有部分小細(xì)節(jié)不得不提一下

細(xì)枝末節(jié)

大家要在初始化View之前將上下兩條橫線GONE掉, 用GONE是不占位的

mTopLine.setVisibility(View.GONE);
mBottomLine.setVisibility(View.GONE);

2.咱們的搖一搖最好是只豎屏 (畢竟我也沒見過(guò)橫屏的搖一搖), 加上下面代碼

//設(shè)置只豎屏
setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);

完整代碼

源碼我已經(jīng)發(fā)在了github上, 希望大家多多支持!

感謝閱讀，希望能幫助到大家，謝謝大家對(duì)本站的支持！

您可能感興趣的文章: