中山大學智慧型健康服務平台基本的UI介面設計

第四周任務基本的ui介面設計

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

使用的元件

textview、edittext、constraintlayout、button、imageview、radiogroup、radiobutton。

實驗結果截圖如下：

布局藍圖如下：

我在實驗過程中把整個ui介面分為四個層次，從上到下依次為標題，，搜尋和四個按鈕。按照這個順序根據實驗要求由上至下設計ui介面。

標題

標題要居中且和頂端距離是20dp，通過layout_margin和layout_constraint定義，text中的title是string型別，我定義在string.xml裡面，即中山大學智慧型健康服務平台。

注意在加寫**之前要先把新增到mipmap中，否則就會找不到。

**和標題類似，設計好間距和位置即可。

搜尋上面的edittext

和button用乙個linearlayout包起來，這樣兩部分就是乙個整體了。注意在linearlayout中要註明布局方式是horizontal，即水平布局。先確定整個塊的位置，然後再定義內部元素的相對位置。另外，上面的message，search等都在xml檔案中定義。

按鈕

四個radiobutton寫在乙個radiogroup裡面，上面是button的**。這一部分注意horizontal布局以及button之間的位置關係。

開始設計搜尋框和和搜尋按鈕時是分開寫的，沒有寫在linearlayout裡面，這樣的後果就是兩個部分總是錯位。如果刻意去設計距離間隔而不是用wrap_content，那麼在不同的手機版本裡就會有差別。最後使用線性布局解決了問題，這樣設計布局有層次且不會出現錯位的現象。

還有搜尋按鈕的大小問題也花了一點時間。如果我把長寬設為wrap_content，那麼按鈕的寬度明顯小於圖例的寬度。最後只有加上android:layout_weight="0.1"來強行要求寬度所佔的比例，這樣寫也可以保證其他的距離符合題目要求。

第一次寫android studio的專案作業，有很多的android的操作還明顯不熟悉，因此花費了很多時間查詢相關的函式和關鍵字。不過還好以前學過web課程，故很多內容都可以模擬，而且第一次作業難度不大，從這些角度來說，這次的實驗完成的還比較順利。

實驗過程會遇到很多的玄學問題，也有發現android很多的設計讓人很不爽。例如在text中直接寫想輸入的內容，它就會出現警告，提示我們要在xml檔案中另外定義然後再引用。我覺得這樣的設計就是***，開始我還按照要求來，後面就直接無視它的提示了。

總的來說這次實驗過程感覺良好，希望可以對這門課程產生興趣並學好這門課程。