最新发表 推荐阅读 明星博主 原创博文 年度排行 博文排行 博文评论 FPGA/CPLD MCU/ 嵌入式 模拟 电源/新能源 测试测量 通信 智能手机 处理器与DSP PCB 汽车电子 消费电子 智能硬件 物联网 软件与OS 采购与分销 供应链管理 工程师职场 EDA/ IP/ 设计与制造 无人机 机器人/ AI 医疗电子 工业电子 管理
机智云物联网
文章：244 阅读：414675 评论：28 赞：1621
机智云Gizwits智能硬件自助开发及云服务平台，全栈式物联网平台领导者，为智能硬件提供研发－测试－量产－售后等全生命周期服务。开放Api，支持硬件、应用和业务云二次开发，支持主流无线模块，支持任意IaaS的公有云、私有云、混合云全球部署。
好友 私信 个人主页

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

2021-7-7 17:16 8394 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，最后效果图如下（这里的图标可自行修改为自己的图标，若是仅仅复制代码会报错）


代码如下所示，可根据需要自行修改（仅供参考，最好要读懂代码）
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3. android:layout_width="match_parent"
  4. android:layout_height="match_parent"
  5. android:orientation="vertical">
  7. <include layout="@layout/header_toolbar" />
  9. <ScrollView
  10. android:layout_width="match_parent"
  11. android:layout_height="match_parent"
  12. android:background="@color/background_color"
  13. android:fadingEdge="vertical"
  14. android:paddingBottom="10dp"
  15. android:paddingTop="20dp"
  16. android:scrollbars="vertical" >
  18. <LinearLayout
  19. android:layout_width="match_parent"
  20. android:layout_height="wrap_content"
  21. android:orientation="vertical"
  22. android:scrollbars="vertical" >
  23. <LinearLayout
  24. android:layout_width="match_parent"
  25. android:layout_height="wrap_content"
  26. android:orientation="horizontal"
  27. android:scrollbars="horizontal" >
  30. <!-- 灯(布尔可写) -->
  31. <RelativeLayout
  32. android:layout_width="0dp"
  33. android:layout_height="match_parent"
  34. android:layout_marginBottom="1dp"
  35. android:layout_weight="3"
  36. android:alpha="1"
  37. android:background="@color/white"
  38. android:gravity="center_horizontal"
  39. android:padding="10dp">
  41. <ImageView
  42. android:id="@+id/LED"
  43. android:layout_width="wrap_content"
  44. android:layout_height="wrap_content"
  45. android:layout_alignParentTop="true"
  46. android:layout_centerHorizontal="true"
  47. android:src="@drawable/led" />
  49. <TextView
  50. android:id="@+id/Led_text"
  51. android:layout_width="wrap_content"
  52. android:layout_height="wrap_content"
  53. android:layout_below="@+id/LED"
  54. android:layout_centerHorizontal="true"
  55. android:layout_centerVertical="true"
  56. android:text="灯" />
  58. <Switch
  59. android:id="@+id/sw_bool_LED"
  60. android:layout_width="wrap_content"
  61. android:layout_height="wrap_content"
  62. android:layout_below="@id/Led_text"
  63. android:layout_alignParentBottom="true"
  64. android:layout_centerHorizontal="true"
  65. android:textOff="关闭"
  66. android:textOn="开启" />
  67. </RelativeLayout>
  70. <!-- 蜂鸣器(布尔可写) -->
  71. <RelativeLayout
  72. android:layout_width="0dp"
  73. android:layout_weight="3"
  74. android:layout_height="wrap_content"
  75. android:layout_marginBottom="1dp"
  76. android:background="@color/white"
  77. android:padding="10dp" >
  79. <ImageView
  80. android:id="@+id/BEEP"
  81. android:layout_width="wrap_content"
  82. android:layout_height="wrap_content"
  83. android:layout_alignParentTop="true"
  84. android:layout_centerHorizontal="true"
  85. android:src="@drawable/beep" />
  87. <TextView
  88. android:id="@+id/BEEP_text"
  89. android:layout_width="wrap_content"
  90. android:layout_height="match_parent"
  91. android:layout_centerVertical="true"
  92. android:layout_centerHorizontal="true"
  93. android:layout_below="@+id/BEEP"
  94. android:text="蜂鸣器" />
  96. <Switch
  97. android:id="@+id/sw_bool_BEEP"
  98. android:layout_width="wrap_content"
  99. android:layout_height="match_parent"
  100. android:layout_below="@+id/BEEP_text"
  101. android:layout_centerHorizontal="true"
  102. android:layout_centerVertical="true"
  103. android:textOff="关闭"
  104. android:textOn="开启" />
  105. </RelativeLayout>
  108. <!-- 开关(布尔可写) -->
  109. <RelativeLayout
  110. android:layout_width="0dp"
  111. android:layout_weight="3"
  112. android:layout_height="wrap_content"
  113. android:layout_marginBottom="1dp"
  114. android:background="@color/white"
  115. android:padding="10dp" >
  117. <ImageView
  118. android:id="@+id/LED1"
  119. android:layout_width="wrap_content"
  120. android:layout_height="wrap_content"
  121. android:layout_alignParentTop="true"
  122. android:layout_centerHorizontal="true"
  123. android:src="@drawable/kaiguan" />
  124. <TextView
  125. android:id="@+id/LED1_text"
  126. android:layout_width="wrap_content"
  127. android:layout_height="match_parent"
  128. android:layout_below="@+id/LED1"
  129. android:layout_centerHorizontal="true"
  130. android:layout_centerVertical="true"
  131. android:text="开关" />
  132. <Switch
  133. android:id="@+id/sw_bool_LED1"
  134. android:layout_width="wrap_content"
  135. android:layout_height="match_parent"
  136. android:layout_below="@+id/LED1_text"
  137. android:layout_centerHorizontal="true"
  138. android:layout_centerVertical="true"
  139. android:textOff="关闭"
  140. android:textOn="开启" />
  141. </RelativeLayout>
  142. </LinearLayout>
  144. <LinearLayout
  145. android:layout_width="match_parent"
  146. android:layout_height="101dp"
  147. android:orientation="horizontal"
  148. android:scrollbars="horizontal">
  149. <!-- 温度(数值只读) -->
  150. <RelativeLayout
  151. android:layout_width="0dp"
  152. android:layout_weight="3"
  153. android:layout_height="wrap_content"
  154. android:background="@color/white"
  155. android:padding="10dp" >
  157. <ImageView
  158. android:id="@+id/Temp"
  159. android:layout_width="wrap_content"
  160. android:layout_height="wrap_content"
  161. android:layout_alignParentTop="true"
  162. android:layout_centerHorizontal="true"
  163. android:src="@drawable/wd" />
  164. <TextView
  165. android:id="@+id/tv_data_Temp"
  166. android:layout_width="wrap_content"
  167. android:layout_height="wrap_content"
  168. android:layout_below="@+id/Temp"
  169. android:layout_centerHorizontal="true"
  170. android:layout_centerVertical="true" />
  171. <TextView
  172. android:layout_marginLeft="5dp"
  173. android:id="@+id/Temp_text"
  174. android:layout_below="@+id/Temp"
  175. android:layout_toRightOf="@id/tv_data_Temp"
  176. android:layout_width="wrap_content"
  177. android:layout_height="wrap_content"
  178. android:text="℃" />
  179. <TextView
  180. android:id="@+id/Temp_text1"
  181. android:layout_toLeftOf="@id/Temp"
  182. android:layout_width="wrap_content"
  183. android:layout_height="match_parent"
  184. android:text="温度" />
  186. </RelativeLayout>
  189. <!-- 湿度(数值只读) -->
  190. <RelativeLayout
  191. android:layout_width="0dp"
  192. android:layout_height="wrap_content"
  193. android:layout_marginBottom="1dp"
  194. android:layout_weight="3"
  195. android:background="@color/white"
  196. android:padding="10dp">
  197. <ImageView
  198. android:id="@+id/Shidu"
  199. android:layout_width="wrap_content"
  200. android:layout_height="wrap_content"
  201. android:layout_alignParentTop="true"
  202. android:layout_centerHorizontal="true"
  203. android:src="@drawable/sd" />
  204. <TextView
  205. android:layout_marginLeft="5dp"
  206. android:id="@+id/Shidu_text"
  207. android:layout_below="@+id/Shidu"
  208. android:layout_toRightOf="@id/tv_data_Shidu"
  209. android:layout_width="wrap_content"
  210. android:layout_height="wrap_content"
  211. android:text="%" />
  212. <TextView
  213. android:id="@+id/tv_data_Shidu"
  214. android:layout_width="wrap_content"
  215. android:layout_height="wrap_content"
  216. android:layout_below="@+id/Shidu"
  217. android:layout_centerHorizontal="true"
  218. android:layout_centerVertical="true" />
  219. <TextView
  220. android:id="@+id/Shidu_text1"
  221. android:layout_toLeftOf="@id/Shidu"
  222. android:layout_width="wrap_content"
  223. android:layout_height="match_parent"
  224. android:text="湿度" />
  225. </RelativeLayout>
  228. <!-- 光照强度(数值只读) -->
  229. <RelativeLayout
  230. android:layout_width="0dp"
  231. android:layout_height="wrap_content"
  232. android:layout_marginBottom="1dp"
  233. android:layout_weight="3"
  234. android:background="@color/white"
  235. android:padding="10dp">
  237. <ImageView
  238. android:id="@+id/GQ"
  239. android:layout_width="wrap_content"
  240. android:layout_height="wrap_content"
  241. android:layout_alignParentTop="true"
  242. android:layout_centerHorizontal="true"
  243. android:src="@drawable/sun" />
  245. <TextView
  246. android:id="@+id/GQ_text"
  247. android:layout_marginLeft="5dp"
  248. android:layout_below="@+id/GQ"
  249. android:layout_toRightOf="@id/tv_data_GQ"
  250. android:layout_width="wrap_content"
  251. android:layout_height="match_parent"
  252. android:text="lx" />
  253. <TextView
  254. android:id="@+id/tv_data_GQ"
  255. android:layout_width="wrap_content"
  256. android:layout_height="wrap_content"
  257. android:layout_below="@+id/GQ"
  258. android:layout_centerHorizontal="true"
  259. android:layout_centerVertical="true" />
  260. <TextView
  262. android:id="@+id/GQ_text1"
  263. android:layout_toLeftOf="@id/GQ"
  264. android:layout_width="wrap_content"
  265. android:layout_height="match_parent"
  266. android:text="光强" />
  267. </RelativeLayout>
  268. </LinearLayout>
  269. <!-- 温度阈值范围(数值可写) -->
  270. <RelativeLayout
  271. android:layout_width="match_parent"
  272. android:layout_height="wrap_content"
  273. android:layout_marginBottom="1dp"
  274. android:background="@color/white"
  275. android:padding="10dp" >
  277. <TextView
  278. android:layout_width="wrap_content"
  279. android:layout_height="match_parent"
  280. android:text="温度阈值范围（℃）" />
  282. <TextView
  283. android:id="@+id/tv_data_Temp_AlarmScope"
  284. android:layout_width="110dp"
  285. android:layout_height="wrap_content"
  286. android:layout_alignParentRight="true"
  287. android:textSize="16sp"
  288. android:gravity="end" />
  290. <LinearLayout
  291. android:layout_width="match_parent"
  292. android:layout_height="wrap_content"
  293. android:layout_below="@+id/tv_data_Temp_AlarmScope"
  294. android:layout_marginTop="10dp"
  295. android:gravity="center_vertical"
  296. android:orientation="horizontal" >
  298. <TextView
  299. android:layout_width="wrap_content"
  300. android:layout_height="wrap_content"
  301. android:textSize="16sp"
  302. android:text="0" />
  304. <SeekBar
  306. android:id="@+id/sb_data_Temp_AlarmScope"
  307. android:thumb="@drawable/bar1"
  308. android:thumbOffset="0dp"
  309. android:layout_width="0dp"
  310. android:layout_height="wrap_content"
  311. android:layout_weight="3"
  312. android:max="50" />
  314. <TextView
  315. android:layout_width="wrap_content"
  316. android:layout_height="wrap_content"
  317. android:textSize="16sp"
  318. android:text="50" />
  319. </LinearLayout>
  321. </RelativeLayout>
  324. <!-- 湿度阈值范围(数值可写) -->
  325. <RelativeLayout
  326. android:layout_width="match_parent"
  327. android:layout_height="wrap_content"
  328. android:layout_marginBottom="1dp"
  329. android:background="@color/white"
  330. android:padding="10dp" >
  332. <TextView
  333. android:layout_width="wrap_content"
  334. android:layout_height="match_parent"
  335. android:text="湿度阈值范围（％）" />
  337. <TextView
  338. android:id="@+id/tv_data_Shidu_AlarmScope"
  339. android:layout_width="110dp"
  340. android:layout_height="wrap_content"
  341. android:layout_alignParentRight="true"
  342. android:textSize="16sp"
  343. android:gravity="end" />
  345. <LinearLayout
  346. android:layout_width="match_parent"
  347. android:layout_height="wrap_content"
  348. android:layout_below="@+id/tv_data_Shidu_AlarmScope"
  349. android:layout_marginTop="10dp"
  350. android:gravity="center_vertical"
  351. android:orientation="horizontal" >
  353. <TextView
  354. android:layout_width="wrap_content"
  355. android:layout_height="wrap_content"
  356. android:textSize="16sp"
  357. android:text="20" />
  359. <SeekBar
  360. android:id="@+id/sb_data_Shidu_AlarmScope"
  361. android:thumb="@drawable/bar"
  362. android:thumbOffset="0dp"
  363. android:layout_width="0dp"
  364. android:layout_height="wrap_content"
  365. android:layout_weight="3"
  366. android:max="75"
  368. android:progress="0"/>
  370. <TextView
  371. android:layout_width="wrap_content"
  372. android:layout_height="wrap_content"
  373. android:textSize="16sp"
  374. android:text="95" />
  375. </LinearLayout>
  377. </RelativeLayout>
  380. <!-- 光强阈值范围(数值可写) -->
  381. <RelativeLayout
  382. android:layout_width="match_parent"
  383. android:layout_height="wrap_content"
  384. android:layout_marginBottom="1dp"
  385. android:background="@color/white"
  386. android:padding="10dp" >
  388. <TextView
  389. android:layout_width="wrap_content"
  390. android:layout_height="match_parent"
  391. android:text="光强阈值范围（lx）" />
  393. <TextView
  394. android:id="@+id/tv_data_GQ_AlarmScope"
  395. android:layout_width="110dp"
  396. android:layout_height="wrap_content"
  397. android:layout_alignParentRight="true"
  398. android:textSize="16sp"
  399. android:gravity="end" />
  401. <LinearLayout
  402. android:layout_width="match_parent"
  403. android:layout_height="wrap_content"
  404. android:layout_below="@+id/tv_data_GQ_AlarmScope"
  405. android:layout_marginTop="10dp"
  406. android:gravity="center_vertical"
  407. android:orientation="horizontal" >
  409. <TextView
  410. android:layout_width="wrap_content"
  411. android:layout_height="wrap_content"
  412. android:textSize="16sp"
  413. android:text="0" />
  415. <SeekBar
  417. android:id="@+id/sb_data_GQ_AlarmScope"
  418. android:thumb="@drawable/bar2"
  419. android:thumbOffset="0dp"
  420. android:layout_width="0dp"
  421. android:layout_height="wrap_content"
  422. android:layout_weight="3"
  423. android:max="65535" />
  425. <TextView
  426. android:layout_width="wrap_content"
  427. android:layout_height="wrap_content"
  428. android:textSize="16sp"
  429. android:text="65535" />
  430. </LinearLayout>
  432. </RelativeLayout>
  434. </LinearLayout>
  436. </ScrollView>
  437. </LinearLayout>
  438.  

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

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

原文转载于：https://blog.csdn.net/Zgc6666/article/details/104187111
写原创有奖励！2024面包板原创奖励正在进行中

文章评论（0条评论）

登录后参与讨论
机智云物联网
文章：244 阅读：414675 评论：28 赞：1621
机智云Gizwits智能硬件自助开发及云服务平台，全栈式物联网平台领导者，为智能硬件提供研发－测试－量产－售后等全生命周期服务。开放Api，支持硬件、应用和业务云二次开发，支持主流无线模块，支持任意IaaS的公有云、私有云、混合云全球部署。
好友 私信 个人主页
EE直播间
更多
在线研讨会
更多
我要评论
0
8
关闭 站长推荐上一条 /2 下一条
  • 帖子
  • 博文