开源中国Android客户端语音动弹界面实现

之前说在《Android仿微信录音功能，自定义控件的设计技巧》中说要再讲一个仿QQ发送语音的实现的。

今天为大家介绍一下语音动弹界面的实现，新版本的客户端大家应该都看过了，这里我就只简单的介绍一下控件布局了。你可以在这里看到本控件的完整源码：http://git.oschina.net/oschina/android-app/blob/master/osc-android-app/src/net/oschina/app/widget/RecordButton.java

首先，整体界面分三部分，最上层自定义ActionBar相信不需要我讲大家就能看出来了。

中间部分是文字动弹部分，主体就是一个设置了Padding（margin）的EditText，在EditText下面是一个剩余输入字数的描述。其实在“您还可以输入XX字”的左边还有一个用于显示录音图标的ImageView.

最下层是本文主要讲解的录音自定义控件的实现。

下面一整块整体都是自定义控件的区域，我将其命名为RecordButton，是一个继承自RelateiveLayout的ViewGroup。

在其中包括了左中右三个ImageView：试听与删除，中间的录音按钮。

在录音按钮的上下各有一个用于提示的TextView。

整体布局的载入可以通过调用 View.inflater(cxt, R.layout.xxx, null); 就行了。

同前一篇讲的一样，作为控件界面控制逻辑，我们主要看一下onTouchEvent方法：当手指按下的时候，初始化录音器。手指在屏幕上移动的时候如果滑到按钮之上的时候，event.getY会返回一个负值（因为滑出控件了嘛）。这里我写的是-50主要是为了多一点缓冲，防止误操作。

先来看代码

@Override
    public boolean onTouchEvent(MotionEvent event) {
        if (mAudioFile == null) {
            return false;
        }
        if (!mTouchInPlayButton) {
            return false;
        }
        switch (event.getAction()) {
        case MotionEvent.ACTION_DOWN:
            initBorderLine();
            break;
        case MotionEvent.ACTION_MOVE:
            if (event.getY() < 0) {
                viewToInit();
                break;
            }
            if (event.getX() > mRightButtonX) {
                mIsCancel = true;
                scaleView(mImgDelete, 1.5f);
            } else if (event.getX() < mLeftButtonX) {
                scaleView(mImgListen, 1.5f);
            } else {
                mIsCancel = false;
                viewToInit();
            }
            break;
        case MotionEvent.ACTION_UP:
            if (mIsCancel || event.getY() < -50) {
                cancelRecord();
            } else if (event.getX() < mLeftButtonX) {// 试听
                playRecord();
                finishRecord();
            } else if (event.getX() > mRightButtonX) {// 删除
                cancelRecord();
            } else {
                finishRecord();
            }
            viewToInit();
            bottomFlag.setVisibility(View.VISIBLE);
            topFlag.setVisibility(View.GONE);
            mIsCancel = false;
            mTouchInPlayButton = false;
            break;
        }
        return true;
    }

其中录音相关的工具类还是和之前的一样，这就是把功能与视图分开的好处，随时用随时复制粘贴过来就用了。

/**
 * {@link #RecordButton}需要的工具类
 * 
 * @author kymjs(http://www.kymjs.com/)
 */
public class RecordButtonUtil {
    public static final String AUDOI_DIR = Environment
            .getExternalStorageDirectory().getAbsolutePath() + "/oschina/audio"; // 录音音频保存根路径
 
    private String mAudioPath; // 要播放的声音的路径
    private boolean mIsRecording;// 是否正在录音
    private boolean mIsPlaying;// 是否正在播放
    private OnPlayListener listener;
  
    // 初始化 录音器
    private void initRecorder() {
        mRecorder = new MediaRecorder();
        mRecorder.setAudioSource(MediaRecorder.AudioSource.MIC);
        mRecorder.setOutputFormat(MediaRecorder.OutputFormat.AMR_NB);
        mRecorder.setAudioEncoder(MediaRecorder.AudioEncoder.AMR_NB);
        mRecorder.setOutputFile(mAudioPath);
        mIsRecording = true;
    }
 
    /** 开始录音，并保存到文件中 */
    public void recordAudio() {
        initRecorder();
        try {
            mRecorder.prepare();
        } catch (IOException e) {
            e.printStackTrace();
        }
        mRecorder.start();
    }
 
    /** 获取音量值，只是针对录音音量 */
    public int getVolumn() {
        int volumn = 0;
        // 录音
        if (mRecorder != null && mIsRecording) {
            volumn = mRecorder.getMaxAmplitude();
            if (volumn != 0)
                volumn = (int) (10 * Math.log(volumn) / Math.log(10)) / 7;
        }
        return volumn;
    }
 
    /** 停止录音 */
    public void stopRecord() {
        if (mRecorder != null) {
            mRecorder.stop();
            mRecorder.release();
            mRecorder = null;
            mIsRecording = false;
        }
    }
 
    public void startPlay(String audioPath) {
        if (!mIsPlaying) {
            if (!StringUtils.isEmpty(audioPath)) {
                mPlayer = new MediaPlayer();
                try {
                    mPlayer.setDataSource(audioPath);
                    mPlayer.prepare();
                    mPlayer.start();
                    if (listener != null) {
                        listener.starPlay();
                    }
                    mIsPlaying = true;
                    mPlayer.setOnCompletionListener(new MediaPlayer.OnCompletionListener() {
                        @Override
                        public void onCompletion(MediaPlayer mp) {
                            if (listener != null) {
                                listener.stopPlay();
                            }
                            mp.release();
                            mPlayer = null;
                            mIsPlaying = false;
                        }
                    });
                } catch (Exception e) {
                    e.printStackTrace();
                }
            } else {
                AppContext.showToastShort(R.string.record_sound_notfound);
            }
        } // end playing
    }
    public interface OnPlayListener {
        /** 播放声音结束时调用 */
        void stopPlay();
 
        /**  播放声音开始时调用 */
        void starPlay();
    }
}

如果细心，你会发现左右两个圆形按钮，会随着手指移动到上面的时候放大，这其实也是一个通过监听ontouch事件，对两个圆形按钮设置动画产生的效果，和谐带人就是下面这句了。（注，setScaleX和setScaleY方法只有在API10，也就是3.0以上的版本才能调用）：

if (event.getX() > mRightButtonX) {
    mIsCancel = true;scaleView(mImgDelete, 1.5f);
} else if (event.getX() < mLeftButtonX) {
    scaleView(mImgListen, 1.5f);
} else {
    mIsCancel = false;viewToInit();
}

private void scaleView(View view, float scaleXY) {
    if (android.os.Build.VERSION.SDK_INT > 10) {
        view.setScaleX(scaleXY);
        view.setScaleY(scaleXY);
    }
}