編輯:關於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:scrollbar 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() { } }
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持本站。
寫在前面通過上一篇文章的分析,基本已經了解當樂游戲詳情頁面的思想思路了,本篇文章主要是實現頁面的基本效果。頁面布局通過上一篇文章分析,已經知道,當樂游戲詳情頁是通過3個不
翻譯難有謬誤,錯誤之處敬請指出。遇到不理解之處請對照官方英文資料。 mock object,mocking framework在前兩篇博文中也多次出現,不知如何翻譯,就
一、情形描述在常使用的頁面布局中,為保持用戶一貫的使用風格,會保持頁面的整體風格相似。除開底部導航外,標題欄是使用頻率較高的另一種頁面布局。如圖所示:在程序猿&ldquo
前言:Android提供了一些方便使用的組件:TextView等,但是很多時候,默認的組件不能滿足需要,因此,必需掌握“自定義組件”的能力。對於程