前言

本項目通過闡述基于ESP8266作為處理器（SoC模式開發）接入機智云，借助機智云安卓開源框架設計的APP，實現了燈的控制、門禁的控制、溫濕度的讀取、有毒氣體的檢測、人體紅外檢測等功能。

通過改造機智云開源框架，還實現了一個智能硬件系統支持多種控制方式，如：安卓APP控制、本地按鍵控制、紅外遙控控制、天貓精靈控制，且每一種操作都能和APP同步顯示。

本文是第二篇：UI界面編寫

1.打開GosDeviceControlActivity這個類2.導入UI使用到的圖片3.編寫UI界面詳解4.下載到真題驗證
5.編寫密碼輸入的UI界面

進入正文

編寫機智云安卓開源框架的UI界面，需要修改的是控制模塊的部分

1.打開GosDeviceControlActivity這個類

找到Oncreate()方法：

刪除不必要的東西，如下圖所示：

注意，因為在GosDeviceControlActivity.java中引用了我們刪除的控件，所以在GosDeviceControlActivity也必須把這個引用刪除，否則因為找不到對應的控件導致錯誤。

2.導入UI使用到的圖片

把我們在UI需要適用到的圖片導入drawable，以便引用，文件如下

復制到如下的路徑：

3.編寫UI界面詳解：

因為所有控件一個頁面是顯示不下的，所以此處需要使用一個 ScrollView ,使UI界面可以上下滑動

ScrollView具體使用方法：

https://blog.csdn.net/qq_36243942/article/details/82185051

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical" >

android:layout_width="match_parent"

android:layout_height="match_parent"

android:background="@drawable/background02"

android:fadingEdge="vertical"

android:paddingBottom="10dp"

android:paddingTop="20dp"

android:scrollbars="vertical">

注意此處修改了背景為剛才我們導入的背景圖片，視圖如下：

在最上邊編寫一個復位按鈕，用來復位大燈，以及門禁系統：

也就是如下的界面：

在ScrollView中新建一個根布局為線性布局（LinearLayout）

備注：

1.控件布局相關知識：

https://blog.csdn.net/qq_36243942/article/details/81736744

2.線性布局相關知識：

https://blog.csdn.net/qq_36243942/article/details/81808833

2.為了讓按鈕看起來更美觀，且有按下的效果，我們自己新建一個selector布局，然后引用這個布局文件

步驟：

關于如何自定義按鈕屬性：https://blog.csdn.net/qq_36243942/article/details/82113312

UI界面代碼如下：

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical" >

android:layout_width="match_parent"

android:layout_height="match_parent"

android:background="@drawable/background02"

android:fadingEdge="vertical"

android:paddingBottom="10dp"

android:paddingTop="20dp"

android:scrollbars="vertical">

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical"

android:scrollbars="vertical"

android:weightSum="1">

android:id="@+id/Reset_ButtonId"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_marginLeft="300dp"

android:background="@drawable/btn_beselected"

android:text="復位" />

android:layout_width="match_parent"

android:layout_height="2dp"

android:background="@color/alert_blue">

android:layout_width="match_parent"

android:layout_height="35dp"

android:gravity="center"

android:text="大燈開關面板"

android:textColor="#f86354"

android:textSize="30dp" />

android:layout_width="match_parent"

android:layout_height="2dp"

android:background="@color/alert_blue">

備注：在Button控件的background中引用這個drawable文件

界面如下：

完成大燈控制的UI界面

如下：

這個按鈕使用的控件是CheckBox，當這個CheckBox未被選中時，顯示紅色的圖片，并顯示開關狀態為關，如果CheckBox被選中那么現實綠色的圖片，并顯示狀態為開。

備注：

1.CheckBox的使用方法：https://blog.csdn.net/qq_36243942/article/details/81744237

2.創建一個selector布局，設置選中顯示顯示綠色，未選中選擇紅色

步驟：

代碼如下：

android:state_checked="true">

android:state_checked="false">

詳細代碼代碼如下：

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical" >

android:layout_width="match_parent"

android:layout_height="match_parent"

android:background="@drawable/background02"

android:fadingEdge="vertical"

android:paddingBottom="10dp"

android:paddingTop="20dp"

android:scrollbars="vertical">

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical"

android:scrollbars="vertical"

android:weightSum="1">

android:id="@+id/Reset_ButtonId"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_marginLeft="300dp"

android:background="@drawable/btn_beselected"

android:text="復位" />

android:layout_width="match_parent"

android:layout_height="2dp"

android:background="@color/alert_blue">

android:layout_width="match_parent"

android:layout_height="35dp"

android:gravity="center"

android:text="大燈開關面板"

android:textColor="#f86354"

android:textSize="30dp" />

android:layout_width="match_parent"

android:layout_height="2dp"

android:background="@color/alert_blue">

android:layout_width="match_parent"

android:layout_height="match_parent"

android:layout_marginLeft="100dp"

android:layout_weight="0.10"

android:orientation="vertical">

android:id="@+id/TV_RedID"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:text="大廳燈開關：關"

android:textAllCaps="false"

android:textColor="#33ff99"

android:textSize="20dp" />

android:id="@+id/checkbox01_ID"

android:layout_width="150dp"

android:layout_height="85dp"

android:background="@drawable/selecter02_cb"

android:button="@null" />

android:id="@+id/TV_GreenID"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_marginTop="5dp"

android:text="食廳燈開關：關"

android:textAllCaps="false"

android:textColor="#33ff99"

android:textSize="20dp" />

android:id="@+id/checkbox02_ID"

android:layout_width="150dp"

android:layout_height="85dp"

android:background="@drawable/selecter02_cb"

android:button="@null" />

android:id="@+id/TV_BlueID"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="臥室燈開關：關"

android:textAllCaps="false"

android:textColor="#33ff99"

android:textSize="20dp" />

android:id="@+id/checkbox03_ID"

android:layout_width="150dp"

android:layout_height="85dp"

android:background="@drawable/selecter02_cb"

android:button="@null" />

備注：每個CheckBox的background屬性都需要引用selector02_cb這個文件

整體界面如下：

完成門禁開關面板的UI界面設計

如下：

這兩個按鈕實用的控件上ImageButton

備注：

1.ImageButton的使用：https://blog.csdn.net/qq_36243942/article/details/81783895

在上面的基礎增加一個線性布局，注意此時線性布局的方向應該是水平的。

整體代碼如下：

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical" >

android:layout_width="match_parent"

android:layout_height="match_parent"

android:background="@drawable/background02"

android:fadingEdge="vertical"

android:paddingBottom="10dp"

android:paddingTop="20dp"

android:scrollbars="vertical">

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical"

android:scrollbars="vertical"

android:weightSum="1">

android:id="@+id/Reset_ButtonId"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_marginLeft="300dp"

android:background="@drawable/btn_beselected"

android:text="復位" />

android:layout_width="match_parent"

android:layout_height="2dp"

android:background="@color/alert_blue">

android:layout_width="match_parent"

android:layout_height="35dp"

android:gravity="center"

android:text="大燈開關面板"

android:textColor="#f86354"

android:textSize="30dp" />

android:layout_width="match_parent"

android:layout_height="2dp"

android:background="@color/alert_blue">

android:layout_width="match_parent"

android:layout_height="match_parent"

android:layout_marginLeft="100dp"

android:layout_weight="0.10"

android:orientation="vertical">

android:id="@+id/TV_RedID"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:text="大廳燈開關：關"

android:textAllCaps="false"

android:textColor="#33ff99"

android:textSize="20dp" />

android:id="@+id/checkbox01_ID"

android:layout_width="150dp"

android:layout_height="85dp"

android:background="@drawable/selecter02_cb"

android:button="@null" />

android:id="@+id/TV_GreenID"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_marginTop="5dp"

android:text="食廳燈開關：關"

android:textAllCaps="false"

android:textColor="#33ff99"

android:textSize="20dp" />

android:id="@+id/checkbox02_ID"

android:layout_width="150dp"

android:layout_height="85dp"

android:background="@drawable/selecter02_cb"

android:button="@null" />

android:id="@+id/TV_BlueID"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="臥室燈開關：關"

android:textAllCaps="false"

android:textColor="#33ff99"

android:textSize="20dp" />

android:id="@+id/checkbox03_ID"

android:layout_width="150dp"

android:layout_height="85dp"

android:background="@drawable/selecter02_cb"

android:button="@null" />

android:layout_width="match_parent"

android:layout_height="2dp"

android:background="@color/alert_blue">

android:id="@+id/textView7"

android:layout_width="match_parent"

android:layout_height="35dp"

android:gravity="center"

android:text="門禁開關面板"

android:textColor="#f86354"

android:textSize="30dp" />

android:layout_width="match_parent"

android:layout_height="2dp"

android:background="@color/alert_blue">

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_marginTop="10dp"

android:layout_weight="0.24"

android:orientation="horizontal">

android:id="@+id/IV_ButtonID"

android:layout_width="100dp"

android:layout_height="100dp"

android:layout_marginLeft="40dp"

android:background="@drawable/mybtnopen" />

android:id="@+id/IV_closeButtonID"

android:layout_width="100dp"

android:layout_height="100dp"

android:layout_marginLeft="80dp"

android:background="@drawable/mybtnclose" />

整體界面如下：

接下來就是溫濕度檢測，有毒氣體，以及紅外檢測等一些TextView的設置，就不一一貼出來了，整體代碼如下：

android:orientation="vertical"

android:layout_width="match_parent"

android:layout_height="match_parent">

android:layout_width="match_parent"

android:layout_height="match_parent"

android:background="@drawable/background02"

android:fadingEdge="vertical"

android:paddingBottom="10dp"

android:paddingTop="20dp"

android:scrollbars="vertical">

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical"

android:scrollbars="vertical"

android:weightSum="1">

android:id="@+id/Reset_ButtonId"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_marginLeft="300dp"

android:background="@drawable/btn_beselected"

android:text="復位" />

android:layout_width="match_parent"

android:layout_height="2dp"

android:background="@color/alert_blue">

android:layout_width="match_parent"

android:layout_height="35dp"

android:gravity="center"

android:text="大燈開關面板"

android:textColor="#f86354"

android:textSize="30dp" />

android:layout_width="match_parent"

android:layout_height="2dp"

android:background="@color/alert_blue">

android:layout_width="match_parent"

android:layout_height="match_parent"

android:layout_marginLeft="100dp"

android:layout_weight="0.10"

android:orientation="vertical">

android:id="@+id/TV_RedID"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:text="大廳燈開關：關"

android:textAllCaps="false"

android:textColor="#33ff99"

android:textSize="20dp" />

android:id="@+id/checkbox01_ID"

android:layout_width="150dp"

android:layout_height="85dp"

android:background="@drawable/selecter02_cb"

android:button="@null" />

android:id="@+id/TV_GreenID"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_marginTop="5dp"

android:text="食廳燈開關：關"

android:textAllCaps="false"

android:textColor="#33ff99"

android:textSize="20dp" />

android:id="@+id/checkbox02_ID"

android:layout_width="150dp"

android:layout_height="85dp"

android:background="@drawable/selecter02_cb"

android:button="@null" />

android:id="@+id/TV_BlueID"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="臥室燈開關：關"

android:textAllCaps="false"

android:textColor="#33ff99"

android:textSize="20dp" />

android:id="@+id/checkbox03_ID"

android:layout_width="150dp"

android:layout_height="85dp"

android:background="@drawable/selecter02_cb"

android:button="@null" />

android:layout_width="match_parent"

android:layout_height="2dp"

android:background="@color/alert_blue">

android:id="@+id/textView7"

android:layout_width="match_parent"

android:layout_height="35dp"

android:gravity="center"

android:text="門禁開關面板"

android:textColor="#f86354"

android:textSize="30dp" />

android:layout_width="match_parent"

android:layout_height="2dp"

android:background="@color/alert_blue">

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_marginTop="10dp"

android:layout_weight="0.24"

android:orientation="horizontal">

android:id="@+id/IV_ButtonID"

android:layout_width="100dp"

android:layout_height="100dp"

android:layout_marginLeft="40dp"

android:background="@drawable/mybtnopen" />

android:id="@+id/IV_closeButtonID"

android:layout_width="100dp"

android:layout_height="100dp"

android:layout_marginLeft="80dp"

android:background="@drawable/mybtnclose" />

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_marginLeft="30dp"

android:layout_marginTop="30dp"

android:orientation="horizontal">

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="門禁狀態指示："

android:textColor="#33ff99"

android:textSize="20dp" />

android:id="@+id/TV_indicateID"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="關閉"

android:textColor="#ffff00"

android:textSize="20dp" />

android:layout_width="match_parent"

android:layout_height="2dp"

android:background="@color/alert_blue">

android:id="@+id/textView8"

android:layout_width="match_parent"

android:layout_height="35dp"

android:gravity="center"

android:text="溫濕度檢測"

android:textColor="#f86354"

android:textSize="30dp" />

android:layout_width="match_parent"

android:layout_height="2dp"

android:background="@color/alert_blue">

android:layout_width="match_parent"

android:layout_height="match_parent"

android:layout_marginBottom="1dp"

android:layout_marginTop="20dp"

android:orientation="horizontal"

android:padding="50dp">

android:id="@+id/textView4"

android:layout_width="wrap_content"

android:layout_height="match_parent"

android:text="大氣溫度"

android:textColor="#33ff99"

android:textSize="20dp" />

android:id="@+id/tv_data_temp"

android:layout_width="110dp"

android:layout_height="match_parent"

android:layout_marginLeft="30dp"

android:textColor="@color/green"

android:textSize="30dp" />

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_marginBottom="1dp"

android:layout_weight="0.03"

android:orientation="horizontal"

android:padding="50dp">

android:id="@+id/textView"

android:layout_width="wrap_content"

android:layout_height="match_parent"

android:layout_centerVertical="true"

android:text="相對濕度"

android:textColor="#33ff99"

android:textSize="20dp" />

android:id="@+id/tv_data_hum"

android:layout_width="110dp"

android:layout_height="match_parent"

android:layout_alignParentRight="true"

android:layout_centerVertical="true"

android:layout_marginLeft="30dp"

android:gravity="end"

android:textColor="@color/green"

android:textSize="30dp" />

android:layout_width="match_parent"

android:layout_height="2dp"

android:background="@color/alert_blue">

android:id="@+id/textView6"

android:layout_width="match_parent"

android:layout_height="35dp"

android:gravity="center"

android:text="有毒氣體檢測"

android:textColor="#f86354"

android:textSize="30dp" />

android:layout_width="match_parent"

android:layout_height="2dp"

android:background="@color/alert_blue">

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_marginBottom="1dp"

android:layout_weight="0.03"

android:padding="50dp">

android:layout_width="wrap_content"

android:layout_height="match_parent"

android:layout_centerVertical="true"

android:text="氣體監測"

android:textColor="#33ff99"

android:textSize="20dp" />

android:id="@+id/tv_gsa_detection"

android:layout_width="110dp"

android:layout_height="match_parent"

android:layout_alignParentRight="true"

android:layout_centerVertical="true"

android:gravity="end"

android:textColor="#FF0000"

android:textSize="30dp" />

android:layout_width="match_parent"

android:layout_height="2dp"

android:background="@color/alert_blue">

android:layout_width="match_parent"

android:layout_height="35dp"

android:gravity="center"

android:text="紅外感應檢測"

android:textColor="#f86354"

android:textSize="30dp" />

android:layout_width="match_parent"

android:layout_height="2dp"

android:background="@color/alert_blue">

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_marginBottom="1dp"

android:layout_weight="0.03"

android:padding="50dp">

android:id="@+id/textView5"

android:layout_width="wrap_content"

android:layout_height="match_parent"

android:layout_centerVertical="true"

android:text="人體檢測"

android:textColor="#33ff99"

android:textSize="20dp" />

android:id="@+id/tv_body_move"

android:layout_width="wrap_content"

android:layout_height="match_parent"

android:layout_alignParentRight="true"

android:layout_centerVertical="true"

android:gravity="end"

android:textColor="#FF0000"

android:textSize="30dp" />

android:layout_width="wrap_content"

android:layout_height="match_parent"

android:orientation="horizontal">

android:id="@+id/Reset_DetnumId"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_marginLeft="30dp"

android:background="@drawable/btn_beselected"

android:text="復位檢測" />

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="    檢測次數統計:"

android:textColor="#ca8687"

android:textSize="20dp" />

android:id="@+id/TV_Det_timesID"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text=" 0次"

android:textColor="#1d953f"

android:textSize="20dp" />

android:layout_width="match_parent"

android:layout_height="2dp"

android:background="@color/alert_blue">

整體UI界面效果如下：

4.下載到真題驗證

修改完了UI界面之后，就可以下載到真題上體驗一下：

步驟：

4.1.進入機智云官網，打開你的項目，打開虛擬設備

4.2.點擊二維碼

4.3.使用APP掃描

4.4.掃描后進入

4.5.接下來就可以看到我們寫的UI界面啦

5.編寫密碼輸入的UI界面

到了這一步好像UI設計已經全部完成了，但是上面還有一個門禁的Activity哦，就是當你按門禁開關面板的紅色綠色按鈕時，

進入密碼輸入界面，輸入正確的密碼則打開門禁，否則不打開。

在這里使用Intent進行Activity的跳轉

備注:

5.1.何為Intent//blog.csdn.net/qq_36243942/article/details/81938476

步驟：

5.1.1.在ControlModule新建一個空的Activity

5.1.2.填寫Activity的名稱和所對應layout的名稱，Androidstuio會自動

5.1.3.編寫ActivityLock.xml文件

代碼如下：

android:layout_width="match_parent"

android:layout_height="match_parent"

android:background="#D1EEEE"

android:orientation="vertical">

android:layout_width="368dp"

android:layout_height="wrap_content"

android:orientation="vertical"

android:gravity="center">

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:text="請輸入門禁密碼"

android:textSize="25dp"

android:gravity="center"

android:layout_marginTop="30dp"/>

android:id="@+id/ED_Passward_ID"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:hint="請輸入密碼" />

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:orientation="horizontal">

android:id="@+id/BT_sure_ID"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="確定"

android:layout_marginLeft="200dp"/>

android:id="@+id/BT_cancle_ID"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="取消"/>

android:id="@+id/TV_reciveID"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:text=""

android:textSize="25dp"

android:gravity="center"

android:layout_marginTop="30dp"/>

界面如下：

到這里所有的UI界面已經設計完成了，接下來就是需要寫控制代碼了。

（控制代碼實現參考本系列文章第一篇）

————————————————

版權聲明：本文為CSDN博主「冷暖自知_源」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處鏈接及本聲明。

原文鏈接：https://blog.csdn.net/qq_36243942/article/details/88577979