开发者中心
关闭视频

机智云安卓开源框架2，实现简单智能家居系统系统之UI界面编写

• 发表于：2021年07月07日 12:03 • 更新于：2024年05月03日 21:50

本项目由机智云开发者分享，主要介绍了如何使用机智云开源框架开发了一个智能家居系统，具体来说实现了灯的控制、门禁的控制、温湿度的读取、有毒气体的检测、人体红外检测等功能。本项目分成三部分来叙述。

 

编写机智云安卓开源框架的UI界面，需要修改的是控制模块的部分。

 

1.打开GosDeviceControlActivity这个类

 

找到Oncreate()方法：

 

删除不必要的东西，如下图所示：

需要注意的是：因为在GosDeviceControlActivity.java中引用了我们删除的控件，所以在GosDeviceControlActivity也必须把这个引用删除，否则因为找不到对应的控件导致错误。

 

2.导入UI使用到的图片

♦ 把我们在UI需要适用到的图片导入drawable，以便引用，文件如下：

 

 

♦ 复制到如下的路径：

 

3.编写UI界面详解

因为所有控件一个页面是显示不下的，所以此处需要使用一个 ScrollView ,使UI界面可以上下滑动

ScrollView具体使用方法

​

<?xml version="1.0" encoding="utf-8"?>
<LinearLayoutxmlns:android="http://schemas.android.com/apk/res/
android"android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >

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

 

注意此处修改了背景为刚才我们导入的背景图片，视图如下：

 

♦ 在最上边编写一个复位按钮，用来复位大灯，以及门禁系统，也就是如下的界面：

 

在ScrollView中新建一个根布局为线性布局（LinearLayout）

备注：控件布局相关知识；线性布局相关知识

 

♦ 为了让按钮看起来更美观，且有按下的效果，我们自己新建一个selector布局，然后引用这个布局文件，步骤如下：​

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true">
<shape>
<solid android:color="#FF9900"/>
<corners android:radius="15dp"/>
</shape>

</item>
<item android:state_pressed="false">
<shape>
<solid android:color="#DAA520"/>
<corners android:radius="10dp"/>
</shape>
</item>

</selector>

 

 

关于如何自定义按钮属性，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" >

 

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

<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:scrollbars="vertical"
android:weightSum="1">

<Button
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="复位" />

<View
android:layout_width="match_parent"
android:layout_height="2dp"
android:background="@color/alert_blue">
</View>

<TextView
android:layout_width="match_parent"
android:layout_height="35dp"
android:gravity="center"
android:text="大灯开关面板"
android:textColor="#f86354"
android:textSize="30dp" />

<View
android:layout_width="match_parent"
android:layout_height="2dp"
android:background="@color/alert_blue">
</View>

</LinearLayout>
</ScrollView>
</LinearLayout>

 

备注：在Button控件的background中引用这个drawable文件

 

界面如下：

 

♦ 完成大灯控制的UI界面如下：

这个按钮使用的控件是CheckBox，当这个CheckBox未被选中时，显示红色的图片，并显示开关状态为关，如果CheckBox被选中那么现实绿色的图片，并显示状态为开。

 

备注：CheckBox的使用方法；创建一个selector布局，设置选中显示显示绿色，未选中选择红色

 

步骤如下：

 

代码如下：

<?xml version="1.0" encoding="utf-8"?>

<selector xmlns:android="http://schemas.android.com/apk/res/android">

<item android:drawable="@drawable/btnoff002"android:state_checked="true"></item>

<item android:drawable="@drawable/btn_on001"

android:state_checked="false">

</item>

</selector>

 

详细代码代码如下：

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

 

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

<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:scrollbars="vertical"
android:weightSum="1">

<Button
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="复位" />

<Viewandroid:layout_width="match_parent"
android:layout_height="2dp"
android:background="@color/alert_blue">
</View>

<TextView
android:layout_width="match_parent"
android:layout_height="35dp"
android:gravity="center"
android:text="大灯开关面板"
android:textColor="#f86354"
android:textSize="30dp" />

<View
android:layout_width="match_parent"
android:layout_height="2dp"
android:background="@color/alert_blue">
</View>

<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginLeft="100dp"
android:layout_weight="0.10"
android:orientation="vertical">

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

<CheckBox
android:id="@+id/checkbox01_ID"
android:layout_width="150dp"
android:layout_height="85dp"
android:background="@drawable/selecter02_cb"
android:button="@null" />

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

<CheckBox
android:id="@+id/checkbox02_ID"
android:layout_width="150dp"
android:layout_height="85dp"
android:background="@drawable/selecter02_cb"
android:button="@null" />

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

<CheckBox
android:id="@+id/checkbox03_ID"
android:layout_width="150dp"
android:layout_height="85dp"
android:background="@drawable/selecter02_cb"
android:button="@null" />
</LinearLayout>

</LinearLayout></ScrollView>

</LinearLayout>

 

备注：每个CheckBox的background属性都需要引用selector02_cb这个文件

 

整体界面如下：

 

♦ 完成门禁开关面板的UI界面设计如下：

 

这两个按钮实用的控件上ImageButton

备注：ImageButton的使用

 

在上面的基础增加一个线性布局，注意此时线性布局的方向应该是水平的。

整体代码如下：

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

 

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

<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:scrollbars="vertical"
android:weightSum="1">

<Buttonandroid: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="复位" />

<View
android:layout_width="match_parent"
android:layout_height="2dp"
android:background="@color/alert_blue">
</View>

<TextView
android:layout_width="match_parent"
android:layout_height="35dp"
android:gravity="center"
android:text="大灯开关面板"
android:textColor="#f86354"
android:textSize="30dp" />

<View
android:layout_width="match_parent"
android:layout_height="2dp"
android:background="@color/alert_blue">
</View>

<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginLeft="100dp"
android:layout_weight="0.10"
android:orientation="vertical">

<TextViewandroid: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" />

<CheckBox
android:id="@+id/checkbox01_ID"
android:layout_width="150dp"
android:layout_height="85dp"
android:background="@drawable/selecter02_cb"
android:button="@null" />

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

<CheckBoxandroid:id="@+id/checkbox02_ID"
android:layout_width="150dp"
android:layout_height="85dp"
android:background="@drawable/selecter02_cb"
android:button="@null" />

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

<CheckBox
android:id="@+id/checkbox03_ID"
android:layout_width="150dp"
android:layout_height="85dp"
android:background="@drawable/selecter02_cb"
android:button="@null" />

</LinearLayout>

<View
android:layout_width="match_parent"
android:layout_height="2dp"
android:background="@color/alert_blue">
</View>

<TextView
android:id="@+id/textView7"
android:layout_width="match_parent"
android:layout_height="35dp"
android:gravity="center"
android:text="门禁开关面板"
android:textColor="#f86354"
android:textSize="30dp" />

<View
android:layout_width="match_parent"
android:layout_height="2dp"
android:background="@color/alert_blue">
</View>

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:layout_weight="0.24"
android:orientation="horizontal">

<ImageButton
android:id="@+id/IV_ButtonID"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_marginLeft="40dp"
android:background="@drawable/mybtnopen" />

<ImageButton
android:id="@+id/IV_closeButtonID"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_marginLeft="80dp"
android:background="@drawable/mybtnclose" />

</LinearLayout>

</LinearLayout>

</ScrollView>

</LinearLayout>

 

整体界面如下：

 

♦ 接下来就是温湿度检测，有毒气体，以及红外检测等一些TextView的设置，就不一一贴出来了，整体代码如下：

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">

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

<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:scrollbars="vertical"
android:weightSum="1">

<Button
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="复位" />

<View
android:layout_width="match_parent"
android:layout_height="2dp"
android:background="@color/alert_blue">
</View>

<TextView
android:layout_width="match_parent"
android:layout_height="35dp"
android:gravity="center"
android:text="大灯开关面板"
android:textColor="#f86354"
android:textSize="30dp" />

<View
android:layout_width="match_parent"
android:layout_height="2dp"
android:background="@color/alert_blue">
</View>

<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginLeft="100dp"
android:layout_weight="0.10"
android:orientation="vertical">

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

<CheckBox
android:id="@+id/checkbox01_ID"android:layout_width="150dp"android:layout_height="85dp"
android:background="@drawable/selecter02_cb"
android:button="@null" />

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

<CheckBox
android:id="@+id/checkbox02_ID"
android:layout_width="150dp"
android:layout_height="85dp"
android:background="@drawable/selecter02_cb"android:button="@null" />

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

<CheckBox
android:id="@+id/checkbox03_ID"
android:layout_width="150dp"
android:layout_height="85dp"
android:background="@drawable/selecter02_cb"
android:button="@null" />

</LinearLayout>

<View
android:layout_width="match_parent"
android:layout_height="2dp"
android:background="@color/alert_blue">
</View>

<TextView
android:id="@+id/textView7"
android:layout_width="match_parent"
android:layout_height="35dp"
android:gravity="center"
android:text="门禁开关面板"
android:textColor="#f86354"
android:textSize="30dp" />

<View
android:layout_width="match_parent"
android:layout_height="2dp"
android:background="@color/alert_blue">
</View>

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:layout_weight="0.24"
android:orientation="horizontal">

<ImageButton
android:id="@+id/IV_ButtonID"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_marginLeft="40dp"
android:background="@drawable/mybtnopen" />

<ImageButton
android:id="@+id/IV_closeButtonID"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_marginLeft="80dp"
android:background="@drawable/mybtnclose" />

</LinearLayout>

<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="30dp"
android:layout_marginTop="30dp"
android:orientation="horizontal">

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="门禁状态指示："
android:textColor="#33ff99"
android:textSize="20dp" />

<TextView
android:id="@+id/TV_indicateID"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="关闭"android:textColor="#ffff00"
android:textSize="20dp" />

</LinearLayout>

<View
android:layout_width="match_parent"
android:layout_height="2dp"
android:background="@color/alert_blue">
</View>

<TextView
android:id="@+id/textView8"
android:layout_width="match_parent"
android:layout_height="35dp"
android:gravity="center"
android:text="温湿度检测"
android:textColor="#f86354"
android:textSize="30dp" />

<Viewandroid:layout_width="match_parent"
android:layout_height="2dp"
android:background="@color/alert_blue">
</View>

<!-- temp(数值只读) -->

<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginBottom="1dp"
android:layout_marginTop="20dp"
android:orientation="horizontal"
android:padding="50dp">

<TextView
android:id="@+id/textView4"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="大气温度"
android:textColor="#33ff99"android:textSize="20dp" />

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

</LinearLayout>

<!-- hum(数值只读) -->

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

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

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

</LinearLayout>

<Viewandroid:layout_width="match_parent"
android:layout_height="2dp"
android:background="@color/alert_blue">
</View>

<TextView
android:id="@+id/textView6"
android:layout_width="match_parent"
android:layout_height="35dp"
android:gravity="center"
android:text="有毒气体检测"
android:textColor="#f86354"
android:textSize="30dp" />

<View
android:layout_width="match_parent
"android:layout_height="2dp"
android:background="@color/alert_blue">
</View>

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="1dp"
android:layout_weight="0.03"
android:padding="50dp">

<TextView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_centerVertical="true"
android:text="气体监测"
android:textColor="#33ff99"
android:textSize="20dp" />

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

</LinearLayout>

<View
android:layout_width="match_parent"
android:layout_height="2dp"
android:background="@color/alert_blue">
</View>

<TextVie
wandroid:layout_width="match_parent"
android:layout_height="35dp"
android:gravity="center"
android:text="红外感应检测"
android:textColor="#f86354"
android:textSize="30dp" />

<View
android:layout_width="match_parent"
android:layout_height="2dp"
android:background="@color/alert_blue">
</View>

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="1dp"
android:layout_weight="0.03"
android:padding="50dp">

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

<TextView
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" />
</LinearLayout>

<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="horizontal">

<Button
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="复位检测" />

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="    检测次数统计:"
android:textColor="#ca8687"
android:textSize="20dp" />

<TextViewandroid:id="@+id/TV_Det_timesID"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=" 0次"
android:textColor="#1d953f"android:textSize="20dp" />

</LinearLayout>

<View
android:layout_width="match_parent"
android:layout_height="2dp"
android:background="@color/alert_blue">
</View>

</LinearLayout>
</ScrollView>
</LinearLayout>

 

整体UI界面效果如下：

 

4.下载到真题验证 

修改完了UI界面之后，就可以下载到真题上体验一下。

 

步骤如下:

 

4.1.进入机智云官网，打开你的项目，打开虚拟设备

 

4.2.点击二维码

 

4.3.使用APP扫描

 

4.4.扫描后进入 

 

4.5.接下来就可以看到我们写的UI界面啦

 

5.编写密码输入的UI界面 

到了这一步好像UI设计已经全部完成了，但是上面还有一个门禁的Activity哦，就是当你按门禁开关面板的红色绿色按钮时，进入密码输入界面，输入正确的密码则打开门禁，否则不打开。在这里使用Intent进行Activity的跳转。

 

5.1.何为Intent

 

具体操作步骤如下：

5.1.1.在ControlModule新建一个空的Activity

 

5.1.2.填写Activity的名称和所对应layout的名称，Android stuio会自动

 

5.1.3.编写ActivityLock.xml文件代码如下：

<?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:background="#D1EEEE"
android:orientation="vertical">

<LinearLayout
android:layout_width="368dp"
android:layout_height="wrap_content"
android:orientation="vertical"
android:gravity="center"><TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="请输入门禁密码"
android:textSize="25dp"
android:gravity="center"
android:layout_marginTop="30dp"/>

<EditText
android:id="@+id/ED_Passward_ID"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="请输入密码" />

<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">

<Button
android:id="@+id/BT_sure_ID"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="确定"android:layout_marginLeft="200dp"/>

<Buttonandroid:id="@+id/BT_cancle_ID"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="取消"/>

</LinearLayout>

<TextView
android:id="@+id/TV_reciveID"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text=""
android:textSize="25dp"
android:gravity="center"
ndroid:layout_marginTop="30dp"/>
</LinearLayout>

</LinearLayout>

 

界面如下：

到这里所有的UI界面已经设计完成了，接下来就是需要写控制代码了。具体控制代码实现具体参考。

 

热点