android項目 之 記事本（13） ----- 查看圖片及播放錄音

標籤：查看圖片   播放錄音   圖文混排   

本文是自己學習所做筆記，歡迎轉載，但請註明出處：http://blog.csdn.net/jesson20121020

          今天就來實現下查看圖片及錄音的功能，在編輯或者瀏覽記事時，點擊圖片，開啟一個自訂Activity（當然了，也可以調用系統的圖庫來查看）來查看所添加的圖片的原始圖片，而不是縮放後的圖片，同理，用自訂Activity來查看錄音檔案，實現播放錄音的功能。：

        也可以看出，我們首先要建立兩個Activity，當然了，布局檔案也是少不了的，如下：

activity_show_picture.xml

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical"     >        <ImageView         android:id="@+id/iv_showPic"        android:layout_width="match_parent"        android:layout_height="match_parent"        android:scaleType="fitCenter"        /></LinearLayout>

ShowPicture.java

public class ShowPicture extends Activity {private ImageView img;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);requestWindowFeature(Window.FEATURE_CUSTOM_TITLE);setContentView(R.layout.activity_show_picture);getWindow().setFeatureInt(Window.FEATURE_CUSTOM_TITLE, R.layout.title_add);//設定標題TextView tv_title = (TextView)findViewById(R.id.tv_title);tv_title.setText("查看圖片");Button bt_back = (Button)findViewById(R.id.bt_back);bt_back.setOnClickListener(new OnClickListener() {@Overridepublic void onClick(View arg0) {ShowPicture.this.finish();}});Button bt_del = (Button)findViewById(R.id.bt_save);bt_del.setBackgroundResource(R.drawable.paint_icon_delete);img = (ImageView)findViewById(R.id.iv_showPic);Intent intent = this.getIntent();String imgPath = intent.getStringExtra("imgPath");Bitmap bm = BitmapFactory.decodeFile(imgPath);img.setImageBitmap(bm);}}

      主要思想就是用ImageView來顯示指定路徑的圖片，該路徑是從前一個Activity中傳入進來的。這裡的監聽事件，只實現了返回的功能，至於，放大縮小圖片，旋轉圖片，下節再實現吧。activity_show_record.xml

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"     android:background="@drawable/bg"    >  <LinearLayout           android:layout_width="match_parent"          android:layout_height="match_parent"          android:orientation="vertical"         android:gravity="center"         android:layout_centerInParent="true"          >            <LinearLayout           android:layout_width="match_parent"          android:layout_height="wrap_content"          android:orientation="horizontal"          android:gravity="center"          android:layout_margin="5dp"          >      <ImageView      android:id="@+id/iv_record_wave_left"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_gravity="center"                android:layout_margin="5dp"        android:background="@anim/record_wave_left"        />        <ImageView         android:id="@+id/iv_microphone"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_gravity="center"        android:src="@drawable/record_microphone_icon"        android:layout_margin="5dp"        />         <ImageView         android:id="@+id/iv_record_wave_right"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_gravity="center"                android:layout_margin="5dp"        android:background="@anim/record_wave_right"        />         </LinearLayout>           <TextView         android:id="@+id/tv_recordTime"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:textColor="#499df7"        android:textSize="20sp"        android:text="00:00:00"        android:gravity="center"        android:layout_margin="5dp"        />    </LinearLayout>   </RelativeLayout>

ShowRecord.java

public class ShowRecord extends Activity {private String audioPath;private int isPlaying = 0;private AnimationDrawable ad_left,ad_right;private Timer mTimer;//語音操作對象private MediaPlayer mPlayer = null;private ImageView iv_record_wave_left,iv_record_wave_right,iv_microphone;private TextView tv_recordTime;@Overrideprotected void onCreate(Bundle savedInstanceState) {// TODO Auto-generated method stubsuper.onCreate(savedInstanceState);requestWindowFeature(Window.FEATURE_CUSTOM_TITLE);setContentView(R.layout.activity_show_record);getWindow().setFeatureInt(Window.FEATURE_CUSTOM_TITLE, R.layout.title_add);//設定標題TextView tv_title = (TextView)findViewById(R.id.tv_title);tv_title.setText("查看錄音");Button bt_back = (Button)findViewById(R.id.bt_back);bt_back.setOnClickListener(new OnClickListener() {@Overridepublic void onClick(View arg0) {if(isPlaying == 1){mPlayer.stop();mPlayer.release();}ShowRecord.this.finish();}});Button bt_del = (Button)findViewById(R.id.bt_save);bt_del.setBackgroundResource(R.drawable.paint_icon_delete);Intent intent = this.getIntent();audioPath = intent.getStringExtra("audioPath");iv_microphone = (ImageView)findViewById(R.id.iv_microphone);iv_microphone.setOnClickListener(new ClickEvent());iv_record_wave_left = (ImageView)findViewById(R.id.iv_record_wave_left);iv_record_wave_right = (ImageView)findViewById(R.id.iv_record_wave_right);ad_left = (AnimationDrawable)iv_record_wave_left.getBackground();//ad_left = (AnimationDrawable)iv_record_wave_left.getDrawable();ad_right = (AnimationDrawable)iv_record_wave_right.getBackground();//ad_right = (AnimationDrawable)iv_record_wave_right.getDrawable();tv_recordTime = (TextView)findViewById(R.id.tv_recordTime);}final Handler handler = new Handler(){public void handleMessage(Message msg) {switch(msg.what){    case 1 :    String time[] = tv_recordTime.getText().toString().split(":");int hour = Integer.parseInt(time[0]);int minute = Integer.parseInt(time[1]);int second = Integer.parseInt(time[2]);if(second < 59){second++;}else if(second == 59 && minute < 59){minute++;second = 0;}if(second == 59 && minute == 59 && hour < 98){hour++;minute = 0;second = 0;}time[0] = hour + "";time[1] = minute + "";time[2] = second + "";//調整格式顯示到螢幕上if(second < 10)time[2] = "0" + second;if(minute < 10)time[1] = "0" + minute;if(hour < 10)time[0] = "0" + hour;//顯示在TextView中tv_recordTime.setText(time[0]+":"+time[1]+":"+time[2]);break;}}};class ClickEvent implements OnClickListener{@Overridepublic void onClick(View arg0) {// TODO Auto-generated method stub//試聽if(isPlaying == 0){isPlaying = 1;mPlayer = new MediaPlayer();tv_recordTime.setText("00:00:00");mTimer = new Timer();mPlayer.setOnCompletionListener(new MediaCompletion());try {mPlayer.setDataSource(audioPath);mPlayer.prepare();mPlayer.start();} catch (IllegalArgumentException e) {// TODO Auto-generated catch blocke.printStackTrace();} catch (SecurityException e) {// TODO Auto-generated catch blocke.printStackTrace();} catch (IllegalStateException e) {// TODO Auto-generated catch blocke.printStackTrace();} catch (IOException e) {// TODO Auto-generated catch blocke.printStackTrace();}mTimer.schedule(new TimerTask() {@Overridepublic void run() {Message message = new Message();message.what = 1;handler.sendMessage(message);}}, 1000,1000);//播放動畫ad_left.start();ad_right.start();}//結束試聽else{isPlaying = 0;mPlayer.stop();mPlayer.release();mPlayer = null;mTimer.cancel();mTimer = null;//停止動畫ad_left.stop();ad_right.stop();}}}class MediaCompletion implements OnCompletionListener{@Overridepublic void onCompletion(MediaPlayer mp) {mTimer.cancel();mTimer = null;isPlaying = 0;//停止動畫ad_left.stop();ad_right.stop();Toast.makeText(ShowRecord.this, "播放完畢", Toast.LENGTH_SHORT).show();tv_recordTime.setText("00:00:00");}}}

      在查看錄音時，用到了對播放時間的顯示處理，以及動畫的播放與停止，稍有點複雜，這些在之前“添加錄音”一節就就講述了。

    

      有了這兩個Activity後，那麼剩下的工作就是在單擊圖片或者錄音的事件中啟動這兩個Activity即可。但這就有一個問題，如何在圖文混排的EditText中的判斷單擊的是圖片，錄音，還是文字呢？？這就需要從EditText中的識別那些是圖片，那些是文字，再進一步對圖片分析到底單擊的是那一個圖片，從而實現查看具體圖片及錄音的功能，具體如下：

1. 記錄EditText中每個圖片的位置及所在源路徑

          為了實現在編輯和瀏覽時可以隨時查看原圖片及錄音檔案，所以在每次添加圖片或錄音後，用一個List記住新增加的每個圖片或錄音的位置及所在路徑，當然了，如果是瀏覽已經存在於資料庫中的記事時，在載入資料的同時，同樣用ListView來記住所有的圖片及錄音的位置和路徑。主要代碼如下：

        //記錄editText中的圖片，用於單擊時判斷單擊的是那一個圖片private List<Map<String,String>> imgList = new ArrayList<Map<String,String>>();

         每次單擊記事清單項目，進入查看記事，在載入資料的同時將所有圖片及錄音的位置及路徑記錄下來，具體為在loadDate()方法中添加以下代碼：

         //用List記錄該錄音的位置及所在路徑，用於單擊事件 Map<String,String> map = new HashMap<String,String>(); map.put("location", m.start()+"-"+m.end()); map.put("path", path); imgList.add(map);

        同理，也要在每次添加圖片錄音後也要加入相應的代碼，在InsertBitmap()函數中添加如下代碼：

        //用List記錄該錄音的位置及所在路徑，用於單擊事件        Map<String,String> map = new HashMap<String,String>();        map.put("location", selectionIndex+"-"+(selectionIndex+spannableString.length()));        map.put("path", imgPath);        imgList.add(map);

2. 給EditText添加單擊事件

private LineEditText et_Notes;... ...et_Notes.setOnClickListener(new TextClickEvent());

3. 判斷單擊的是圖片還是普通文字

          為了判斷單擊的是圖片還是普通文字，用到了Spanned，ImageSpan，主要思想，就是判斷當前單擊的位置是否在圖片的位置範圍內，主要代碼如下：

                        Spanned s = et_Notes.getText();ImageSpan[] imageSpans;imageSpans = s.getSpans(0, s.length(), ImageSpan.class);int selectionStart = et_Notes.getSelectionStart();for(ImageSpan span : imageSpans){int start = s.getSpanStart(span);int end = s.getSpanEnd(span);//找到圖片if(selectionStart >= start && selectionStart < end){                                     ... ...                                 }}

           打到了圖片，接下來就要判斷單擊的到底是那一圖片呢？

4. 決斷單擊的具體是那一張圖片

這就用到了第一步記錄的圖片的位置和路徑了，顯然，就是用位置來判斷到底是單擊的那一個圖片，主要代碼如下:

        //尋找當前單擊的圖片是哪一個圖片//System.out.println(start+"-----------"+end);String path = null;for(int i = 0;i < imgList.size();i++){Map map = imgList.get(i);//找到了if(map.get("location").equals(start+"-"+end)){path = imgList.get(i).get("path");break;}}

  5. 判斷是錄音還是圖片，啟動對應的Activity，並傳遞路徑

            查看圖片，有兩種方法，一種是調用系統的圖庫開啟圖片，另一種就是自訂，這裡，我都實現了，開啟錄音用的是自訂的Activity，如下：

        //接著判斷當前圖片是否是錄音，如果為錄音，則跳轉到試聽錄音的Activity，如果不是，則跳轉到查看圖片的介面//錄音，則跳轉到試聽錄音的Activityif(path.substring(path.length()-3, path.length()).equals("amr")){Intent intent = new Intent(AddActivity.this,ShowRecord.class);intent.putExtra("audioPath", path);startActivity(intent);}//圖片，則跳轉到查看圖片的介面else{//有兩種方法，查看圖片，第一種就是直接調用系統的圖庫查看圖片，第二種是自訂Activity//調用系統圖庫查看圖片/*Intent intent = new Intent(Intent.ACTION_VIEW);File file = new File(path);Uri uri = Uri.fromFile(file);intent.setDataAndType(uri, "image/*");*///使用自訂ActivityIntent intent = new Intent(AddActivity.this,ShowPicture.class);intent.putExtra("imgPath", path);startActivity(intent);}

           以上，3，4，5步其實都是在單擊的監聽器中實現的，完整代碼如下：

        //為EidtText設定監聽器class TextClickEvent implements OnClickListener{@Overridepublic void onClick(View v) {Spanned s = et_Notes.getText();ImageSpan[] imageSpans;imageSpans = s.getSpans(0, s.length(), ImageSpan.class);int selectionStart = et_Notes.getSelectionStart();for(ImageSpan span : imageSpans){int start = s.getSpanStart(span);int end = s.getSpanEnd(span);//找到圖片if(selectionStart >= start && selectionStart < end){//Bitmap bitmap = ((BitmapDrawable)span.getDrawable()).getBitmap();//尋找當前單擊的圖片是哪一個圖片//System.out.println(start+"-----------"+end);String path = null;for(int i = 0;i < imgList.size();i++){Map map = imgList.get(i);//找到了if(map.get("location").equals(start+"-"+end)){path = imgList.get(i).get("path");break;}}//接著判斷當前圖片是否是錄音，如果為錄音，則跳轉到試聽錄音的Activity，如果不是，則跳轉到查看圖片的介面//錄音，則跳轉到試聽錄音的Activityif(path.substring(path.length()-3, path.length()).equals("amr")){Intent intent = new Intent(AddActivity.this,ShowRecord.class);intent.putExtra("audioPath", path);startActivity(intent);}//圖片，則跳轉到查看圖片的介面else{//有兩種方法，查看圖片，第一種就是直接調用系統的圖庫查看圖片，第二種是自訂Activity//調用系統圖庫查看圖片/*Intent intent = new Intent(Intent.ACTION_VIEW);File file = new File(path);Uri uri = Uri.fromFile(file);intent.setDataAndType(uri, "image/*");*///使用自訂ActivityIntent intent = new Intent(AddActivity.this,ShowPicture.class);intent.putExtra("imgPath", path);startActivity(intent);}}else//如果單擊的是空白出或文字，則獲得焦點，即開啟軟鍵盤 imm.showSoftInput(et_Notes, 0);}}}

        

          至此，就實現了查看圖片以及播放錄音的功能。

      

  

android項目 之 記事本（13） ----- 查看圖片及播放錄音