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

前言

首先，这是我最近搞的毕业设计，然后为了使自己的app更加的有个人风格，故在网上寻找了很多的参考资料，这里是对自己设计的总结，具体机智云APP生成流程请参考我上一篇博客。链接: 基于stm32的连接机智云教程

机智云开源App下载

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

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

Android方面处理

Android studio软件安装与源码修改

将下载好了的文件解压出来，然后将第二个文件夹复制出来，粘贴到存放Android studio文件例程文件夹中，若还没有安装Android studio的请参考这位大佬的详细例程，这边建议下载的Android studio版本不要太新，不然工程可能编译不成功。
然后自己新建一个Android工程作为参考，方便修改源码，
第一处参考新建例程修改机智云APP
将此处修改为对应的新建工程的内容
第二处按照此路径参考新建工程修改，这里是我自己的按照自己的新建工程修改完毕的代码

修改后如下图所示，需注意这里的compile 均替换为implementation，testcompile均替换为testimplementation。
然后可以从Android studio里面打开修改好的机智云开源app，等待一段时间打开后如下图所示，
这里我们打开工程视图

修改app图标和名称

首先在网上下载相关素材备用，若大小不一，请自行修改图片或者图标的大小。这时将我们下载好的图标或者图片放置到桌面，然后分别复制一下，依次粘贴到drawable-xhdpi目录下（注意鼠标放在drawable-xhdpi上右击选Paste便出现如下界面）

点击确定，将此名称复制到按照如下图这个文件，红框内既是我们可以替换的app图标，将你的图标名称填上就ok，
下面在这个位置修改app名称

修改启动页面和内部UI

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

修改设备监控界面

下面修改一下设备监控界面，按照此路径打开

这是我已经修改好的界面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