android仿微信聊天界面 语音录制功能

本例为模仿微信聊天界面UI设计，文字发送以及语言录制UI。

1先看效果图：

第一:chat.xml设计

<?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:background="@drawable/chat_bg_default" >

<!-- 标题栏 -->
<RelativeLayout
android:id="@+id/rl_layout"
android:layout_width="fill_parent"
android:layout_height="45dp"
android:background="@drawable/title_bar"
android:gravity="center_vertical" >

<Button
 android:id="@+id/btn_back"
 android:layout_width="70dp"
 android:layout_height="wrap_content"
 android:layout_centerVertical="true"
 android:background="@drawable/title_btn_back"
 android:onClick="chat_back"
 android:text="返回"
 android:textColor="#fff"
 android:textSize="14sp" />

<TextView
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_centerInParent="true"
 android:text="白富美"
 android:textColor="#ffffff"
 android:textSize="20sp" />

<ImageButton
 android:id="@+id/right_btn"
 android:layout_width="67dp"
 android:layout_height="wrap_content"
 android:layout_alignParentRight="true"
 android:layout_centerVertical="true"
 android:layout_marginRight="5dp"
 android:background="@drawable/title_btn_right"
 android:src="@drawable/mm_title_btn_contact_normal" />
</RelativeLayout>

<!-- 底部按钮以及 编辑框 -->
<RelativeLayout
android:id="@+id/rl_bottom"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="@drawable/chat_footer_bg" >

<ImageView
 android:id="@+id/ivPopUp"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_alignParentLeft="true"
 android:layout_centerVertical="true"
 android:layout_marginLeft="10dip"
 android:src="@drawable/chatting_setmode_msg_btn" />

<RelativeLayout
 android:id="@+id/btn_bottom"
 android:layout_width="fill_parent"
 android:layout_height="wrap_content"
 android:layout_alignParentRight="true"
 android:layout_centerVertical="true"
 android:layout_toRightOf="@+id/ivPopUp" >

<Button
 android:id="@+id/btn_send"
 android:layout_width="60dp"
 android:layout_height="40dp"
 android:layout_alignParentRight="true"
 android:layout_centerVertical="true"
 android:layout_marginRight="10dp"
 android:background="@drawable/chat_send_btn"
 android:text="发送" />

<EditText
 android:id="@+id/et_sendmessage"
 android:layout_width="fill_parent"
 android:layout_height="40dp"
 android:layout_centerVertical="true"
 android:layout_marginLeft="10dp"
 android:layout_marginRight="10dp"
 android:layout_toLeftOf="@id/btn_send"
 android:background="@drawable/login_edit_normal"
 android:singleLine="true"
 android:textSize="18sp" />
</RelativeLayout>

<TextView
 android:id="@+id/btn_rcd"
 android:layout_width="fill_parent"
 android:layout_height="40dp"
 android:layout_alignParentRight="true"
 android:layout_centerVertical="true"
 android:layout_marginLeft="10dp"
 android:layout_marginRight="10dp"
 android:layout_toRightOf="@+id/ivPopUp"
 android:background="@drawable/chat_send_btn"
 android:gravity="center"
 android:text="按住说话"
 android:visibility="gone" />
</RelativeLayout>

<!-- 聊天内容 listview -->
<ListView
android:id="@+id/listview"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_above="@id/rl_bottom"
android:layout_below="@id/rl_layout"
android:cacheColorHint="#0000"
android:divider="@null"
android:dividerHeight="5dp"
android:scrollbarStyle="outsideOverlay"
android:stackFromBottom="true" />

<!-- 录音显示UI层 -->
<LinearLayout
android:id="@+id/rcChat_popup"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center"
android:visibility="gone" >

<include
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_gravity="center"
 layout="@layout/voice_rcd_hint_window" />
</LinearLayout>

</RelativeLayout>

第二：语音录制类封装SoundMeter.java

package com.example.voice_rcd;

import java.io.IOException;

import android.media.MediaRecorder;
import android.os.Environment;

public class SoundMeter {
static final private double EMA_FILTER = 0.6;

private MediaRecorder mRecorder = null;
private double mEMA = 0.0;

public void start(String name) {
if (!Environment.getExternalStorageState().equals(
 android.os.Environment.MEDIA_MOUNTED)) {
 return;
}
if (mRecorder == null) {
 mRecorder = new MediaRecorder();
 mRecorder.setAudioSource(MediaRecorder.AudioSource.MIC);
 mRecorder.setOutputFormat(MediaRecorder.OutputFormat.THREE_GPP);
 mRecorder.setAudioEncoder(MediaRecorder.AudioEncoder.AMR_NB);
 mRecorder.setOutputFile(android.os.Environment.getExternalStorageDirectory()+"/"+name);
 try {
 mRecorder.prepare();
 mRecorder.start();

mEMA = 0.0;
 } catch (IllegalStateException e) {
 System.out.print(e.getMessage());
 } catch (IOException e) {
 System.out.print(e.getMessage());
 }

}
}

public void stop() {
if (mRecorder != null) {
 mRecorder.stop();
 mRecorder.release();
 mRecorder = null;
}
}

public void pause() {
if (mRecorder != null) {
 mRecorder.stop();
}
}

public void start() {
if (mRecorder != null) {
 mRecorder.start();
}
}

public double getAmplitude() {
if (mRecorder != null)
 return (mRecorder.getMaxAmplitude() / 2700.0);
else
 return 0;

}

public double getAmplitudeEMA() {
double amp = getAmplitude();
mEMA = EMA_FILTER * amp + (1.0 - EMA_FILTER) * mEMA;
return mEMA;
}
}

第三：主界面Activity源码，没写太多解释，相对比较简单的自己研究下：

package com.example.voice_rcd;

import java.io.File;
import java.util.ArrayList;
import java.util.Calendar;
import java.util.List;

import android.app.Activity;
import android.os.Bundle;
import android.os.Environment;
import android.os.Handler;
import android.os.SystemClock;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.View.OnTouchListener;
import android.view.WindowManager;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.Button;
import android.widget.EditText;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.ListView;
import android.widget.RelativeLayout;
import android.widget.TextView;
import android.widget.Toast;

public class MainActivity extends Activity implements OnClickListener {
/** Called when the activity is first created. */

private Button mBtnSend;
private TextView mBtnRcd;
private Button mBtnBack;
private EditText mEditTextContent;
private RelativeLayout mBottom;
private ListView mListView;
private ChatMsgViewAdapter mAdapter;
private List<ChatMsgEntity> mDataArrays = new ArrayList<ChatMsgEntity>();
private boolean isShosrt = false;
private LinearLayout voice_rcd_hint_loading, voice_rcd_hint_rcding,
 voice_rcd_hint_tooshort;
private ImageView img1, sc_img1;
private SoundMeter mSensor;
private View rcChat_popup;
private LinearLayout del_re;
private ImageView chatting_mode_btn, volume;
private boolean btn_vocie = false;
private int flag = 1;
private Handler mHandler = new Handler();
private String voiceName;
private long startVoiceT, endVoiceT;

public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.chat);
// 启动activity时不自动弹出软键盘
getWindow().setSoftInputMode(
 WindowManager.LayoutParams.SOFT_INPUT_STATE_ALWAYS_HIDDEN);
initView();

initData();
}

public void initView() {
mListView = (ListView) findViewById(R.id.listview);
mBtnSend = (Button) findViewById(R.id.btn_send);
mBtnRcd = (TextView) findViewById(R.id.btn_rcd);
mBtnSend.setOnClickListener(this);
mBtnBack = (Button) findViewById(R.id.btn_back);
mBottom = (RelativeLayout) findViewById(R.id.btn_bottom);
mBtnBack.setOnClickListener(this);
chatting_mode_btn = (ImageView) this.findViewById(R.id.ivPopUp);
volume = (ImageView) this.findViewById(R.id.volume);
rcChat_popup = this.findViewById(R.id.rcChat_popup);
img1 = (ImageView) this.findViewById(R.id.img1);
sc_img1 = (ImageView) this.findViewById(R.id.sc_img1);
del_re = (LinearLayout) this.findViewById(R.id.del_re);
voice_rcd_hint_rcding = (LinearLayout) this
 .findViewById(R.id.voice_rcd_hint_rcding);
voice_rcd_hint_loading = (LinearLayout) this
 .findViewById(R.id.voice_rcd_hint_loading);
voice_rcd_hint_tooshort = (LinearLayout) this
 .findViewById(R.id.voice_rcd_hint_tooshort);
mSensor = new SoundMeter();
mEditTextContent = (EditText) findViewById(R.id.et_sendmessage);

//语音文字切换按钮
chatting_mode_btn.setOnClickListener(new OnClickListener() {

public void onClick(View v) {

if (btn_vocie) {
  mBtnRcd.setVisibility(View.GONE);
  mBottom.setVisibility(View.VISIBLE);
  btn_vocie = false;
  chatting_mode_btn
   .setImageResource(R.drawable.chatting_setmode_msg_btn);

} else {
  mBtnRcd.setVisibility(View.VISIBLE);
  mBottom.setVisibility(View.GONE);
  chatting_mode_btn
   .setImageResource(R.drawable.chatting_setmode_voice_btn);
  btn_vocie = true;
 }
 }
});
mBtnRcd.setOnTouchListener(new OnTouchListener() {

public boolean onTouch(View v, MotionEvent event) {
 //按下语音录制按钮时返回false执行父类OnTouch
 return false;
 }
});
}

private String[] msgArray = new String[] { "有人就有恩怨","有恩怨就有江湖","人就是江湖","你怎么退出？ ","生命中充满了巧合","两条平行线也会有相交的一天。"};

private String[] dataArray = new String[] { "2012-10-31 18:00",
 "2012-10-31 18:10", "2012-10-31 18:11", "2012-10-31 18:20",
 "2012-10-31 18:30", "2012-10-31 18:35"};
private final static int COUNT = 6;

public void initData() {
for (int i = 0; i < COUNT; i++) {
 ChatMsgEntity entity = new ChatMsgEntity();
 entity.setDate(dataArray[i]);
 if (i ％ 2 == 0) {
 entity.setName("白富美");
 entity.setMsgType(true);
 } else {
 entity.setName("高富帅");
 entity.setMsgType(false);
 }

entity.setText(msgArray[i]);
 mDataArrays.add(entity);
}

mAdapter = new ChatMsgViewAdapter(this, mDataArrays);
mListView.setAdapter(mAdapter);

}

public void onClick(View v) {
// TODO Auto-generated method stub
switch (v.getId()) {
case R.id.btn_send:
 send();
 break;
case R.id.btn_back:
 finish();
 break;
}
}

private void send() {
String contString = mEditTextContent.getText().toString();
if (contString.length() > 0) {
 ChatMsgEntity entity = new ChatMsgEntity();
 entity.setDate(getDate());
 entity.setName("高富帅");
 entity.setMsgType(false);
 entity.setText(contString);

mDataArrays.add(entity);
 mAdapter.notifyDataSetChanged();

mEditTextContent.setText("");

mListView.setSelection(mListView.getCount() - 1);
}
}

private String getDate() {
Calendar c = Calendar.getInstance();

String year = String.valueOf(c.get(Calendar.YEAR));
String month = String.valueOf(c.get(Calendar.MONTH));
String day = String.valueOf(c.get(Calendar.DAY_OF_MONTH) + 1);
String hour = String.valueOf(c.get(Calendar.HOUR_OF_DAY));
String mins = String.valueOf(c.get(Calendar.MINUTE));

StringBuffer sbBuffer = new StringBuffer();
sbBuffer.append(year + "-" + month + "-" + day + " " + hour + ":"
 + mins);

return sbBuffer.toString();
}

//按下语音录制按钮时
@Override
public boolean onTouchEvent(MotionEvent event) {

if (!Environment.getExternalStorageDirectory().exists()) {
 Toast.makeText(this, "No SDCard", Toast.LENGTH_LONG).show();
 return false;
}

if (btn_vocie) {
 System.out.println("1");
 int[] location = new int[2];
 mBtnRcd.getLocationInWindow(location); // 获取在当前窗口内的绝对坐标
 int btn_rc_Y = location[1];
 int btn_rc_X = location[0];
 int[] del_location = new int[2];
 del_re.getLocationInWindow(del_location);
 int del_Y = del_location[1];
 int del_x = del_location[0];
 if (event.getAction() == MotionEvent.ACTION_DOWN && flag == 1) {
 if (!Environment.getExternalStorageDirectory().exists()) {
  Toast.makeText(this, "No SDCard", Toast.LENGTH_LONG).show();
  return false;
 }
 System.out.println("2");
 if (event.getY() > btn_rc_Y && event.getX() > btn_rc_X) {//判断手势按下的位置是否是语音录制按钮的范围内
  System.out.println("3");
  mBtnRcd.setBackgroundResource(R.drawable.voice_rcd_btn_pressed);
  rcChat_popup.setVisibility(View.VISIBLE);
  voice_rcd_hint_loading.setVisibility(View.VISIBLE);
  voice_rcd_hint_rcding.setVisibility(View.GONE);
  voice_rcd_hint_tooshort.setVisibility(View.GONE);
  mHandler.postDelayed(new Runnable() {
  public void run() {
   if (!isShosrt) {
   voice_rcd_hint_loading.setVisibility(View.GONE);
   voice_rcd_hint_rcding
    .setVisibility(View.VISIBLE);
   }
  }
  }, 300);
  img1.setVisibility(View.VISIBLE);
  del_re.setVisibility(View.GONE);
  startVoiceT = SystemClock.currentThreadTimeMillis();
  voiceName = startVoiceT + ".amr";
  start(voiceName);
  flag = 2;
 }
 } else if (event.getAction() == MotionEvent.ACTION_UP && flag == 2) {//松开手势时执行录制完成
 System.out.println("4");
 mBtnRcd.setBackgroundResource(R.drawable.voice_rcd_btn_nor);
 if (event.getY() >= del_Y
  && event.getY() <= del_Y + del_re.getHeight()
  && event.getX() >= del_x
  && event.getX() <= del_x + del_re.getWidth()) {
  rcChat_popup.setVisibility(View.GONE);
  img1.setVisibility(View.VISIBLE);
  del_re.setVisibility(View.GONE);
  stop();
  flag = 1;
  File file = new File(android.os.Environment.getExternalStorageDirectory()+"/"
    + voiceName);
  if (file.exists()) {
  file.delete();
  }
 } else {

voice_rcd_hint_rcding.setVisibility(View.GONE);
  stop();
  endVoiceT = SystemClock.currentThreadTimeMillis();
  flag = 1;
  int time = (int) ((endVoiceT - startVoiceT) / 1000);
  if (time < 1) {
  isShosrt = true;
  voice_rcd_hint_loading.setVisibility(View.GONE);
  voice_rcd_hint_rcding.setVisibility(View.GONE);
  voice_rcd_hint_tooshort.setVisibility(View.VISIBLE);
  mHandler.postDelayed(new Runnable() {
   public void run() {
   voice_rcd_hint_tooshort
    .setVisibility(View.GONE);
   rcChat_popup.setVisibility(View.GONE);
   isShosrt = false;
   }
  }, 500);
  return false;
  }
  ChatMsgEntity entity = new ChatMsgEntity();
  entity.setDate(getDate());
  entity.setName("高富帅");
  entity.setMsgType(false);
  entity.setTime(time+"\"");
  entity.setText(voiceName);
  mDataArrays.add(entity);
  mAdapter.notifyDataSetChanged();
  mListView.setSelection(mListView.getCount() - 1);
  rcChat_popup.setVisibility(View.GONE);

}
 }
 if (event.getY() < btn_rc_Y) {//手势按下的位置不在语音录制按钮的范围内
 System.out.println("5");
 Animation mLitteAnimation = AnimationUtils.loadAnimation(this,
  R.anim.cancel_rc);
 Animation mBigAnimation = AnimationUtils.loadAnimation(this,
  R.anim.cancel_rc2);
 img1.setVisibility(View.GONE);
 del_re.setVisibility(View.VISIBLE);
 del_re.setBackgroundResource(R.drawable.voice_rcd_cancel_bg);
 if (event.getY() >= del_Y
  && event.getY() <= del_Y + del_re.getHeight()
  && event.getX() >= del_x
  && event.getX() <= del_x + del_re.getWidth()) {
  del_re.setBackgroundResource(R.drawable.voice_rcd_cancel_bg_focused);
  sc_img1.startAnimation(mLitteAnimation);
  sc_img1.startAnimation(mBigAnimation);
 }
 } else {

img1.setVisibility(View.VISIBLE);
 del_re.setVisibility(View.GONE);
 del_re.setBackgroundResource(0);
 }
}
return super.onTouchEvent(event);
}

private static final int POLL_INTERVAL = 300;

private Runnable mSleepTask = new Runnable() {
public void run() {
 stop();
}
};
private Runnable mPollTask = new Runnable() {
public void run() {
 double amp = mSensor.getAmplitude();
 updateDisplay(amp);
 mHandler.postDelayed(mPollTask, POLL_INTERVAL);

}
};

private void start(String name) {
mSensor.start(name);
mHandler.postDelayed(mPollTask, POLL_INTERVAL);
}

private void stop() {
mHandler.removeCallbacks(mSleepTask);
mHandler.removeCallbacks(mPollTask);
mSensor.stop();
volume.setImageResource(R.drawable.amp1);
}

private void updateDisplay(double signalEMA) {

switch ((int) signalEMA) {
case 0:
case 1:
 volume.setImageResource(R.drawable.amp1);
 break;
case 2:
case 3:
 volume.setImageResource(R.drawable.amp2);

break;
case 4:
case 5:
 volume.setImageResource(R.drawable.amp3);
 break;
case 6:
case 7:
 volume.setImageResource(R.drawable.amp4);
 break;
case 8:
case 9:
 volume.setImageResource(R.drawable.amp5);
 break;
case 10:
case 11:
 volume.setImageResource(R.drawable.amp6);
 break;
default:
 volume.setImageResource(R.drawable.amp7);
 break;
}
}

public void head_xiaohei(View v) { // 标题栏 返回按钮

}
}

第四：自定义的显示适配器：

package com.example.voice_rcd;

import java.util.List;

import android.content.Context;
import android.media.MediaPlayer;
import android.media.MediaPlayer.OnCompletionListener;
import android.view.LayoutInflater;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.TextView;

public class ChatMsgViewAdapter extends BaseAdapter {

public static interface IMsgViewType {
int IMVT_COM_MSG = 0;
int IMVT_TO_MSG = 1;
}

private static final String TAG = ChatMsgViewAdapter.class.getSimpleName();

private List<ChatMsgEntity> coll;

private Context ctx;

private LayoutInflater mInflater;
private MediaPlayer mMediaPlayer = new MediaPlayer();

public ChatMsgViewAdapter(Context context, List<ChatMsgEntity> coll) {
ctx = context;
this.coll = coll;
mInflater = LayoutInflater.from(context);
}

public int getCount() {
return coll.size();
}

public Object getItem(int position) {
return coll.get(position);
}

public long getItemId(int position) {
return position;
}

public int getItemViewType(int position) {
// TODO Auto-generated method stub
ChatMsgEntity entity = coll.get(position);

if (entity.getMsgType()) {
 return IMsgViewType.IMVT_COM_MSG;
} else {
 return IMsgViewType.IMVT_TO_MSG;
}

}

public int getViewTypeCount() {
// TODO Auto-generated method stub
return 2;
}

public View getView(int position, View convertView, ViewGroup parent) {

final ChatMsgEntity entity = coll.get(position);
boolean isComMsg = entity.getMsgType();

ViewHolder viewHolder = null;
if (convertView == null) {
 if (isComMsg) {
 convertView = mInflater.inflate(
  R.layout.chatting_item_msg_text_left, null);
 } else {
 convertView = mInflater.inflate(
  R.layout.chatting_item_msg_text_right, null);
 }

viewHolder = new ViewHolder();
 viewHolder.tvSendTime = (TextView) convertView
  .findViewById(R.id.tv_sendtime);
 viewHolder.tvUserName = (TextView) convertView
  .findViewById(R.id.tv_username);
 viewHolder.tvContent = (TextView) convertView
  .findViewById(R.id.tv_chatcontent);
 viewHolder.tvTime = (TextView) convertView
  .findViewById(R.id.tv_time);
 viewHolder.isComMsg = isComMsg;

convertView.setTag(viewHolder);
} else {
 viewHolder = (ViewHolder) convertView.getTag();
}

viewHolder.tvSendTime.setText(entity.getDate());

if (entity.getText().contains(".amr")) {
 viewHolder.tvContent.setText("");
 viewHolder.tvContent.setCompoundDrawablesWithIntrinsicBounds(0, 0, R.drawable.chatto_voice_playing, 0);
 viewHolder.tvTime.setText(entity.getTime());
} else {
 viewHolder.tvContent.setText(entity.getText());  
 viewHolder.tvContent.setCompoundDrawablesWithIntrinsicBounds(0, 0, 0, 0);
 viewHolder.tvTime.setText("");
}
viewHolder.tvContent.setOnClickListener(new OnClickListener() {

public void onClick(View v) {
 if (entity.getText().contains(".amr")) {
  playMusic(android.os.Environment.getExternalStorageDirectory()+"/"+entity.getText()) ;
 }
 }
});
viewHolder.tvUserName.setText(entity.getName());

return convertView;
}

static class ViewHolder {
public TextView tvSendTime;
public TextView tvUserName;
public TextView tvContent;
public TextView tvTime;
public boolean isComMsg = true;
}

/**
* @Description
* @param name
*/
private void playMusic(String name) {
try {
 if (mMediaPlayer.isPlaying()) {
 mMediaPlayer.stop();
 }
 mMediaPlayer.reset();
 mMediaPlayer.setDataSource(name);
 mMediaPlayer.prepare();
 mMediaPlayer.start();
 mMediaPlayer.setOnCompletionListener(new OnCompletionListener() {
 public void onCompletion(MediaPlayer mp) {

}
 });

} catch (Exception e) {
 e.printStackTrace();
}

}

private void stop() {

}

}