本帖最后由 夏天罂粟 于 2016-8-31 01:07 编辑
六、APP界面UI部分
(1)登陆界面,取名智能温控器。 还有一个小绿叶,。
登陆界面
(2)控制界面
主要模式切换,温度调整、风速调节和面板锁定。
控制界面
绿色代表环保。
七、智能温控器APP设计
(1) 环境搭建 官方提供APP源码是基于Eclipse版本,发现ANDROID Studio 2非常强大,谷歌的确很厉害,就想法设法把源码导入到AS2里,最后发现开发APP还是很方便的。借助机智云的帮助文档,请教了同事,自己再捣鼓,期间遇到了不少问题,最后解决了。 本人提供Gokit2源码,无需再花费精力导入了,有问题欢迎指出来。
(2) 程序结构 用户只对界面编写和提供APP必要信息,一个简单APP就完成了。
APP结构图
(3) 添加APP必要信息 在\java\com\gizwits\openSource\CommonModule\GosConstant.java文件中修改自己在 // 在机智云开发者账号下申请的App_ID
public static final String App_ID ="6a790993c68c4ca1a35542c3da5fa4dd";
// 在机智云开发者账号下申请的App_Screct(必须与上述App_ID对应)
public static final String App_Screct = "05948ea8c30f47b7aa021b7d26e10ddd";
// 在机智云开发者账号下创建的产品ProductKey public static final String device_ProductKey = "164286c6b98a4ff3bfc2e934d5c2bfdd";
(4) APP的UI
代码结构
将做好的界面切图,生成PNG格式,保存在drawable-xhdpi文件夹中。 然后在layout中编写界面,格式xml。
(5) 如果是简单的界面,可以直接用Design界面进行拖拉。 如果比较复杂,在text中编写,一般新手会在这儿费力气,建议先学习一下格式,我也花费不少时间。这个地方Android Studio优势就明显了,无需运行就能看到界面。
界面编写
就说明一下智能按钮(雪花),这是一个图片,没有搞多复杂。<ImageView
android:id="@+id/mode_cool" // ID名称 JAVA代码中需要用到
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:src="@drawable/cool"/> // 图片名称,保存在drawable-xhdpi文件夹中
(6) 程序实现 就拿Gokit源码中\ControlModule\GosDeviceControlActivity.java进行了修改 举个简单按钮,按键制冷模式。 在初始化initViews()里对按键进行初始化,
modeCool = (ImageView) findViewById(R.id.mode_cool);
在初始化事件里initEvents()对按键进行监听
modeCool.setOnClickListener(new OnClickListener() { @Override
public void onClick(View v) {
try {
sendJson(KEY_MODE, 0); //发送数据到机智云
modeSet.setText("制冷");
} catch (JSONException e) {
e.printStackTrace(); }
}
});
这样按键功能就实现了。 如果需要更新按键状态,handler里case UPDATE_UI:增加对某个要刷新数据。 Handler handler = new Handler() {
(7) 关于调试 可以利用机智云的虚拟设备进行调试APP,这个是非常方便的。硬件没有问题了,再进行联调,这样好确定问题点在哪儿。 APP要写东西太多了,我只能简单写写。如果有什么新体会后面再补充。
|