开发者作品：一款智能家居系统，实现了 4 种控制方式（二）

机智云 2022-05-20 339

机智云

299 内容 38w+阅读 52粉丝

描述

 

 

前言

 

本项目通过阐述基于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的名称，Android stuio会自动

智能家居

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



 

打开APP阅读更多精彩内容
声明：本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人，不代表电子发烧友网立场。文章及其配图仅供工程师学习之用，如有内容侵权或者其他违规问题，请联系本站处理。 举报投诉

全部0条评论

快来发表一下你的评论吧 !

下载APP
|投诉反馈|电子发烧友网
© 2021 elecfans.com
湘ICP备2023018690号
×
20
完善资料，
赚取积分