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

2023-10-29 16:00:16

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

博客分类：
android 录音android 仿微信聊天界面android 仿微信录音UIandroidandroid 语音 

 

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

1先看效果图：


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


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

第一:chat.xml设计

 

Xml代码  本例为模仿微信聊天界面UI设计，文字发送以及语言录制UI(转载)
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:layout_width="fill_parent"  
  4.     android:layout_height="fill_parent"  
  5.     android:background="@drawable/chat_bg_default" >  
  6.   
  7.     <!-- 标题栏 -->  
  8.     <RelativeLayout  
  9.         android:id="@+id/rl_layout"  
  10.         android:layout_width="fill_parent"  
  11.         android:layout_height="45dp"  
  12.         android:background="@drawable/title_bar"  
  13.         android:gravity="center_vertical" >  
  14.   
  15.         <Button  
  16.             android:id="@+id/btn_back"  
  17.             android:layout_width="70dp"  
  18.             android:layout_height="wrap_content"  
  19.             android:layout_centerVertical="true"  
  20.             android:background="@drawable/title_btn_back"  
  21.             android:onClick="chat_back"  
  22.             android:text="返回"  
  23.             android:textColor="#fff"  
  24.             android:textSize="14sp" />  
  25.   
  26.         <TextView  
  27.             android:layout_width="wrap_content"  
  28.             android:layout_height="wrap_content"  
  29.             android:layout_centerInParent="true"  
  30.             android:text="白富美"  
  31.             android:textColor="#ffffff"  
  32.             android:textSize="20sp" />  
  33.   
  34.         <ImageButton  
  35.             android:id="@+id/right_btn"  
  36.             android:layout_width="67dp"  
  37.             android:layout_height="wrap_content"  
  38.             android:layout_alignParentRight="true"  
  39.             android:layout_centerVertical="true"  
  40.             android:layout_marginRight="5dp"  
  41.             android:background="@drawable/title_btn_right"  
  42.             android:src="@drawable/mm_title_btn_contact_normal" />  
  43.     </RelativeLayout>  
  44.   
  45.     <!-- 底部按钮以及 编辑框 -->  
  46.     <RelativeLayout  
  47.         android:id="@+id/rl_bottom"  
  48.         android:layout_width="fill_parent"  
  49.         android:layout_height="wrap_content"  
  50.         android:layout_alignParentBottom="true"  
  51.         android:background="@drawable/chat_footer_bg" >  
  52.   
  53.         <ImageView  
  54.             android:id="@+id/ivPopUp"  
  55.             android:layout_width="wrap_content"  
  56.             android:layout_height="wrap_content"  
  57.             android:layout_alignParentLeft="true"  
  58.             android:layout_centerVertical="true"  
  59.             android:layout_marginLeft="10dip"  
  60.             android:src="@drawable/chatting_setmode_msg_btn" />  
  61.   
  62.         <RelativeLayout  
  63.             android:id="@+id/btn_bottom"  
  64.             android:layout_width="fill_parent"  
  65.             android:layout_height="wrap_content"  
  66.             android:layout_alignParentRight="true"  
  67.             android:layout_centerVertical="true"  
  68.             android:layout_toRightOf="@+id/ivPopUp" >  
  69.   
  70.             <Button  
  71.                 android:id="@+id/btn_send"  
  72.                 android:layout_width="60dp"  
  73.                 android:layout_height="40dp"  
  74.                 android:layout_alignParentRight="true"  
  75.                 android:layout_centerVertical="true"  
  76.                 android:layout_marginRight="10dp"  
  77.                 android:background="@drawable/chat_send_btn"  
  78.                 android:text="发送" />  
  79.   
  80.             <EditText  
  81.                 android:id="@+id/et_sendmessage"  
  82.                 android:layout_width="fill_parent"  
  83.                 android:layout_height="40dp"  
  84.                 android:layout_centerVertical="true"  
  85.                 android:layout_marginLeft="10dp"  
  86.                 android:layout_marginRight="10dp"  
  87.                 android:layout_toLeftOf="@id/btn_send"  
  88.                 android:background="@drawable/login_edit_normal"  
  89.                 android:singleLine="true"  
  90.                 android:textSize="18sp" />  
  91.         </RelativeLayout>  
  92.   
  93.         <TextView  
  94.             android:id="@+id/btn_rcd"  
  95.             android:layout_width="fill_parent"  
  96.             android:layout_height="40dp"  
  97.             android:layout_alignParentRight="true"  
  98.             android:layout_centerVertical="true"  
  99.             android:layout_marginLeft="10dp"  
  100.             android:layout_marginRight="10dp"  
  101.             android:layout_toRightOf="@+id/ivPopUp"  
  102.             android:background="@drawable/chat_send_btn"  
  103.             android:gravity="center"  
  104.             android:text="按住说话"  
  105.             android:visibility="gone" />  
  106.     </RelativeLayout>  
  107.       
  108.     <!-- 聊天内容 listview -->  
  109.     <ListView  
  110.         android:id="@+id/listview"  
  111.         android:layout_width="fill_parent"  
  112.         android:layout_height="fill_parent"  
  113.         android:layout_above="@id/rl_bottom"  
  114.         android:layout_below="@id/rl_layout"  
  115.         android:cacheColorHint="#0000"  
  116.         android:divider="@null"  
  117.         android:dividerHeight="5dp"  
  118.         android:scrollbarStyle="outsideOverlay"  
  119.         android:stackFromBottom="true" />  
  120.       
  121.     <!-- 录音显示UI层 -->  
  122.     <LinearLayout  
  123.         android:id="@+id/rcChat_popup"  
  124.         android:layout_width="fill_parent"  
  125.         android:layout_height="fill_parent"  
  126.         android:gravity="center"  
  127.         android:visibility="gone" >  
  128.   
  129.         <include  
  130.             android:layout_width="wrap_content"  
  131.             android:layout_height="wrap_content"  
  132.             android:layout_gravity="center"  
  133.             layout="@layout/voice_rcd_hint_window" />  
  134.     </LinearLayout>  
  135.   
  136. </RelativeLayout>  
 

 

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

 

Java代码  本例为模仿微信聊天界面UI设计，文字发送以及语言录制UI(转载)
  1. package com.example.voice_rcd;  
  2.   
  3. import java.io.IOException;  
  4.   
  5. import android.media.MediaRecorder;  
  6. import android.os.Environment;  
  7.   
  8. public  class SoundMeter {  
  9.     static final private double EMA_FILTER = 0.6;  
  10.   
  11.     private MediaRecorder mRecorder = null;  
  12.     private double mEMA = 0.0;  
  13.   
  14.     public void start(String name) {  
  15.         if (!Environment.getExternalStorageState().equals(  
  16.                 android.os.Environment.MEDIA_MOUNTED)) {  
  17.             return;  
  18.         }  
  19.         if (mRecorder == null) {  
  20.             mRecorder = new MediaRecorder();  
  21.             mRecorder.setAudioSource(MediaRecorder.AudioSource.MIC);  
  22.             mRecorder.setOutputFormat(MediaRecorder.OutputFormat.THREE_GPP);  
  23.             mRecorder.setAudioEncoder(MediaRecorder.AudioEncoder.AMR_NB);  
  24.             mRecorder.setOutputFile(android.os.Environment.getExternalStorageDirectory()+"/"+name);  
  25.             try {  
  26.                 mRecorder.prepare();  
  27.                 mRecorder.start();  
  28.                   
  29.                 mEMA = 0.0;  
  30.             } catch (IllegalStateException e) {  
  31.                 System.out.print(e.getMessage());  
  32.             } catch (IOException e) {  
  33.                 System.out.print(e.getMessage());  
  34.             }  
  35.   
  36.         }  
  37.     }  
  38.   
  39.     public void stop() {  
  40.         if (mRecorder != null) {  
  41.             mRecorder.stop();  
  42.             mRecorder.release();  
  43.             mRecorder = null;  
  44.         }  
  45.     }  
  46.   
  47.     public void pause() {  
  48.         if (mRecorder != null) {  
  49.             mRecorder.stop();  
  50.         }  
  51.     }  
  52.   
  53.     public void start() {  
  54.         if (mRecorder != null) {  
  55.             mRecorder.start();  
  56.         }  
  57.     }  
  58.   
  59.     public double getAmplitude() {  
  60.         if (mRecorder != null)  
  61.             return (mRecorder.getMaxAmplitude() / 2700.0);  
  62.         else  
  63.             return 0;  
  64.   
  65.     }  
  66.   
  67.     public double getAmplitudeEMA() {  
  68.         double amp = getAmplitude();  
  69.         mEMA = EMA_FILTER * amp + (1.0 - EMA_FILTER) * mEMA;  
  70.         return mEMA;  
  71.     }  
  72. }  

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

 

Java代码  本例为模仿微信聊天界面UI设计，文字发送以及语言录制UI(转载)
  1. package com.example.voice_rcd;  
  2.   
  3. import java.io.File;  
  4. import java.util.ArrayList;  
  5. import java.util.Calendar;  
  6. import java.util.List;  
  7.   
  8. import android.app.Activity;  
  9. import android.os.Bundle;  
  10. import android.os.Environment;  
  11. import android.os.Handler;  
  12. import android.os.SystemClock;  
  13. import android.view.MotionEvent;  
  14. import android.view.View;  
  15. import android.view.View.OnClickListener;  
  16. import android.view.View.OnTouchListener;  
  17. import android.view.WindowManager;  
  18. import android.view.animation.Animation;  
  19. import android.view.animation.AnimationUtils;  
  20. import android.widget.Button;  
  21. import android.widget.EditText;  
  22. import android.widget.ImageView;  
  23. import android.widget.LinearLayout;  
  24. import android.widget.ListView;  
  25. import android.widget.RelativeLayout;  
  26. import android.widget.TextView;  
  27. import android.widget.Toast;  
  28.   
  29. public class MainActivity extends Activity implements OnClickListener {  
  30.     /** Called when the activity is first created. */  
  31.   
  32.     private Button mBtnSend;  
  33.     private TextView mBtnRcd;  
  34.     private Button mBtnBack;  
  35.     private EditText mEditTextContent;  
  36.     private RelativeLayout mBottom;  
  37.     private ListView mListView;  
  38.     private ChatMsgViewAdapter mAdapter;  
  39.     private List<ChatMsgEntity> mDataArrays = new ArrayList<ChatMsgEntity>();  
  40.     private boolean isShosrt = false;  
  41.     private LinearLayout voice_rcd_hint_loading, voice_rcd_hint_rcding,  
  42.             voice_rcd_hint_tooshort;  
  43.     private ImageView img1, sc_img1;  
  44.     private SoundMeter mSensor;  
  45.     private View rcChat_popup;  
  46.     private LinearLayout del_re;  
  47.     private ImageView chatting_mode_btn, volume;  
  48.     private boolean btn_vocie = false;  
  49.     private int flag = 1;  
  50.     private Handler mHandler = new Handler();  
  51.     private String voiceName;  
  52.     private long startVoiceT, endVoiceT;  
  53.   
  54.     public void onCreate(Bundle savedInstanceState) {  
  55.         super.onCreate(savedInstanceState);  
  56.         setContentView(R.layout.chat);  
  57.         // 启动activity时不自动弹出软键盘  
  58.         getWindow().setSoftInputMode(  
  59.                 WindowManager.LayoutParams.SOFT_INPUT_STATE_ALWAYS_HIDDEN);  
  60.         initView();  
  61.   
  62.         initData();  
  63.     }  
  64.   
  65.     public void initView() {  
  66.         mListView = (ListView) findViewById(R.id.listview);  
  67.         mBtnSend = (Button) findViewById(R.id.btn_send);  
  68.         mBtnRcd = (TextView) findViewById(R.id.btn_rcd);  
  69.         mBtnSend.setOnClickListener(this);  
  70.         mBtnBack = (Button) findViewById(R.id.btn_back);  
  71.         mBottom = (RelativeLayout) findViewById(R.id.btn_bottom);  
  72.         mBtnBack.setOnClickListener(this);  
  73.         chatting_mode_btn = (ImageView) this.findViewById(R.id.ivPopUp);  
  74.         volume = (ImageView) this.findViewById(R.id.volume);  
  75.         rcChat_popup = this.findViewById(R.id.rcChat_popup);  
  76.         img1 = (ImageView) this.findViewById(R.id.img1);  
  77.         sc_img1 = (ImageView) this.findViewById(R.id.sc_img1);  
  78.         del_re = (LinearLayout) this.findViewById(R.id.del_re);  
  79.         voice_rcd_hint_rcding = (LinearLayout) this  
  80.                 .findViewById(R.id.voice_rcd_hint_rcding);  
  81.         voice_rcd_hint_loading = (LinearLayout) this  
  82.                 .findViewById(R.id.voice_rcd_hint_loading);  
  83.         voice_rcd_hint_tooshort = (LinearLayout) this  
  84.                 .findViewById(R.id.voice_rcd_hint_tooshort);  
  85.         mSensor = new SoundMeter();  
  86.         mEditTextContent = (EditText) findViewById(R.id.et_sendmessage);  
  87.           
  88.         //语音文字切换按钮  
  89.         chatting_mode_btn.setOnClickListener(new OnClickListener() {  
  90.   
  91.             public void onClick(View v) {  
  92.   
  93.                 if (btn_vocie) {  
  94.                     mBtnRcd.setVisibility(View.GONE);  
  95.                     mBottom.setVisibility(View.VISIBLE);  
  96.                     btn_vocie = false;  
  97.                     chatting_mode_btn  
  98.                             .setImageResource(R.drawable.chatting_setmode_msg_btn);  
  99.   
  100.                 } else {  
  101.                     mBtnRcd.setVisibility(View.VISIBLE);  
  102.                     mBottom.setVisibility(View.GONE);  
  103.                     chatting_mode_btn  
  104.                             .setImageResource(R.drawable.chatting_setmode_voice_btn);  
  105.                     btn_vocie = true;  
  106.                 }  
  107.             }  
  108.         });  
  109.         mBtnRcd.setOnTouchListener(new OnTouchListener() {  
  110.               
  111.             public boolean onTouch(View v, MotionEvent event) {  
  112.                 //按下语音录制按钮时返回false执行父类OnTouch  
  113.                 return false;  
  114.             }  
  115.         });  
  116.     }  
  117.   
  118.     private String[] msgArray = new String[] { "有人就有恩怨","有恩怨就有江湖","人就是江湖","你怎么退出？ ","生命中充满了巧合","两条平行线也会有相交的一天。"};  
  119.   
  120.     private String[] dataArray = new String[] { "2012-10-31 18:00",  
  121.             "2012-10-31 18:10", "2012-10-31 18:11", "2012-10-31 18:20",  
  122.             "2012-10-31 18:30", "2012-10-31 18:35"};  
  123.     private final static int COUNT = 6;  
  124.   
  125.     public void initData() {  
  126.         for (int i = 0; i < COUNT; i++) {  
  127.             ChatMsgEntity entity = new ChatMsgEntity();  
  128.             entity.setDate(dataArray[i]);  
  129.             if (i % 2 == 0) {  
  130.                 entity.setName("白富美");  
  131.                 entity.setMsgType(true);  
  132.             } else {  
  133.                 entity.setName("高富帅");  
  134.                 entity.setMsgType(false);  
  135.             }  
  136.   
  137.             entity.setText(msgArray[i]);  
  138.             mDataArrays.add(entity);  
  139.         }  
  140.   
  141.         mAdapter = new ChatMsgViewAdapter(this, mDataArrays);  
  142.         mListView.setAdapter(mAdapter);  
  143.   
  144.     }  
  145.   
  146.     public void onClick(View v) {  
  147.         // TODO Auto-generated method stub  
  148.         switch (v.getId()) {  
  149.         case R.id.btn_send:  
  150.             send();  
  151.             break;  
  152.         case R.id.btn_back:  
  153.             finish();  
  154.             break;  
  155.         }  
  156.     }  
  157.   
  158.     private void send() {  
  159.         String contString = mEditTextContent.getText().toString();  
  160.         if (contString.length() > 0) {  
  161.             ChatMsgEntity entity = new ChatMsgEntity();  
  162.             entity.setDate(getDate());  
  163.             entity.setName("高富帅");  
  164.             entity.setMsgType(false);  
  165.             entity.setText(contString);  
  166.   
  167.             mDataArrays.add(entity);  
  168.             mAdapter.notifyDataSetChanged();  
  169.   
  170.             mEditTextContent.setText("");  
  171.   
  172.             mListView.setSelection(mListView.getCount() - 1);  
  173.         }  
  174.     }  
  175.   
  176.     private String getDate() {  
  177.         Calendar c = Calendar.getInstance();  
  178.   
  179.         String year = String.valueOf(c.get(Calendar.YEAR));  
  180.         String month = String.valueOf(c.get(Calendar.MONTH));  
  181.         String day = String.valueOf(c.get(Calendar.DAY_OF_MONTH) + 1);  
  182.         String hour = String.valueOf(c.get(Calendar.HOUR_OF_DAY));  
  183.         String mins = String.valueOf(c.get(Calendar.MINUTE));  
  184.   
  185.         StringBuffer sbBuffer = new StringBuffer();  
  186.         sbBuffer.append(year + "-" + month + "-" + day + " " + hour + ":"  
  187.                 + mins);  
  188.   
  189.         return sbBuffer.toString();  
  190.     }  
  191.   
  192.     //按下语音录制按钮时  
  193.     @Override  
  194.     public boolean onTouchEvent(MotionEvent event) {  
  195.   
  196.         if (!Environment.getExternalStorageDirectory().exists()) {  
  197.             Toast.makeText(this, "No SDCard", Toast.LENGTH_LONG).show();  
  198.             return false;  
  199.         }  
  200.   
  201.         if (btn_vocie) {  
  202.             System.out.println("1");  
  203.             int[] location = new int[2];  
  204.             mBtnRcd.getLocationInWindow(location); // 获取在当前窗口内的绝对坐标  
  205.             int btn_rc_Y = location[1];  
  206.             int btn_rc_X = location[0];  
  207.             int[] del_location = new int[2];  
  208.             del_re.getLocationInWindow(del_location);  
  209.             int del_Y = del_location[1];  
  210.             int del_x = del_location[0];  
  211.             if (event.getAction() == MotionEvent.ACTION_DOWN && flag == 1) {  
  212.                 if (!Environment.getExternalStorageDirectory().exists()) {  
  213.                     Toast.makeText(this, "No SDCard", Toast.LENGTH_LONG).show();  
  214.                     return false;  
  215.                 }  
  216.                 System.out.println("2");  
  217.                 if (event.getY() > btn_rc_Y && event.getX() > btn_rc_X) {//判断手势按下的位置是否是语音录制按钮的范围内  
  218.                     System.out.println("3");  
  219.                     mBtnRcd.setBackgroundResource(R.drawable.voice_rcd_btn_pressed);  
  220.                     rcChat_popup.setVisibility(View.VISIBLE);  
  221.                     voice_rcd_hint_loading.setVisibility(View.VISIBLE);  
  222.                     voice_rcd_hint_rcding.setVisibility(View.GONE);  
  223.                     voice_rcd_hint_tooshort.setVisibility(View.GONE);  
  224.                     mHandler.postDelayed(new Runnable() {  
  225.                         public void run() {  
  226.                             if (!isShosrt) {  
  227.                                 voice_rcd_hint_loading.setVisibility(View.GONE);  
  228.                                 voice_rcd_hint_rcding  
  229.                                         .setVisibility(View.VISIBLE);  
  230.                             }  
  231.                         }  
  232.                     }, 300);  
  233.                     img1.setVisibility(View.VISIBLE);  
  234.                     del_re.setVisibility(View.GONE);  
  235.                     startVoiceT = SystemClock.currentThreadTimeMillis();  
  236.                     voiceName = startVoiceT + ".amr";  
  237.                     start(voiceName);  
  238.                     flag = 2;  
  239.                 }  
  240.             } else if (event.getAction() == MotionEvent.ACTION_UP && flag == 2) {//松开手势时执行录制完成  
  241.                 System.out.println("4");  
  242.                 mBtnRcd.setBackgroundResource(R.drawable.voice_rcd_btn_nor);  
  243.                 if (event.getY() >= del_Y  
  244.                         && event.getY() <= del_Y + del_re.getHeight()  
  245.                         && event.getX() >= del_x  
  246.                         && event.getX() <= del_x + del_re.getWidth()) {  
  247.                     rcChat_popup.setVisibility(View.GONE);  
  248.                     img1.setVisibility(View.VISIBLE);  
  249.                     del_re.setVisibility(View.GONE);  
  250.                     stop();  
  251.                     flag = 1;  
  252.                     File file = new File(android.os.Environment.getExternalStorageDirectory()+"/"  
  253.                                     + voiceName);  
  254.                     if (file.exists()) {  
  255.                         file.delete();  
  256.                     }  
  257.                 } else {  
  258.   
  259.                     voice_rcd_hint_rcding.setVisibility(View.GONE);  
  260.                     stop();  
  261.                     endVoiceT = SystemClock.currentThreadTimeMillis();  
  262.                     flag = 1;  
  263.                     int time = (int) ((endVoiceT - startVoiceT) / 1000);  
  264.                     if (time < 1) {  
  265.                         isShosrt = true;  
  266.                         voice_rcd_hint_loading.setVisibility(View.GONE);  
  267.                         voice_rcd_hint_rcding.setVisibility(View.GONE);  
  268.                         voice_rcd_hint_tooshort.setVisibility(View.VISIBLE);  
  269.                         mHandler.postDelayed(new Runnable() {  
  270.                             public void run() {  
  271.                                 voice_rcd_hint_tooshort  
  272.                                         .setVisibility(View.GONE);  
  273.                                 rcChat_popup.setVisibility(View.GONE);  
  274.                                 isShosrt = false;  
  275.                             }  
  276.                         }, 500);  
  277.                         return false;  
  278.                     }  
  279.                     ChatMsgEntity entity = new ChatMsgEntity();  
  280.                     entity.setDate(getDate());  
  281.                     entity.setName("高富帅");  
  282.                     entity.setMsgType(false);  
  283.                     entity.setTime(time+"\"");  
  284.                     entity.setText(voiceName);  
  285.                     mDataArrays.add(entity);  
  286.                     mAdapter.notifyDataSetChanged();  
  287.                     mListView.setSelection(mListView.getCount() - 1);  
  288.                     rcChat_popup.setVisibility(View.GONE);  
  289.   
  290.                 }  
  291.             }  
  292.             if (event.getY() < btn_rc_Y) {//手势按下的位置不在语音录制按钮的范围内  
  293.                 System.out.println("5");  
  294.                 Animation mLitteAnimation = AnimationUtils.loadAnimation(this,  
  295.                         R.anim.cancel_rc);  
  296.                 Animation mBigAnimation = AnimationUtils.loadAnimation(this,  
  297.                         R.anim.cancel_rc2);  
  298.                 img1.setVisibility(View.GONE);  
  299.                 del_re.setVisibility(View.VISIBLE);  
  300.                 del_re.setBackgroundResource(R.drawable.voice_rcd_cancel_bg);  
  301.                 if (event.getY() >= del_Y  
  302.                         && event.getY() <= del_Y + del_re.getHeight()  
  303.                         && event.getX() >= del_x  
  304.                         && event.getX() <= del_x + del_re.getWidth()) {  
  305.                     del_re.setBackgroundResource(R.drawable.voice_rcd_cancel_bg_focused);  
  306.                     sc_img1.startAnimation(mLitteAnimation);  
  307.                     sc_img1.startAnimation(mBigAnimation);  
  308.                 }  
  309.             } else {  
  310.   
  311.                 img1.setVisibility(View.VISIBLE);  
  312.                 del_re.setVisibility(View.GONE);  
  313.                 del_re.setBackgroundResource(0);  
  314.             }  
  315.         }  
  316.         return super.onTouchEvent(event);  
  317.     }  
  318.   
  319.     private static final int POLL_INTERVAL = 300;  
  320.   
  321.     private Runnable mSleepTask = new Runnable() {  
  322.         public void run() {  
  323.             stop();  
  324.         }  
  325.     };  
  326.     private Runnable mPollTask = new Runnable() {  
  327.         public void run() {  
  328.             double amp = mSensor.getAmplitude();  
  329.             updateDisplay(amp);  
  330.             mHandler.postDelayed(mPollTask, POLL_INTERVAL);  
  331.   
  332.         }  
  333.     };  
  334.   
  335.     private void start(String name) {  
  336.         mSensor.start(name);  
  337.         mHandler.postDelayed(mPollTask, POLL_INTERVAL);  
  338.     }  
  339.   
  340.     private void stop() {  
  341.         mHandler.removeCallbacks(mSleepTask);  
  342.         mHandler.removeCallbacks(mPollTask);  
  343.         mSensor.stop();  
  344.         volume.setImageResource(R.drawable.amp1);  
  345.     }  
  346.   
  347.     private void updateDisplay(double signalEMA) {  
  348.           
  349.         switch ((int) signalEMA) {  
  350.         case 0:  
  351.         case 1:  
  352.             volume.setImageResource(R.drawable.amp1);  
  353.             break;  
  354.         case 2:  
  355.         case 3:  
  356.             volume.setImageResource(R.drawable.amp2);  
  357.               
  358.             break;  
  359.         case 4:  
  360.         case 5:  
  361.             volume.setImageResource(R.drawable.amp3);  
  362.             break;  
  363.         case 6:  
  364.         case 7:  
  365.             volume.setImageResource(R.drawable.amp4);  
  366.             break;  
  367.         case 8:  
  368.         case 9:  
  369.             volume.setImageResource(R.drawable.amp5);  
  370.             break;  
  371.         case 10:  
  372.         case 11:  
  373.             volume.setImageResource(R.drawable.amp6);  
  374.             break;  
  375.         default:  
  376.             volume.setImageResource(R.drawable.amp7);  
  377.             break;  
  378.         }  
  379.     }  
  380.   
  381.     public void head_xiaohei(View v) { // 标题栏 返回按钮  
  382.   
  383.     }  
  384. }  

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

 

Java代码  本例为模仿微信聊天界面UI设计，文字发送以及语言录制UI(转载)
  1. package com.example.voice_rcd;  
  2.   
  3. import java.util.List;  
  4.   
  5. import android.content.Context;  
  6. import android.media.MediaPlayer;  
  7. import android.media.MediaPlayer.OnCompletionListener;  
  8. import android.view.LayoutInflater;  
  9. import android.view.View;  
  10. import android.view.View.OnClickListener;  
  11. import android.view.ViewGroup;  
  12. import android.widget.BaseAdapter;  
  13. import android.widget.TextView;  
  14.   
  15. public class ChatMsgViewAdapter extends BaseAdapter {  
  16.   
  17.     public static interface IMsgViewType {  
  18.         int IMVT_COM_MSG = 0;  
  19.         int IMVT_TO_MSG = 1;  
  20.     }  
  21.   
  22.     private static final String TAG = ChatMsgViewAdapter.class.getSimpleName();  
  23.   
  24.     private List<ChatMsgEntity> coll;  
  25.   
  26.     private Context ctx;  
  27.   
  28.     private LayoutInflater mInflater;  
  29.     private MediaPlayer mMediaPlayer = new MediaPlayer();  
  30.   
  31.     public ChatMsgViewAdapter(Context context, List<ChatMsgEntity> coll) {  
  32.         ctx = context;  
  33.         this.coll = coll;  
  34.         mInflater = LayoutInflater.from(context);  
  35.     }  
  36.   
  37.     public int getCount() {  
  38.         return coll.size();  
  39.     }  
  40.   
  41.     public Object getItem(int position) {  
  42.         return coll.get(position);  
  43.     }  
  44.   
  45.     public long getItemId(int position) {  
  46.         return position;  
  47.     }  
  48.   
  49.     public int getItemViewType(int position) {  
  50.         // TODO Auto-generated method stub  
  51.         ChatMsgEntity entity = coll.get(position);  
  52.   
  53.         if (entity.getMsgType()) {  
  54.             return IMsgViewType.IMVT_COM_MSG;  
  55.         } else {  
  56.             return IMsgViewType.IMVT_TO_MSG;  
  57.         }  
  58.   
  59.     }  
  60.   
  61.     public int getViewTypeCount() {  
  62.         // TODO Auto-generated method stub  
  63.         return 2;  
  64.     }  
  65.   
  66.     public View getView(int position, View convertView, ViewGroup parent) {  
  67.   
  68.         final ChatMsgEntity entity = coll.get(position);  
  69.         boolean isComMsg = entity.getMsgType();  
  70.   
  71.         ViewHolder viewHolder = null;  
  72.         if (convertView == null) {  
  73.             if (isComMsg) {  
  74.                 convertView = mInflater.inflate(  
  75.                         R.layout.chatting_item_msg_text_left, null);  
  76.             } else {  
  77.                 convertView = mInflater.inflate(  
  78.                         R.layout.chatting_item_msg_text_right, null);  
  79.             }  
  80.   
  81.             viewHolder = new ViewHolder();  
  82.             viewHolder.tvSendTime = (TextView) convertView  
  83.                     .findViewById(R.id.tv_sendtime);  
  84.             viewHolder.tvUserName = (TextView) convertView  
  85.                     .findViewById(R.id.tv_username);  
  86.             viewHolder.tvContent = (TextView) convertView  
  87.                     .findViewById(R.id.tv_chatcontent);  
  88.             viewHolder.tvTime = (TextView) convertView  
  89.                     .findViewById(R.id.tv_time);  
  90.             viewHolder.isComMsg = isComMsg;  
  91.   
  92.             convertView.setTag(viewHolder);  
  93.         } else {  
  94.             viewHolder = (ViewHolder) convertView.getTag();  
  95.         }  
  96.   
  97.         viewHolder.tvSendTime.setText(entity.getDate());  
  98.           
  99.         if (entity.getText().contains(".amr")) {  
  100.             viewHolder.tvContent.setText("");  
  101.             viewHolder.tvContent.setCompoundDrawablesWithIntrinsicBounds(0, 0, R.drawable.chatto_voice_playing, 0);  
  102.             viewHolder.tvTime.setText(entity.getTime());  
  103.         } else {  
  104.             viewHolder.tvContent.setText(entity.getText());           
  105.             viewHolder.tvContent.setCompoundDrawablesWithIntrinsicBounds(0, 0, 0, 0);  
  106.             viewHolder.tvTime.setText("");  
  107.         }  
  108.         viewHolder.tvContent.setOnClickListener(new OnClickListener() {  
  109.               
  110.             public void onClick(View v) {  
  111.                 if (entity.getText().contains(".amr")) {  
  112.                     playMusic(android.os.Environment.getExternalStorageDirectory()+"/"+entity.getText()) ;  
  113.                 }  
  114.             }  
  115.         });  
  116.         viewHolder.tvUserName.setText(entity.getName());  
  117.           
  118.         return convertView;  
  119.     }  
  120.   
  121.     static class ViewHolder {  
  122.         public TextView tvSendTime;  
  123.         public TextView tvUserName;  
  124.         public TextView tvContent;  
  125.         public TextView tvTime;  
  126.         public boolean isComMsg = true;  
  127.     }  
  128.   
  129.     /** 
  130.      * @Description 
  131.      * @param name 
  132.      */  
  133.     private void playMusic(String name) {  
  134.         try {  
  135.             if (mMediaPlayer.isPlaying()) {  
  136.                 mMediaPlayer.stop();  
  137.             }  
  138.             mMediaPlayer.reset();  
  139.             mMediaPlayer.setDataSource(name);  
  140.             mMediaPlayer.prepare();  
  141.             mMediaPlayer.start();  
  142.             mMediaPlayer.setOnCompletionListener(new OnCompletionListener() {  
  143.                 public void onCompletion(MediaPlayer mp) {  
  144.   
  145.                 }  
  146.             });  
  147.   
  148.         } catch (Exception e) {  
  149.             e.printStackTrace();  
  150.         }  
  151.   
  152.     }  
  153.   
  154.     private void stop() {  
  155.   
  156.     }  
  157.   
  158. }  
 

附上代码，希望有需要的可以下载研究完善。

分享到： 本例为模仿微信聊天界面UI设计，文字发送以及语言录制UI(转载) 本例为模仿微信聊天界面UI设计，文字发送以及语言录制UI(转载)
 | android 使用GridView实现Gallery的效果 ...
评论
45 楼 巴士uncle 2015-08-07  
本例为模仿微信聊天界面UI设计，文字发送以及语言录制UI(转载) 本例为模仿微信聊天界面UI设计，文字发送以及语言录制UI(转载) 本例为模仿微信聊天界面UI设计，文字发送以及语言录制UI(转载) 本例为模仿微信聊天界面UI设计，文字发送以及语言录制UI(转载) 本例为模仿微信聊天界面UI设计，文字发送以及语言录制UI(转载) 本例为模仿微信聊天界面UI设计，文字发送以及语言录制UI(转载) 本例为模仿微信聊天界面UI设计，文字发送以及语言录制UI(转载) 本例为模仿微信聊天界面UI设计，文字发送以及语言录制UI(转载) 本例为模仿微信聊天界面UI设计，文字发送以及语言录制UI(转载) 本例为模仿微信聊天界面UI设计，文字发送以及语言录制UI(转载) 本例为模仿微信聊天界面UI设计，文字发送以及语言录制UI(转载) 本例为模仿微信聊天界面UI设计，文字发送以及语言录制UI(转载) 本例为模仿微信聊天界面UI设计，文字发送以及语言录制UI(转载)
44 楼 cheng521314 2015-07-30  
可以点个赞吗？
43 楼 wdz99 2015-07-21  
不错，还能语音！！！
42 楼 xingzhiyu163 2015-07-07  
请问楼主有服务端吗 ？
41 楼 xiaomayi201314 2015-06-24  
楼主很强大 受用了本例为模仿微信聊天界面UI设计，文字发送以及语言录制UI(转载)
40 楼 333sunshine 2015-06-12  
本例为模仿微信聊天界面UI设计，文字发送以及语言录制UI(转载) 本例为模仿微信聊天界面UI设计，文字发送以及语言录制UI(转载) 本例为模仿微信聊天界面UI设计，文字发送以及语言录制UI(转载) 本例为模仿微信聊天界面UI设计，文字发送以及语言录制UI(转载)
39 楼 liang_yu2012 2015-01-30  
喵小皓 写道
int time = (int) ((endVoiceT - startVoiceT) / 1000)； 这个计算说话长度不准确。稍微调整一下就不会提示时间太短了


弱弱的问一下
这块怎么修改？
38 楼 Mybeautiful 2015-01-22  
hackervip 写道
Mybeautiful 写道
播放声音时喇叭不懂，不过图片资源已经在里面了，稍微改下就好了。谢谢博主！


你好，哥们能说下怎么实现播放语音的喇叭动画吗，谢谢了我是个新手本例为模仿微信聊天界面UI设计，文字发送以及语言录制UI(转载) 

就是监听语音的变化，换图片，看起来像在动一样。
37 楼 hackervip 2015-01-21  
Mybeautiful 写道
播放声音时喇叭不懂，不过图片资源已经在里面了，稍微改下就好了。谢谢博主！


你好，哥们能说下怎么实现播放语音的喇叭动画吗，谢谢了我是个新手本例为模仿微信聊天界面UI设计，文字发送以及语言录制UI(转载) 
36 楼 Mybeautiful 2015-01-07  
播放声音时喇叭不懂，不过图片资源已经在里面了，稍微改下就好了。谢谢博主！
35 楼 Mybeautiful 2015-01-06  
下载看了下不错；不过里面有个图片 title_bar.9.png有点问题，导入android stuido提示这个不是.9格式的文件
34 楼 cspows 2015-01-03  
厉害厉害，学习了楼主谢谢了
33 楼 java2eer 2014-12-06  
推荐一个我做的开源聊天界面控件Android-Chat-Widget，
很少的代码就可以集成好
https://github.com/ijarobot/Android-Chat-Widget

本例为模仿微信聊天界面UI设计，文字发送以及语言录制UI(转载) 本例为模仿微信聊天界面UI设计，文字发送以及语言录制UI(转载)
32 楼 pimkle 2014-10-27  
语音根本没有用
31 楼 长青万寿佛 2014-10-22  
这个可以作为校园版微信了,我有意,你有意否?laohur@qq.com
30 楼 kingtami 2014-10-22  
改成System.currentTimeMillis()计时比较好用了.
29 楼 hpf_emperor 2014-10-01  
感谢分享，帮助很大
28 楼 喵小皓 2014-07-23  
int time = (int) ((endVoiceT - startVoiceT) / 1000)； 这个计算说话长度不准确。稍微调整一下就不会提示时间太短了
27 楼 hansteve 2014-07-01  
不错啊，下来研究一下，正好需要。  楼主的无私，分享万岁。
26 楼 zhengduoutan 2014-06-01  
好厉害的样子，看看能不能用
发表评论

本例为模仿微信聊天界面UI设计，文字发送以及语言录制UI(转载) 您还没有登录,请您登录后再发表评论

 
104zz
  • 浏览: 617921 次
  • 性别: 本例为模仿微信聊天界面UI设计，文字发送以及语言录制UI(转载)
  • 来自: 深圳
  • 本例为模仿微信聊天界面UI设计，文字发送以及语言录制UI(转载)
社区版块
存档分类
 

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

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

上一篇：微信公众号开发之微信支付


下一篇：微信发送模板消息