一、實驗題目

個人專案1-智慧健康服務平臺應用開發

• 基本的UI介面設計
• 基礎的事件處理

二、實現內容

基本的UI介面設計

• 設計一個如要求所示的UI介面
• 各控制元件的要求
  1. 標題字型大小20sp，與頂部距離20dp，居中；
  2. 圖片與上下控制元件的間距均為20dp，居中；
  3. 輸入框整體距左右螢幕各間距20dp，內容（包括提示內容）如圖所示，內容字型大小18sp；
  4. 按鈕與輸入框間距10dp，文字大小18sp。按鈕背景框左右邊框與文字間距10dp，上下邊框與文字間距5dp，圓角半徑180dp，背景色為**#3F51B5**；
  5. 四個單選按鈕整體居中，與輸入框間距10dp，字型大小18sp，各個單選按鈕之間間距10dp
     ，預設選中的按鈕為第一個。

基礎的事件處理

• 在上週完成的基礎上進行基礎的事件處理
• 各控制元件處理的要求
  1. 點選搜尋按鈕：
     • 如果搜尋內容為空，彈出Toast資訊“搜尋內容不能為空”。
     • 如果搜尋內容為“Health”，根據選中的RadioButton項彈出如下對話方塊。
     • 點選“確定”，彈出Toast資訊——對話方塊“確定”按鈕被點選。 點選“取消”，彈出Toast 資訊——對話方塊“取消”按鈕被點選。 否則彈出如下對話方塊，對話方塊點選效果同上。
     • RadioButton選擇項切換：選擇項切換之後，彈出Toast資訊“XX被選中”，例如從圖片切換到視訊，彈出Toast資訊“視訊被選中”。

三、實驗結果

基本的UI介面設計

(1)實驗截圖

如圖所示，UI介面佈局如圖。

(2)實驗步驟以及關鍵程式碼

按照manual中的指導教程，首先對各個基本部件有了一定的瞭解。接著就是各個部件的通用屬性，在約束佈局中如何使用每個屬性恰當的安排位置。雖然每個部件並不相同，但基本屬性大致相似。

• 例如，約束佈局中經常用到的layout_constraint[元件本身的位置]_to[目標位置]Of="[目標id]"即是安排部件位置的有效工具。藉此我們可以通過依賴父容器、其他元件以及基準線來調整部件的位置。

  水平居中：與父容器左右兩邊分別對齊；垂直居中同理，上下對齊即可。

  <TextView
   
  
      android:id="@+id/Title"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_margin="20dp"
      android:text="中山大學智慧健康服務平臺"
      android:textSize="20sp"
      android:textColor="#000000"
      app:layout_constraintTop_toTopOf="parent"
      app:layout_constraintLeft_toLeftOf="parent"
      app:layout_constraintRight_toRightOf="parent"/>
  

• 部件的長度和寬度。一般來說，長寬可以設定為數值；但由於手機型號不同、難以調節等諸多弊端，一般將其設定為match_parent或wrap_content。從字面上理解，match即是匹配，使部件的長寬匹配父容器（螢幕）的長度或寬度。而wrap_content中的wrap則是“包裹”的意思，可以理解為使部件恰好包裹住部件內的子部件。

• layout_margin和padding是用來指定邊距的變數，不同的是前者用於指定外邊距，即該部件與其他部件的距離；後者指定內邊距，即該部件內部的子部件之間的邊距。

• 插入圖片時，圖片資源一般放在res資料夾裡。res資料夾裡一般有drawable和mipmap兩種資料夾，兩種並沒有大的差別，官方文件的解釋是drawable用來放置圖片，而mipmap下放置icon等圖示，這也是為什麼mipmap資料夾按照不同畫素分為不同資料夾的原因。需要使用時，將圖片放置在對應畫素的資料夾下即可引用。

• 自定義背景邊框可以幫助我們將按鈕變為圓角矩形。通過修改corner、padding等屬性來更改背景及其顏色。

  <corners android:radius="180dp"></corners>
  <solid android:color="#3F51B5"/>
  <padding
      android:bottom="5dp"
      android:top="5dp"
      android:left="10dp"
      android:right="10dp"
      />
  

(3)實驗遇到的困難以及解決思路

1. 關於“輸入框整體距左右螢幕各間距20dp”，我一開始並不知道怎麼使按鈕和輸入框都與邊框隔相同距離，之後將按鈕和輸入框合成了一個部件，設定部件的外邊距為20dp；之後將輸入框的左邊與父容器的左邊對齊，右邊與按鈕左邊對齊，寬度設定為0dp。

   <EditText
       android:id="@+id/Input1"
       android:layout_margin="10dp"
       android:layout_width="0dp"
       android:layout_height="wrap_content"
       android:gravity="center"
       android:hint="請輸入搜尋內容"
       android:textSize="18sp"
       app:layout_constraintRight_toLeftOf="@id/Button1"
       app:layout_constraintLeft_toLeftOf="parent" />
   

2. 插入圖片時，res資料夾下有drawable和mipmap兩個路徑，且mipmap資料夾分了好幾種類型；百度發現了兩種資料夾的些許區別，最終將圖片放在了drawable資料夾下。

基礎的事件處理

（1）實驗截圖

各個功能的實現如圖所示。

（2）實驗步驟以及關鍵程式碼

• 將所有事件整合成兩個函式：radioClick()和buttonClick()。

  • radioClick()下實現radioButton不同選項切換時，彈出toast資訊；
  • buttonClick()實現點選按鈕時進行的查詢部分。包括引入輸入框和radioButton：
    • 當輸入為空時彈出toast資訊
    • 當輸入不為空，且不為Health時彈出搜尋失敗
    • 當輸入為Health，彈出radioButton的id搜尋成功

• 對話方塊的實現：建立一個AlertDialog.builder物件，設定後用create方法建立dialog物件，使用dialog.show()彈出對話方塊。以圖片搜尋成功對話方塊為例：

  final EditText searchContent = (EditText) findViewById(R.id.Input1);
  AlertDialog.Builder AlertPictureSuccess = new AlertDialog.Builder(this);
  AlertPictureSuccess.setTitle("提示");
  AlertPictureSuccess.setMessage("圖片搜尋成功");
  AlertPictureSuccess.setPositiveButton("確認", new DialogInterface.OnClickListener() {
      @Override
      public void onClick(DialogInterface dialog, int which) {
          Toast.makeText(getApplication(),"對話方塊確定按鈕被點選",Toast.LENGTH_SHORT).show();
          dialog.dismiss();
      }
  });
  AlertPictureSuccess.setNegativeButton("取消", new DialogInterface.OnClickListener() {
      @Override
      public void onClick(DialogInterface dialog, int which) {
          Toast.makeText(getApplication(),"對話方塊取消按鈕被點選",Toast.LENGTH_SHORT).show();
          dialog.dismiss();
      }
  });
  final AlertDialog dialogPicture = AlertPictureSuccess.create();
  

• 單擊的處理：設定監聽，使用onClick方法：

  button.setOnClickListener(new View.OnClickListener() {
      public void onClick(View view) {
          if(TextUtils.isEmpty(searchContent.getText().toString())) {
              Toast.makeText(MainActivity.this,"搜尋內容不能為空",Toast.LENGTH_SHORT).show();
          }
  

（3）實驗遇到的困難以及解決思路

1.一開始上手遇到的問題是不知道import的包名，使用的很多方法最後還是靠百度找到了匯入的包。對於java程式碼還不夠熟悉，可能是由於第一次進行安卓相關的開發，對一些基礎的部分掌握的都不是很好，希望有了這次的經驗，下次可以逐步熟悉起來。

2.最初引用初始化button等部件、進行單擊處理等等直接寫在了mainActivity裡，導致之後需要使用時setOnclickListner識別不出，button等也識別不出。後來意識到需要將其寫進另外一個函式裡，再將函式放進onCreate()裡執行。

3.實現對話方塊時不是很理解AlertDialog.builder和dialog物件的關係，對話方塊的實現部分完成的比較困難。應該是先建立builder，用方法設定好後再用其create()方法建立dialog物件，再用dialog.show()方法顯示對話方塊。

五、實驗思考及感想

這次實現是手機實驗的第一次上手操作，對使用android studio進行手機應用開發有了一定的瞭解；主要完成了UI的簡單佈局以及簡單的事件處理，使用了幾個基本部件，學習了佈局時的一些基本屬性和技巧，也學會了按鈕、單選框等點選事件的監聽，熟悉了基本的事件處理。自己對java程式碼不夠熟悉，導致完成作業過程比較生疏，很難得心應手，因此對很多地方還需要慢慢熟悉。

希望有了這次的經驗，下次實驗能夠對程式碼部分更加熟練，有所進步。功能實現時，要多深入瞭解相對應的方法及其含義，並動手操作執行，積累基礎的實現方法，學會除錯、學會看日誌的報錯解決問題，並在出現問題後尋找應對方案，不斷完善程式碼。