一、實驗題目

實驗一: 中山大學智慧健康服務平臺應用開發
實驗程式碼：傳送門：https://github.com/dick20/Android

二、實現內容

1.基本的UI介面設計

實現一個Android應用，介面呈現如圖中的效果。

要求

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

使用的元件

TextView、EditText、ConstraintLayout、Button、ImageView、RadioGroup、RadioButton。
實現一個Android應用，介面呈現如圖中的效果。

驗收內容

• 各控制元件的位置，間距，字型大小等屬性與要求無誤
• 圖片大小不作為驗收內容給之一

2.基礎的事件處理

要求

• 該介面為應用啟動後看到的第一個介面。
• 各控制元件處理的要求
  1. 點選搜尋按鈕：
     • 如果搜尋內容為空，彈出Toast資訊“搜尋內容不能為空”。
     • 如果搜尋內容為“Health”，根據選中的RadioButton項彈出如下對話方塊。
       
       點選“確定”，彈出Toast資訊——對話方塊“確定”按鈕被點選。
       點選“取消”，彈出Toast 資訊——對話方塊“取消”按鈕被點選。
       否則彈出如下對話方塊，對話方塊點選效果同上。
       
  2. RadioButton選擇項切換：選擇項切換之後，彈出Toast資訊“XX被選中
     ”，例如從圖片切換到視訊，彈出Toast資訊“視訊被選中”

驗收內容

• 佈局是否正常
• 搜尋內容為空時，提示是否正常
• 輸入搜尋內容後，點選搜尋按鈕是否能根據不同的搜尋內容顯示相應的彈出框，以及彈出框內容是否符合要求
• 點選彈出框的相應按鈕是否能提示正確的內容
• RadioButton切換時，提示是否正常

三、實驗結果

(1)實驗截圖

切換按鈕時候，顯示當前切換到的按鈕名字，如下圖，視訊被選中

搜尋Health關鍵詞時，顯示對話方塊搜尋成功

搜尋其他關鍵詞，無法正確搜尋，顯示搜尋錯誤對話方塊

點選取消按鈕時，顯示toast取消被單擊

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

這個實驗前兩部分包括簡單的UI設計以及UI的互動。
首先，我們當然要從UI的構建開始。

1.插入標題以及圖片

這裡應用到了TextView以及ImageView兩個控制元件。由於本次的ui是使用ConstraintLayout佈局，所以必須對每一個控制元件設定左右上下分別對齊什麼。故要利用app:layout_constraintLeft_toLeftOf等屬性，表示該元件的左邊對齊於xx的左邊，這裡的textview就要與parent即整個頁面的左邊對齊，然後設定居中。寬度，大小就根據實驗要求來設定，而id是用於後面的互動部分識別該控制元件用的。

<TextView android:id="@+id/title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/title"
        android:textSize="20sp"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_marginTop="20dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        />
    <ImageView
        android:id="@+id/image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:src="@mipmap/sysu"
        app:layout_constraintBottom_toTopOf="@+id/search_content"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@id/title" />

2.插入搜尋輸入框以及搜尋按鈕

對於輸入框要使用EditText控制元件，對於按鈕要使用Button控制元件。對於輸入框的顯示內容，預先在string檔案中寫入，然後直接在控制元件中呼叫即可。對於button還用到了style屬性，表示直接引用style寫好的按鈕樣式。而style裡面又呼叫了其他檔案中已經預設好的屬性，例如color中顏色。

<style name="search_button">
        <item name="android:textColor">@color/white</item>
        <item name="android:background">@drawable/button</item>
    </style>

<EditText
        android:id="@+id/search_content"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginLeft="20dp"
        android:layout_marginRight="10dp"
        android:layout_marginTop="20dp"
        android:gravity="center"
        android:hint="@string/search_content"
        android:textSize="18sp"
        app:layout_constraintBottom_toTopOf="@+id/radioGroup"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/but1"
        app:layout_constraintTop_toBottomOf="@id/image" />
    <Button
        android:id="@+id/but1"
        style="@style/search_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginRight="20dp"
        android:layout_marginTop="20dp"
        android:text="@string/search_button"
        android:textSize="18sp"
        app:layout_constraintBottom_toTopOf="@+id/radioGroup"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@id/image" />

3. 插入選擇按鈕

選擇按鈕組要使用RadioGroup與RadioButton相配合，在group中設定邊距以及大小，對於每一個radiobutton使用其他設定好的樣式屬性，在第一個選擇按鈕中設定checked屬性設定為true就會預設第一個按鈕被選定。

<RadioGroup
        android:id="@+id/radioGroup"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:orientation="horizontal"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@id/search_content">
        <RadioButton
            android:id="@+id/selection1"
            style="@style/MyRadioButton"
            android:layout_height="match_parent"
            android:checked="true"
            android:text="@string/selection1" />
        <RadioButton
            android:id="@+id/selection2"
            style="@style/MyRadioButton"
            android:text="@string/selection2" />
        <RadioButton
            android:id="@+id/selection3"
            style="@style/MyRadioButton"
            android:text="@string/selection3" />
        <RadioButton
            android:id="@+id/selection4"
            style="@style/MyRadioButton"
            android:text="@string/selection4" />
    </RadioGroup>

這就基本完成了UI的介面設定，接下來要根據他們的id來設定一些函式實現實驗要求，例如彈出對話方塊或者toast等等。

4.獲取搜尋輸入框的內容，以及點選搜尋按鈕顯示提示

這一步主要要呼叫findViewById這個函式來分別得到輸入框以及按鈕，給按鈕設定監聽函式setOnClickListener, 然後在裡面對於輸入框的內容searchContent.getText().toString()來進行判斷，分別有三種情況，搜尋內容為空，搜尋內容為Health，搜尋內容為其他。

然後，關於對話方塊的顯示要使用dialog，分別給它設定標題，中間內容以及按鈕。而toast則要對於對話方塊的按鈕來設定監聽函式，當點選時候來Toast.makeText（）顯示一個具體的toast內容。

		Button button =(Button) findViewById(R.id.but1);
        final EditText searchContent = (EditText) findViewById(R.id.search_content);
        button.setOnClickListener(new View.OnClickListener(){
            @Override
            public void onClick(View view){
                //搜尋為空情況
                if(TextUtils.isEmpty(searchContent.getText().toString())){
                    //彈出 Toast
                    Toast.makeText(MainActivity.this, "搜尋內容不能為空",Toast.LENGTH_SHORT).show();
                }
                //搜尋成功情況
                else if(searchContent.getText().toString().equals("Health")){
                    AlertDialog.Builder dialog = new AlertDialog.Builder(MainActivity.this);
                    dialog.setTitle("提示");
                    RadioButton temp = findViewById(radioGroup.getCheckedRadioButtonId());
                    dialog.setMessage(temp.getText().toString()+"搜尋成功");
                    dialog.setPositiveButton("確定", new DialogInterface.OnClickListener() {
                        @Override
                        public void onClick(DialogInterface dialogInterface, int i) {
                            Toast.makeText(MainActivity.this, "對話方塊“確定”按鈕被點選",Toast.LENGTH_SHORT).show();
                        }
                    });
                    dialog.setNegativeButton("取消", new DialogInterface.OnClickListener() {
                        @Override
                        public void onClick(DialogInterface dialogInterface, int i) {
                            Toast.makeText(MainActivity.this, "對話方塊“取消”按鈕被點選",Toast.LENGTH_SHORT).show();
                        }
                    });
                    dialog.show();
                }
                //搜尋失敗情況
                else{
                    AlertDialog.Builder dialog = new AlertDialog.Builder(MainActivity.this);
                    dialog.setTitle("提示");
                    dialog.setMessage("搜尋失敗");
                    dialog.setPositiveButton("確定", new DialogInterface.OnClickListener() {
                        @Override
                        public void onClick(DialogInterface dialogInterface, int i) {
                            Toast.makeText(MainActivity.this, "對話方塊“確定”按鈕被點選",Toast.LENGTH_SHORT).show();
                        }
                    });
                    dialog.setNegativeButton("取消", new DialogInterface.OnClickListener() {
                        @Override
                        public void onClick(DialogInterface dialogInterface, int i) {
                            Toast.makeText(MainActivity.this, "對話方塊“取消”按鈕被點選",Toast.LENGTH_SHORT).show();
                        }
                    });
                    dialog.show();
                }
            }
        });

4.對於選擇按鈕組的切換

與上面相同，先要通過id來找到相應的控制元件，然後對於radioGroup來設定選擇改變的監聽函式，當切換的時候會根據選擇的不同按鈕上的資訊來生成一個toast。

 		final RadioGroup radioGroup = findViewById(R.id.radioGroup);
        final RadioButton radioButton = findViewById(radioGroup.getCheckedRadioButtonId());
        radioGroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener(){
            @Override
            //選擇變化時，彈出toast提示資訊
            public void onCheckedChanged(RadioGroup group, int checkedID){
                String str = "";
                RadioButton select1 = findViewById(R.id.selection1);
                RadioButton select2 = findViewById(R.id.selection2);
                RadioButton select3 = findViewById(R.id.selection3);
                RadioButton select4 = findViewById(R.id.selection4);
                if(select1.getId() == checkedID){
                    str = select1.getText().toString();
                }
                else if(select2.getId() == checkedID){
                    str = select2.getText().toString();
                }
                else if(select3.getId() == checkedID){
                    str = select3.getText().toString();
                }
                else if(select4.getId() == checkedID){
                    str = select4.getText().toString();
                }
                Toast.makeText(MainActivity.this, str + "被選中",Toast.LENGTH_SHORT).show();
            }
        });

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

a.關於UI部分的邊距問題

起初對於ConstraintLayout佈局不熟悉，不理解為什麼需要對於一個控制元件的左右邊限制跟隨另一個的左右邊，單純認為只需要改變margin即可完成佈局。而實際情況時，根據佈局出來的結果可以看到僅改變margin之後相對於父親來改變距離，而不能完全地設定兩個元件的相應距離。於是完成一個元件時候，對於下一個元件的上下左右邊緣要根據相對應的元件來限制一下。

而在修改UI的時候，多使用preview功能以及在xml下切換至design模式，可以清晰看出元件之間的邊距關係，檢視佈局是否正確。

b.如何讓中間的搜尋框以及搜尋按鈕以合適的大小安放在同一行

這個問題就是在ui部分一直困擾我的，由於搜尋框與左邊要有限制，在右邊又要與搜尋按鈕有限制，而搜尋框也要與右邊有限制。這樣設定app:layout_constraintRight_toRightOf等等需要十分注意。

而且輸入框的長度也要合適，當android:layout_width="wrap_parent"時候僅顯示了提示內容的長度。而android:layout_width="fill_parent"時候又佔滿了整個顯示屏，顯然是不行。而選擇固定長度則不符合我們安卓手機介面設計的原則，無法在各種機型中顯示合理。

經過查詢多種資料，可以通過設定android:layout_width="0dp"來使這個輸入框自適應邊距，因此問題迎刃而解。

c.實現互動部分的api

比較通用的找到控制元件的函式為findViewById，通過id來找到控制元件，這與我們設定的id就很關鍵了，必須要注意大小寫以及名字的正確性。

關於元件的監聽函式，包括點選按鈕，切換radiobutton等等，都要了解其中的引數，檢視手冊。

四、實驗思考及感想

本次是第一次安卓開發的實驗，主要關於UI介面的設計與一些簡單的互動，這與我之前學過的web網頁設計十分相似，定義元件以及通過id來對於每一個元件來設定一些監聽函式，完成所需要的功能。

但是，安卓開發上也有許多不同之處，對於java檔案中必須要了解呼叫元件的監聽函式，名字比較長，而且引數多，必須在平時熟練使用並要經常查閱手冊。

對於ui介面，我這次主要是通過xml的書寫來生成介面，用裡面的一些屬性來定義元件的大小，邊距等等，除此之外，安卓開發中還很講究檔案的分類，將string，color，style設定成另外的檔案，在主的xml可以呼叫這些檔案中的內容來實現，這樣的好處便於修改介面的內容，例如可以根據這個來開發中文英文不同的ui介面版本。