如何快速开发一个简单好看的APP控制页面
机智云开源框架为了让开发者快速开发APP，已将用户登录，设备发现，设备配网等功能做成了各个标准模块，仅保留控制页面让开发者自行开发设计，节省了开发者的时间。本章节，将示例如何快速开发一个简单好看的控制页面。[ 1、了解机智云开源框架]在开发一个简单好看的APP控制页面前，先来了解一下机智云开源框架包里面都有些什么？首先，下载一个Andriod版本的机智云开源框架包，并用Eclipse打开后，将Package Presentation设置为Hierarchical，此时可以清晰的看到整个工程的目录结构，如下图所示：http://5b0988e595225.cdn.sohucs.com/images/20190627/2fd344d8f1cc4cc58d29bd77a90cf7af.jpeg机智云开源框架将每一个模块都独立为Package， Package与Package之间进行最大程度解耦。在开发过程中，如果想删除某一功能，比如不想使用第三方登录，则可以直接将“ThirdAccountModule”包直接删除即可，不会对其他包产生影响。再来了解一下UIConfig.json文件中的一些参数在上面所列的文件中。assets目录下的UIConfig.json文件是一个全局配置文件，在这里可以设置工程的配置信息，逐一介绍：[*]app_id：机智云 app id
[*]app_secret：机智云 app secret
[*]product_key：机智云 product key
[*]wifi_type_select：默认配置模块wifi模组选择功能是否开启
[*]tencent_app_id：qq登录 app id
[*]wechat_app_id：微信登录 app id
[*]wechat_app_secret：微信登录 app secret
[*]push_type：推送类型 【0：关闭，1：极光，2：百度】
[*]bpush_app_key：百度推送 app key
[*]openAPI_URL：openAPI 域名及端口，格式：“api.gizwits.com:80”，不写端口默认80
[*]site_URL：site 域名及端口，格式：“site.gizwits.com:80”，不写端口默认80
[*]push_URL：推送绑定服务器 域名及端口，格式：“push.gizwits.com:80”，不写端口默认80
[*]buttonColor：按钮颜色
[*]buttonTextColor：按钮文字颜色
[*]navigationBarColor：导航栏颜色
[*]navigationBarTextColor：导航栏文字颜色
[*]configProgressViewColor：配置中界面 progress view 颜色
[*]addDeviceTitle：添加设备界面 导航栏标题文字
[*]qq：是否打开QQ登录【true：打开】
[*]wechat：是否打开微信登录【true：打开】
[*]anonymousLogin：是否打开匿名登录【true：打开】
在机智云官网上分别找到产品的Product Key、App ID与App Secret分别填入json文件中对应的位置，如下图所示：http://5b0988e595225.cdn.sohucs.com/images/20190627/a9d7fa0eaa184c508f3837a421587ee8.jpeg正确填写Product Key、App ID与App Secret后，工程就可以部署运行了http://5b0988e595225.cdn.sohucs.com/images/20190627/090e839d6fc9453abd3f4623ac1ce9ae.jpeg[ 2、什么是控制页面]点击下面左图上的“智能灯”，可进入到右图所示界面，右图所示为“控制界面”。进入控制页面，可以发现，控制页面为一个空白的页面。机智云开源框架为了让开发者快速开发APP，已将用户登录，设备发现，设备配网等功能做成了各个标准模块，仅保留控制页面让开发者自行开发设计，节省了开发者的时间。http://5b0988e595225.cdn.sohucs.com/images/20190627/e0cc91fa56704cc7819a75d035be188e.jpeg接下来进入正文[ 3、快速开发一个简单好看的控制页面]1. 控制页面代码预览依次打开ControlModule -> GosDeviceControlActivity.java，可以看到，整个控制页面非常简单，就只有一个TextView将设备的mac地址显示出来。http://5b0988e595225.cdn.sohucs.com/images/20190627/896079698aec46468e0154f422c239f4.jpeg2. 页面UI设计根据创建的产品“智能灯”，想实现的UI效果如下：http://5b0988e595225.cdn.sohucs.com/images/20190627/c92e625bebf84bbba14156923842d207.jpeg点击页面中间灯的控件，APP下发命令，控制灯的开关，并将灯的图片显示为开启状态。关闭的时候显示为关闭。3. 页面布局代码开发http://5b0988e595225.cdn.sohucs.com/images/20190627/404c7cae2b92419ca53c82737151003b.jpeg将表示智能灯开关状态的图片拷贝到drawable目录下，如下图所示：http://5b0988e595225.cdn.sohucs.com/images/20190627/a8a853a3f340400392c136030ec1ae89.jpeg添加Button控件1）打开控制页面对应的布局文件“activity_gos_device_control.xml”http://5b0988e595225.cdn.sohucs.com/images/20190627/5e8f56e6df0b485886b43dec91fa3923.jpeg2）添加Button控件如图所示，将控制页面中多余控件删除，添加一个Button控件http://5b0988e595225.cdn.sohucs.com/images/20190627/12d4efc7cead45df883b62f007a4fd51.jpeg3）使用selector来对Button控件背景进行控制在drawable文件夹下新建一个selector文件，如图所示：http://5b0988e595225.cdn.sohucs.com/images/20190627/f9d313cb7e8241788ef5ce6ed73369f6.jpeg在btn_light_onoff_selector.xml添加背景切换代码：http://5b0988e595225.cdn.sohucs.com/images/20190627/a0b6111cfc0d4d558ee636511162930e.jpeg
<?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android"><!-- 选中状态的背景图片 --><item android:drawable="@drawable/light_on" android:state_selected="true"/><!-- 未选中状态的背景图片 --><item android:drawable="@drawable/light_off"/></selector>
4）将Button控件的背景设置为btn_light_onoff_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:gravity="center"android:orientation="vertical" ><Buttonandroid:id="@+id/btn_light_onoff"android:layout_width="wrap_content"android:layout_height="wrap_content"android:background="@drawable/btn_light_onoff_selector"/></LinearLayout>
4. 控制逻辑代码开发 4.1.编写控制页面代码下图为该产品在云端创建的数据点。http://5b0988e595225.cdn.sohucs.com/images/20190627/a22557ec43c14ee5b3f35d8d079c1014.png整个GosDeviceControlActivity的参考代码如下：略， 阅读原文可查看代码细节或打开连接查看docs.gizwits.com/zh-cn/quickstart/AndroidAppFrame.html4.2. 部署调试完成上述代码编写之后，就可以部署到手机中测试控制结果了。下发命令如图所示，APP部署到手机上后，进入到控制页面，如下图所示：http://5b0988e595225.cdn.sohucs.com/images/20190627/48c7290f383944f9948f006eecaf5e1d.png点击app中灯的图标，APP将下发控制命令，此时APP的按钮图标将变为开灯状态。http://5b0988e595225.cdn.sohucs.com/images/20190627/f5a49d14ae514c9f9605281b7dd82149.png此时可以在云端虚拟设备的通信日志中看到app下发的控制命令，如下图：http://5b0988e595225.cdn.sohucs.com/images/20190627/97c737c0fa084dca9f9cb733b81f1099.jpeg设备主动上报数据如图所示，在虚拟设备中，将开关的值改为“0”，点击下面的推送，此时可以看到通信日志中会有一条记录“虚拟设备上报数据”，表示设备上报数据成功了。http://5b0988e595225.cdn.sohucs.com/images/20190627/e210820547ed4e299d7db05f01ae1006.jpeg此时APP的控制页面中，灯的按钮马上变成了关灯状态，表示APP成功收到了设备的上报数据。http://5b0988e595225.cdn.sohucs.com/images/20190627/e61eec9ded1b4114bd4db1b5e1d7fd1e.png
页:
[1]