前言

為了使自己的app更加的有個人風格，故在網上尋找了很多的參考資料，這里是對自己設計的總結，具體機智云APP生成流程請參考我上一篇博客：基于stm32的連接機智云教程。

1、下載機智云開源APP

進行以下操作之前請確保已經在機智云中創建了一個產品，下面點擊添加應用，選擇Android生成一個app應用

然后按照提示，將密匙填入到相應位置，具體參考我上一篇博客，點擊下載，將app工程下載到本地

2、Andriod方面處理

2.1 、AS軟件安裝與源碼修改

Android studio軟件安裝與源碼修改

將下載好了的文件解壓出來，然后將第二個文件夾復制出來，粘貼到存放Android studio文件例程文件夾中，若還沒有安裝Android studio的請參考這位大佬的詳細例程，這邊建議下載的Android studio版本不要太新，不然工程可能編譯不成功。

然后自己新建一個Android工程作為參考，方便修改源碼，

第一處參考新建例程修改機智云APP

將此處修改為對應的新建工程的內容

第二處按照此路徑參考新建工程修改，這里是我自己的按照自己的新建工程修改完畢的代碼

需注意這里的compile 均替換為implementation，testcompile均替換為testimplementation。

然后可以從Android studio里面打開修改好的機智云開源app，等待一段時間打開后，

2.2、修改APP圖標和名稱

首先在網上下載相關素材備用，若大小不一，請自行修改圖片或者圖標的大小。這時將我們下載好的圖標或者圖片放置到桌面，然后分別復制一下，依次粘貼到drawable-xhdpi目錄下（注意鼠標放在drawable-xhdpi上右擊選Paste便出現如下界面）

點擊確定，將此名稱復制到按照如下圖這個文件，紅框內既是我們可以替換的app圖標，將你的圖標名稱填上就ok，

2.3、修改啟動頁面和內部UI

現在修改啟動界面，這里的圖片在前面我們已經復制到了相關目錄下，現在可以按照下圖將紅框出修改成為你的圖片名稱，見下圖

然后在172行和174行兩處替換為你的設備離線圖標

同樣是這個目錄下，在117行和119行相應位置替換為自己的設備在線圖標

2.4、修改設備監控界面

這是我已經修改好的界面UI，最后效果圖如下（這里的圖標可自行修改為自己的圖標，若是僅僅復制代碼會報錯）

代碼如下所示，可根據需要自行修改（僅供參考，最好要讀懂代碼）

《？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”》

《include layout=“@layout/header_toolbar” /》

《ScrollViewandroid:layout_width=“match_parent”android:layout_height=“match_parent”android:background=“@color/background_color”android:fadingEdge=“vertical”android:paddingBottom=“10dp”android:paddingTop=“20dp”android:scrollbars=“vertical” 》

《LinearLayoutandroid:layout_width=“match_parent”android:layout_height=“wrap_content”android:orientation=“vertical”android:scrollbars=“vertical” 》《LinearLayoutandroid:layout_width=“match_parent”android:layout_height=“wrap_content”android:orientation=“horizontal”android:scrollbars=“horizontal” 》

《！-- 燈（布爾可寫） --》《RelativeLayoutandroid:layout_width=“0dp”android:layout_height=“match_parent”android:layout_marginBottom=“1dp”android:layout_weight=“3”android:alpha=“1”android:background=“@color/white”android:gravity=“center_horizontal”android:padding=“10dp”》

《ImageViewandroid:id=“@+id/LED”android:layout_width=“wrap_content”android:layout_height=“wrap_content”android:layout_alignParentTop=“true”android:layout_centerHorizontal=“true”android:src=“@drawable/led” /》

《TextViewandroid:id=“@+id/Led_text”android:layout_width=“wrap_content”android:layout_height=“wrap_content”android:layout_below=“@+id/LED”android:layout_centerHorizontal=“true”android:layout_centerVertical=“true”android:text=“燈” /》

《Switchandroid:id=“@+id/sw_bool_LED”android:layout_width=“wrap_content”android:layout_height=“wrap_content”android:layout_below=“@id/Led_text”android:layout_alignParentBottom=“true”android:layout_centerHorizontal=“true”android:textOff=“關閉”android:textOn=“開啟” /》《/RelativeLayout》

《！-- 蜂鳴器（布爾可寫） --》《RelativeLayoutandroid:layout_width=“0dp”android:layout_weight=“3”android:layout_height=“wrap_content”android:layout_marginBottom=“1dp”android:background=“@color/white”android:padding=“10dp” 》

《ImageViewandroid:id=“@+id/BEEP”android:layout_width=“wrap_content”android:layout_height=“wrap_content”android:layout_alignParentTop=“true”android:layout_centerHorizontal=“true”android:src=“@drawable/beep” /》

《TextViewandroid:id=“@+id/BEEP_text”android:layout_width=“wrap_content”android:layout_height=“match_parent”android:layout_centerVertical=“true”android:layout_centerHorizontal=“true”android:layout_below=“@+id/BEEP”android:text=“蜂鳴器” /》

《Switchandroid:id=“@+id/sw_bool_BEEP”android:layout_width=“wrap_content”android:layout_height=“match_parent”android:layout_below=“@+id/BEEP_text”android:layout_centerHorizontal=“true”android:layout_centerVertical=“true”android:textOff=“關閉”android:textOn=“開啟” /》《/RelativeLayout》

《！-- 開關（布爾可寫） --》《RelativeLayoutandroid:layout_width=“0dp”android:layout_weight=“3”android:layout_height=“wrap_content”android:layout_marginBottom=“1dp”android:background=“@color/white”android:padding=“10dp” 》

《ImageViewandroid:id=“@+id/LED1”android:layout_width=“wrap_content”android:layout_height=“wrap_content”android:layout_alignParentTop=“true”android:layout_centerHorizontal=“true”android:src=“@drawable/kaiguan” /》《TextViewandroid:id=“@+id/LED1_text”android:layout_width=“wrap_content”android:layout_height=“match_parent”android:layout_below=“@+id/LED1”android:layout_centerHorizontal=“true”android:layout_centerVertical=“true”android:text=“開關” /》《Switchandroid:id=“@+id/sw_bool_LED1”android:layout_width=“wrap_content”android:layout_height=“match_parent”android:layout_below=“@+id/LED1_text”android:layout_centerHorizontal=“true”android:layout_centerVertical=“true”android:textOff=“關閉”android:textOn=“開啟” /》《/RelativeLayout》《/LinearLayout》

《LinearLayoutandroid:layout_width=“match_parent”android:layout_height=“101dp”android:orientation=“horizontal”android:scrollbars=“horizontal”》《！-- 溫度（數值只讀） --》《RelativeLayoutandroid:layout_width=“0dp”android:layout_weight=“3”android:layout_height=“wrap_content”android:background=“@color/white”android:padding=“10dp” 》

《ImageViewandroid:id=“@+id/Temp”android:layout_width=“wrap_content”android:layout_height=“wrap_content”android:layout_alignParentTop=“true”android:layout_centerHorizontal=“true”android:src=“@drawable/wd” /》《TextViewandroid:id=“@+id/tv_data_Temp”android:layout_width=“wrap_content”android:layout_height=“wrap_content”android:layout_below=“@+id/Temp”android:layout_centerHorizontal=“true”android:layout_centerVertical=“true” /》《TextViewandroid:layout_marginLeft=“5dp”android:id=“@+id/Temp_text”android:layout_below=“@+id/Temp”android:layout_toRightOf=“@id/tv_data_Temp”android:layout_width=“wrap_content”android:layout_height=“wrap_content”android:text=“℃” /》《TextViewandroid:id=“@+id/Temp_text1”android:layout_toLeftOf=“@id/Temp”android:layout_width=“wrap_content”android:layout_height=“match_parent”android:text=“溫度” /》

《/RelativeLayout》

《！-- 濕度（數值只讀） --》《RelativeLayoutandroid:layout_width=“0dp”android:layout_height=“wrap_content”android:layout_marginBottom=“1dp”android:layout_weight=“3”android:background=“@color/white”android:padding=“10dp”》《ImageViewandroid:id=“@+id/Shidu”android:layout_width=“wrap_content”android:layout_height=“wrap_content”android:layout_alignParentTop=“true”android:layout_centerHorizontal=“true”android:src=“@drawable/sd” /》《TextViewandroid:layout_marginLeft=“5dp”android:id=“@+id/Shidu_text”android:layout_below=“@+id/Shidu”android:layout_toRightOf=“@id/tv_data_Shidu”android:layout_width=“wrap_content”android:layout_height=“wrap_content”android:text=“%” /》《TextViewandroid:id=“@+id/tv_data_Shidu”android:layout_width=“wrap_content”android:layout_height=“wrap_content”android:layout_below=“@+id/Shidu”android:layout_centerHorizontal=“true”android:layout_centerVertical=“true” /》《TextViewandroid:id=“@+id/Shidu_text1”android:layout_toLeftOf=“@id/Shidu”android:layout_width=“wrap_content”android:layout_height=“match_parent”android:text=“濕度” /》《/RelativeLayout》

《！-- 光照強度（數值只讀） --》《RelativeLayoutandroid:layout_width=“0dp”android:layout_height=“wrap_content”android:layout_marginBottom=“1dp”android:layout_weight=“3”android:background=“@color/white”android:padding=“10dp”》

《ImageViewandroid:id=“@+id/GQ”android:layout_width=“wrap_content”android:layout_height=“wrap_content”android:layout_alignParentTop=“true”android:layout_centerHorizontal=“true”android:src=“@drawable/sun” /》

《TextViewandroid:id=“@+id/GQ_text”android:layout_marginLeft=“5dp”android:layout_below=“@+id/GQ”android:layout_toRightOf=“@id/tv_data_GQ”android:layout_width=“wrap_content”android:layout_height=“match_parent”android:text=“lx” /》《TextViewandroid:id=“@+id/tv_data_GQ”android:layout_width=“wrap_content”android:layout_height=“wrap_content”android:layout_below=“@+id/GQ”android:layout_centerHorizontal=“true”android:layout_centerVertical=“true” /》《TextView

android:id=“@+id/GQ_text1”android:layout_toLeftOf=“@id/GQ”android:layout_width=“wrap_content”android:layout_height=“match_parent”android:text=“光強” /》《/RelativeLayout》《/LinearLayout》《！-- 溫度閾值范圍（數值可寫） --》《RelativeLayoutandroid:layout_width=“match_parent”android:layout_height=“wrap_content”android:layout_marginBottom=“1dp”android:background=“@color/white”android:padding=“10dp” 》

《TextViewandroid:layout_width=“wrap_content”android:layout_height=“match_parent”android:text=“溫度閾值范圍（℃）” /》

《TextViewandroid:id=“@+id/tv_data_Temp_AlarmScope”android:layout_width=“110dp”android:layout_height=“wrap_content”android:layout_alignParentRight=“true”android:textSize=“16sp”android:gravity=“end” /》

《LinearLayoutandroid:layout_width=“match_parent”android:layout_height=“wrap_content”android:layout_below=“@+id/tv_data_Temp_AlarmScope”android:layout_marginTop=“10dp”android:gravity=“center_vertical”android:orientation=“horizontal” 》

《TextViewandroid:layout_width=“wrap_content”android:layout_height=“wrap_content”android:textSize=“16sp”android:text=“0” /》

《SeekBar

android:id=“@+id/sb_data_Temp_AlarmScope”android:thumb=“@drawable/bar1”android:thumbOffset=“0dp”android:layout_width=“0dp”android:layout_height=“wrap_content”android:layout_weight=“3”android:max=“50” /》

《TextViewandroid:layout_width=“wrap_content”android:layout_height=“wrap_content”android:textSize=“16sp”android:text=“50” /》《/LinearLayout》

《/RelativeLayout》

《！-- 濕度閾值范圍（數值可寫） --》《RelativeLayoutandroid:layout_width=“match_parent”android:layout_height=“wrap_content”android:layout_marginBottom=“1dp”android:background=“@color/white”android:padding=“10dp” 》

《TextViewandroid:layout_width=“wrap_content”android:layout_height=“match_parent”android:text=“濕度閾值范圍（％）” /》

《TextViewandroid:id=“@+id/tv_data_Shidu_AlarmScope”android:layout_width=“110dp”android:layout_height=“wrap_content”android:layout_alignParentRight=“true”android:textSize=“16sp”android:gravity=“end” /》

《LinearLayoutandroid:layout_width=“match_parent”android:layout_height=“wrap_content”android:layout_below=“@+id/tv_data_Shidu_AlarmScope”android:layout_marginTop=“10dp”android:gravity=“center_vertical”android:orientation=“horizontal” 》

《TextViewandroid:layout_width=“wrap_content”android:layout_height=“wrap_content”android:textSize=“16sp”android:text=“20” /》

《SeekBarandroid:id=“@+id/sb_data_Shidu_AlarmScope”android:thumb=“@drawable/bar”android:thumbOffset=“0dp”android:layout_width=“0dp”android:layout_height=“wrap_content”android:layout_weight=“3”android:max=“75”

android:progress=“0”/》

《TextViewandroid:layout_width=“wrap_content”android:layout_height=“wrap_content”android:textSize=“16sp”android:text=“95” /》《/LinearLayout》

《/RelativeLayout》

《！-- 光強閾值范圍（數值可寫） --》《RelativeLayoutandroid:layout_width=“match_parent”android:layout_height=“wrap_content”android:layout_marginBottom=“1dp”android:background=“@color/white”android:padding=“10dp” 》

《TextViewandroid:layout_width=“wrap_content”android:layout_height=“match_parent”android:text=“光強閾值范圍（lx）” /》

《TextViewandroid:id=“@+id/tv_data_GQ_AlarmScope”android:layout_width=“110dp”android:layout_height=“wrap_content”android:layout_alignParentRight=“true”android:textSize=“16sp”android:gravity=“end” /》

《LinearLayoutandroid:layout_width=“match_parent”android:layout_height=“wrap_content”android:layout_below=“@+id/tv_data_GQ_AlarmScope”android:layout_marginTop=“10dp”android:gravity=“center_vertical”android:orientation=“horizontal” 》

《TextViewandroid:layout_width=“wrap_content”android:layout_height=“wrap_content”android:textSize=“16sp”android:text=“0” /》

《SeekBar

android:id=“@+id/sb_data_GQ_AlarmScope”android:thumb=“@drawable/bar2”android:thumbOffset=“0dp”android:layout_width=“0dp”android:layout_height=“wrap_content”android:layout_weight=“3”android:max=“65535” /》

《TextViewandroid:layout_width=“wrap_content”android:layout_height=“wrap_content”android:textSize=“16sp”android:text=“65535” /》《/LinearLayout》

《/RelativeLayout》

《/LinearLayout》

《/ScrollView》《/LinearLayout》

2.5、安裝軟件

因為我們的程序編譯無錯誤，故開始安裝app，用數據線將電腦和手機連接，進入手機的開發者模式，打開開發者模式，允許進行USB調試

然后在android studio端點擊運行，app便安裝成功了

感謝大家觀看，有問題記得留言喲。

原文轉載于：https://blog.csdn.net/Zgc6666/article/details/104187111

編輯：jq