开发者中心
关闭视频

开发教程 | 基于机智云的Android开源app修改教程

• 发表于：2021年08月17日 16:01 • 更新于：2024年05月05日 00:04

为了使自己的app更加的有个人风格，故在网上寻找了很多的参考资料，这里是对自己设计的总结，具体机智云APP生成流程可参考基于stm32的连接机智云教程，参考链接。

 

 

下载机智云开源APP

 

进行以下操作之前请确保在机智云平台中创建了一个产品，下面点击添加应用，选择Android生成一个应用。

然后按照图片提示，将密匙输入到相应位置，具体参考我上一篇博客，点击下载，将app工程下载到本地。

 

 

Andriod方面处理

 

►Android studio 软件安装与源码修改

 

将下载好的文件解压出来，然后将一个个复制出来，粘贴到Android工作室文件文件夹中，如果安装Android工作室的请参考第二个文件大佬的详细示例，这边建议下载的 Android 工作室版本不要太新，可能是工程可能编译不成功。

然后自己新建一个Android工程作为参考，方便修改源码，第一处参考改造例程修改机智云APP。

将这里修改为对应的新建工程的内容。

第二处按照这个路径参考新建工程修改，这里是我自己的按照自己的新建工程修改的代码。

修改后如下图所示，需注意这里的compile均替换为implementation，testcompile均替换为testimplementation。

然后可以从Android studio里面打开修改机智云打开app，状态好打开后如下图所示。

这里我们打开工程视图。



►修改APP图标和名称

 

首先在网上下载相关素材备用，如果大小不一，请自行修改图片图标或大小，到drawable-xhdpi目录下。

注意：鼠标放置drawable-xhdpi上右击选Paste，便出现如下界面。


 

点击确定，这个名字复制到如下图文件，红框内是我们可以替换的应用图标，将你的图标名称填上就OK。

下面在这个位置修改应用名。

 

►修改启动页面和内部UI

现在修改启动界面，这里的图片在前面我们已经复制到了相关目录下，现在可以按照下图将红框出修改成你的图片名称，见下图。然后在172行和174行两处替换为你的设备离线图标。

同样是这个目录下，在117行和119行各自的位置替换为自己的设备在线图标。

 

►修改设备监控界面

 

下面修改一下设备监控界面，跟着这个路径打开。

这是已经修改好的界面，最终效果如下（这里的图标可以自己修改为自己的图标，模拟复制代码会报错）。

 

代码如下所示，可根据需要自行修改（翻译参考，最好要懂懂代码）。


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

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

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

<ImageView
android: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" />

 

<TextView
android: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="灯" />

<Switch
android: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>

 

<!-- 蜂鸣器(布尔可写) --><RelativeLayout
android:layout_width="0dp"
android:layout_weight="3"
android:layout_height="wrap_content"
android:layout_marginBottom="1dp"
android:background="@color/white"
android:padding="10dp" >

<ImageView
android: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" />

<TextView
android: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="蜂鸣器" />

 

<Switch
android: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>

<!-- 开关(布尔可写) -->
<RelativeLayout
android:layout_width="0dp"
android:layout_weight="3"
android:layout_height="wrap_content"
android:layout_marginBottom="1dp"
android:background="@color/white"a
ndroid:padding="10dp" >
<ImageView
android: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" />

<TextView
android: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="开关" />
<Switch
android: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>

<LinearLayout
android:layout_width="match_parent"
android:layout_height="101dp"
android:orientation="horizontal"
android:scrollbars="horizontal">

<!-- 温度(数值只读) -->
<RelativeLayout
android:layout_width="0dp"
android:layout_weight="3"
android:layout_height="wrap_content"
android:background="@color/white"
android:padding="10dp" >

 

<ImageView
android: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" />

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

<TextView
android: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="℃" />

 

<TextView
android:id="@+id/Temp_text1"
android:layout_toLeftOf="@id/Temp"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="温度" />

</RelativeLayout>

<!-- 湿度(数值只读) -->
<RelativeLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginBottom="1dp"
android:layout_weight="3"
android:background="@color/white"
android:padding="10dp">

<ImageView
android: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" />

 

<TextView
android: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="%" />

<TextView
android: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>

 

<!-- 光照强度(数值只读) -->
<RelativeLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginBottom="1dp"
android:layout_weight="3"
android:background="@color/white"
android:padding="10dp">

<ImageView
android: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" />

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

 

<TextView
android: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>

<!-- 温度阈值范围(数值可写) -->
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="1dp"
android:background="@color/white"
android:padding="10dp" >

 

<TextView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="温度阈值范围（℃）" />

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

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

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

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="16sp"
android:text="50" />
</LinearLayout>
</RelativeLayout>

<!-- 湿度阈值范围(数值可写) -->
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="1dp"
android:background="@color/white"
android:padding="10dp" >

<TextView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="湿度阈值范围（％）" />

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

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

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="16sp"
android:text="20" />

 

<SeekBar
android: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"/>

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="16sp"
android:text="95" />
</LinearLayout>
</RelativeLayout>

<!-- 光强阈值范围(数值可写) -->
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="1dp"
android:background="@color/white"
android:padding="10dp" >

<TextView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="光强阈值范围（lx）" />

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

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

 

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

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="16sp"android:text="65535" />
</LinearLayout>
</RelativeLayout>
</LinearLayout>
</ScrollView>
</LinearLayout>

 

►安装软件

 

因为我们的程序编译无错误，所以开始安装应用程序，用数据线将计算机和手机连接，进入手机的开发者模式，打开开发者模式，允许进行USB调试。

 

然后在android studio端点击运行，app便安装成功了。


 

热点