原创 基于机智云AIoT平台的Android开源app修改教程

2021-7-7 17:16 8425 8 8 分类: 消费电子 文集: 机智云
为了使自己的app更加的有个人风格,因此在网上寻找了很多的参考资料,这里是对自己设计的总结,具体机智云APP生成流程请参考我上一篇博客:基于STM32的连接机智云教程。
一,下载机智云开源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,

下面在这个位置修改app名称

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" />
  • <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" >
  • <LinearLayout
  • android: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" >
  • <!-- 灯(布尔可写) -->
  • <RelativeLayout
  • android: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"
  • android: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" />
  • <TextView
  • android: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>
  •  
  • 复制代码

    2.5、安装软件
    因为我们的程序编译无错误,故开始安装app,用数据线将电脑和手机连接,进入手机的开发者模式,打开开发者模式,允许进行USB调试

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

    原文转载于:https://blog.csdn.net/Zgc6666/article/details/104187111
    PARTNER CONTENT

    文章评论0条评论)

    登录后参与讨论
    我要评论
    0
    8
    关闭 站长推荐上一条 /3 下一条