搜索歷史

清空
搜索熱詞
      0
      • 聊天消息
      • 系統(tǒng)消息
      • 評(píng)論與回復(fù)
      VIP于 到期 續(xù)費(fèi)
      登錄后你可以
      • 下載海量資料
      • 學(xué)習(xí)在線課程
      • 觀看技術(shù)視頻
      • 寫文章/發(fā)帖/加入社區(qū)
      會(huì)員中心
      电子发烧友
      开通电子发烧友VIP会员 尊享10大特权
      海量资料免费下载
      精品直播免费看
      优质内容免费畅学
      课程9折专享价
      低至0.4元/天，开通VIP
      創(chuàng)作中心
      發(fā)布
      創(chuàng)作活動(dòng)

      完善資料讓更多小伙伴認(rèn)識(shí)你，還能領(lǐng)取20積分哦，立即完善>

      3天內(nèi)不再提示

      編寫機(jī)智云安卓開源框架的UI界面

      9GxC_IoTMaker ? 來源：CSDN技術(shù)社區(qū) ? 作者：冷暖自知_源 ? 2022-05-11 09:07 ? 次閱讀

      前言

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

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

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

      1.打開GosDeviceControlActivity這個(gè)類2.導(dǎo)入U(xiǎn)I使用到的圖片3.編寫UI界面詳解4.下載到真題驗(yàn)證5.編寫密碼輸入的UI界面

      進(jìn)入正文

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

      9f7449b8-d0c1-11ec-bce3-dac502259ad0.png

      1.打開GosDeviceControlActivity這個(gè)類

      9fad5c1c-d0c1-11ec-bce3-dac502259ad0.png

      找到Oncreate()方法：

      9feb5f62-d0c1-11ec-bce3-dac502259ad0.png

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

      a0116112-d0c1-11ec-bce3-dac502259ad0.png

      注意，因?yàn)樵贕osDeviceControlActivity.java中引用了我們刪除的控件，所以在GosDeviceControlActivity也必須把這個(gè)引用刪除，否則因?yàn)檎也坏綄?duì)應(yīng)的控件導(dǎo)致錯(cuò)誤。

      2.導(dǎo)入U(xiǎn)I使用到的圖片

      • 把我們?cè)赨I需要適用到的圖片導(dǎo)入drawable，以便引用，文件如下

      a02e10f0-d0c1-11ec-bce3-dac502259ad0.png

      • 復(fù)制到如下的路徑：

      a0bb8fca-d0c1-11ec-bce3-dac502259ad0.png

      3.編寫UI界面詳解：

      因?yàn)樗锌丶粋€(gè)頁面是顯示不下的，所以此處需要使用一個(gè) ScrollView ,使UI界面可以上下滑動(dòng)

      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">

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

      a1074960-d0c1-11ec-bce3-dac502259ad0.png

      • 在最上邊編寫一個(gè)復(fù)位按鈕，用來復(fù)位大燈，以及門禁系統(tǒng)：

      也就是如下的界面：

      a157d970-d0c1-11ec-bce3-dac502259ad0.png

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

      備注：

      1.控件布局相關(guān)知識(shí)：

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

      2.線性布局相關(guān)知識(shí)：

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

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

      步驟：

      • 關(guān)于如何自定義按鈕屬性：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="復(fù)位" />
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="大燈開關(guān)面板"android:textColor="#f86354"android:textSize="30dp" />android:layout_width="match_parent"android:layout_height="2dp"android:background="@color/alert_blue">

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

      a18eb648-d0c1-11ec-bce3-dac502259ad0.png

      界面如下：

      a1d6fba6-d0c1-11ec-bce3-dac502259ad0.png

      • 完成大燈控制的UI界面

      如下：

      a2141590-d0c1-11ec-bce3-dac502259ad0.png

      這個(gè)按鈕使用的控件是CheckBox，當(dāng)這個(gè)CheckBox未被選中時(shí)，顯示紅色的圖片，并顯示開關(guān)狀態(tài)為關(guān)，如果CheckBox被選中那么現(xiàn)實(shí)綠色的圖片，并顯示狀態(tài)為開。

      備注：

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

      2.創(chuàng)建一個(gè)selector布局，設(shè)置選中顯示顯示綠色，未選中選擇紅色

      a2640fb4-d0c1-11ec-bce3-dac502259ad0.png

      步驟：

      a27e9df2-d0c1-11ec-bce3-dac502259ad0.png

      a2a04902-d0c1-11ec-bce3-dac502259ad0.png

      代碼如下：

      android:state_checked="true">android:state_checked="false">

      詳細(xì)代碼代碼如下：

      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="復(fù)位" />
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="大燈開關(guān)面板"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="大廳燈開關(guān)：關(guān)"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="食廳燈開關(guān)：關(guān)"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="臥室燈開關(guān)：關(guān)"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" />

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

      a2dffade-d0c1-11ec-bce3-dac502259ad0.png

      整體界面如下：

      a304a44c-d0c1-11ec-bce3-dac502259ad0.png

      • 完成門禁開關(guān)面板的UI界面設(shè)計(jì)

      如下：

      a327e880-d0c1-11ec-bce3-dac502259ad0.png

      這兩個(gè)按鈕實(shí)用的控件上ImageButton

      備注：

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

      在上面的基礎(chǔ)增加一個(gè)線性布局，注意此時(shí)線性布局的方向應(yīng)該是水平的。

      整體代碼如下：

      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="復(fù)位" />
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="大燈開關(guān)面板"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="大廳燈開關(guān)：關(guān)"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="食廳燈開關(guān)：關(guān)"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="臥室燈開關(guān)：關(guān)"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="門禁開關(guān)面板"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" />

      整體界面如下：

      a35b0c88-d0c1-11ec-bce3-dac502259ad0.png

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

      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="復(fù)位" />
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="大燈開關(guān)面板"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="大廳燈開關(guān)：關(guān)"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="食廳燈開關(guān)：關(guān)"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="臥室燈開關(guān)：關(guān)"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="門禁開關(guān)面板"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="門禁狀態(tài)指示："android:textColor="#33ff99"android:textSize="20dp" />

android:id="@+id/TV_indicateID"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="關(guān)閉"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="溫濕度檢測(cè)"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="相對(duì)濕度"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="有毒氣體檢測(cè)"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="氣體監(jiān)測(cè)"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="紅外感應(yīng)檢測(cè)"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="人體檢測(cè)"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="復(fù)位檢測(cè)" />
android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="    檢測(cè)次數(shù)統(tǒng)計(jì):"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界面效果如下：

      a3b59ac2-d0c1-11ec-bce3-dac502259ad0.png

      a3dacd56-d0c1-11ec-bce3-dac502259ad0.png

      4.下載到真題驗(yàn)證

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

      步驟：

      4.1.進(jìn)入機(jī)智云官網(wǎng)，打開你的項(xiàng)目，打開虛擬設(shè)備

      a41464e4-d0c1-11ec-bce3-dac502259ad0.png

      4.2.點(diǎn)擊二維碼

      a456b9fc-d0c1-11ec-bce3-dac502259ad0.png

      4.3.使用APP掃描

      a48a2ddc-d0c1-11ec-bce3-dac502259ad0.png

      4.4.掃描后進(jìn)入

      a4c35f94-d0c1-11ec-bce3-dac502259ad0.png

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

      a52fc17a-d0c1-11ec-bce3-dac502259ad0.png

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

      到了這一步好像UI設(shè)計(jì)已經(jīng)全部完成了，但是上面還有一個(gè)門禁的Activity哦，就是當(dāng)你按門禁開關(guān)面板的紅色綠色按鈕時(shí)，

      進(jìn)入密碼輸入界面，輸入正確的密碼則打開門禁，否則不打開。

      在這里使用Intent進(jìn)行Activity的跳轉(zhuǎn)

      備注:

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

      步驟：

      5.1.1.在ControlModule新建一個(gè)空的Activity

      a58d2a54-d0c1-11ec-bce3-dac502259ad0.png

      5.1.2.填寫Activity的名稱和所對(duì)應(yīng)layout的名稱，Androidstuio會(huì)自動(dòng)

      a5b16f90-d0c1-11ec-bce3-dac502259ad0.png

      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="請(qǐng)輸入門禁密碼"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="請(qǐng)輸入密碼" />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"/>

      界面如下：

      a5e087e4-d0c1-11ec-bce3-dac502259ad0.png

      到這里所有的UI界面已經(jīng)設(shè)計(jì)完成了，接下來就是需要寫控制代碼了。

      （控制代碼實(shí)現(xiàn)參考本系列文章第一篇）

      原文標(biāo)題：開發(fā)者作品：一款智能家居系統(tǒng)，實(shí)現(xiàn)了 4 種控制方式（二）

      文章出處：【微信公眾號(hào)：機(jī)智云開發(fā)者】歡迎添加關(guān)注！文章轉(zhuǎn)載請(qǐng)注明出處。


      審核編輯：湯梓紅
      阅读全文
      聲明：本文內(nèi)容及配圖由入駐作者撰寫或者入駐合作網(wǎng)站授權(quán)轉(zhuǎn)載。文章觀點(diǎn)僅代表作者本人，不代表電子發(fā)燒友網(wǎng)立場(chǎng)。文章及其配圖僅供工程師學(xué)習(xí)之用，如有內(nèi)容侵權(quán)或者其他違規(guī)問題，請(qǐng)聯(lián)系本站處理。 舉報(bào)投訴
      • 開源
        +關(guān)注

        關(guān)注

        3

        文章

        3606

        瀏覽量

        43478
      • 機(jī)智云
        +關(guān)注

        關(guān)注

        3

        文章

        609

        瀏覽量

        26742
      • ui界面
        +關(guān)注

        關(guān)注

        0

        文章

        11

        瀏覽量

        1669

      原文標(biāo)題：開發(fā)者作品：一款智能家居系統(tǒng)，實(shí)現(xiàn)了 4 種控制方式（二）

      文章出處：【微信號(hào)：IoTMaker，微信公眾號(hào)：機(jī)智云開發(fā)者】歡迎添加關(guān)注！文章轉(zhuǎn)載請(qǐng)注明出處。

      收藏 0人收藏

        評(píng)論

        相關(guān)推薦
        熱點(diǎn)推薦

        物聯(lián)網(wǎng)APP開源框架教程（三）—— Andriod APP開發(fā)（安卓）

        開源框架是機(jī)智云的出品，包含Wi-Fi類智能硬件app通用功能的一套源碼。只要使用機(jī)智云協(xié)議的產(chǎn)品，開發(fā)者可以直接用該框架的源碼實(shí)現(xiàn)快速開發(fā)
        發(fā)表于 12-21 09:55

        機(jī)智云開源框架介紹

        機(jī)智云物聯(lián)網(wǎng)開源框架App工程（Eclipse工程）https://git.oschina.net/dantang/GizOpenSource_AppKit_Android 介紹：機(jī)智
        發(fā)表于 12-27 15:47

        機(jī)智云APP開源框架介紹

        機(jī)智云物聯(lián)網(wǎng)開源框架App工程（Eclipse工程）介紹：機(jī)智云開源框架（GizOpenSour
        發(fā)表于 02-15 17:56

        物聯(lián)網(wǎng)平臺(tái)機(jī)智云Android開源框架入門之旅

        下載地址。[size=1em]機(jī)智云Android開源框架 AndroidStudio版官方下載傳送門： —— 【點(diǎn)擊我進(jìn)入下載AndroidStudio版本界面】[size=1em
        發(fā)表于 11-09 14:37

        輕量級(jí)的ui框架如何去制作

        原創(chuàng)分享：自制輕量級(jí)單片機(jī)UI框架框架元素用戶接口代碼開源平時(shí)?？碿sdn，但是從來沒有自己寫過。正好這幾天需要用單片機(jī)做一個(gè)簡易的ui
        發(fā)表于 07-14 07:39

        開發(fā)者作品▏智能家居系統(tǒng)開發(fā)實(shí)踐，實(shí)現(xiàn)了 4 種控制方式

        ）1.界面演示2.下載機(jī)智云安卓開源框架3.創(chuàng)建項(xiàng)目4.修改App圖標(biāo)、名字等信息5.填寫App
        發(fā)表于 05-11 12:02

        如何實(shí)現(xiàn)機(jī)智云開源框架下的換膚操作？

        前言 本文主要是講述用一個(gè)“取巧”的方法實(shí)現(xiàn)機(jī)智云開源框架下的換膚操作。此外，還會(huì)推薦幾種其他關(guān)于智能產(chǎn)品APP應(yīng)用的開發(fā)。 開發(fā)背景 我最近在做基于機(jī)智云物聯(lián)網(wǎng)的智能窗戶設(shè)計(jì)，硬件部
        的頭像 發(fā)表于 04-01 14:28 ?1791次閱讀
        如何實(shí)現(xiàn)<b class='flag-5'>機(jī)智</b>云<b class='flag-5'>開源</b><b class='flag-5'>框架</b>下的換膚操作？

        使用機(jī)智云開源框架開發(fā)一個(gè)智能家居系統(tǒng)？

        。本項(xiàng)目分成三部分來敘述。 本文是第一篇。 第一篇：總體介紹和安卓開發(fā)（邏輯控制部分實(shí)現(xiàn)） 1.界面演示2.下載機(jī)智云安卓
        的頭像 發(fā)表于 04-20 14:25 ?2550次閱讀
        使用<b class='flag-5'>機(jī)智</b>云<b class='flag-5'>開源</b><b class='flag-5'>框架</b>開發(fā)一個(gè)智能家居系統(tǒng)？

        在HarmonyOS版本下如何基于JS UI框架來開發(fā)？

        作者：zhenyu ，華為軟件開發(fā)工程師 在當(dāng)前HarmonyOS版本下，如何基于JS UI框架來開發(fā)呢？ 1JS UI框架下FA與PA交互的使用場(chǎng)景通常一個(gè)典型使用JS
        的頭像 發(fā)表于 07-13 09:24 ?2389次閱讀

        深入解析UI框架簡介以及業(yè)界發(fā)展趨勢(shì)

        作者：yuzhiqiang、sunfei、wanglei，華為軟件架構(gòu)工程師UI 框架簡介以及業(yè)界發(fā)展趨勢(shì) UI，即用戶界面，主要包含視覺（比如圖像、文字、動(dòng)畫等可視化內(nèi)容）以及交互（
        的頭像 發(fā)表于 08-04 14:25 ?5995次閱讀
        深入解析<b class='flag-5'>UI</b><b class='flag-5'>框架</b>簡介以及業(yè)界發(fā)展趨勢(shì)

        原創(chuàng)分享：自制輕量級(jí)單片機(jī)UI框架

        原創(chuàng)分享：自制輕量級(jí)單片機(jī)UI框架框架元素用戶接口代碼開源平時(shí)?？碿sdn，但是從來沒有自己寫過。正好這幾天需要用單片機(jī)做一個(gè)簡易的ui
        發(fā)表于 11-05 15:20 ?29次下載
        原創(chuàng)分享：自制輕量級(jí)單片機(jī)<b class='flag-5'>UI</b><b class='flag-5'>框架</b>

        使用開源框架開發(fā)不同用途的APP

        為方便開發(fā)者快速開發(fā)不同設(shè)備端的App，機(jī)智云開源了安卓、iOS、APICloud等形式的框架。該框架封裝了手機(jī)(包括PAD等設(shè)備)與
        的頭像 發(fā)表于 03-29 15:48 ?1641次閱讀

        Cosmac ELF1802 UI界面開源硬件

        電子發(fā)燒友網(wǎng)站提供《Cosmac ELF1802 UI界面開源硬件.zip》資料免費(fèi)下載
        發(fā)表于 01-29 16:47 ?0次下載
        Cosmac ELF1802 <b class='flag-5'>UI</b><b class='flag-5'>界面</b><b class='flag-5'>開源</b>硬件

        你要的APP開源框架在這里

        為方便開發(fā)者快速開發(fā)不同設(shè)備端的App，機(jī)智云開源了安卓、iOS、APICloud等形式的框架。該框架封裝了手機(jī)（包括PAD等設(shè)備）與
        的頭像 發(fā)表于 03-25 14:25 ?1008次閱讀
        你要的APP<b class='flag-5'>開源</b><b class='flag-5'>框架</b>在這里

        機(jī)智云公版APP、APP開源框架、超賽在線配置APP服務(wù)有什么區(qū)別？

        最近后臺(tái)有人問機(jī)智云公版APP、APP開源框架、APP代碼自動(dòng)生成服務(wù)、超賽在線配置APP，它們之間有啥區(qū)別？個(gè)人覺得，區(qū)別主要在于我想用它們做啥？想快速控制or測(cè)試——選機(jī)智云公版A
        的頭像 發(fā)表于 11-30 09:26 ?1116次閱讀
        <b class='flag-5'>機(jī)智</b>云公版APP、APP<b class='flag-5'>開源</b><b class='flag-5'>框架</b>、超賽在線配置APP服務(wù)有什么區(qū)別？

        電子發(fā)燒友

        中國電子工程師最喜歡的網(wǎng)站

        • 與2931785位工程師會(huì)員交流學(xué)習(xí)
        • 獲取您個(gè)性化的科技前沿技術(shù)信息
        • 參加活動(dòng)獲取豐厚的禮品