人们始终会有一种固有思维，认为绝对于男生，女生更适宜做UI设计师，因为她们对色调更加敏感、在理性思维上更有劣势、退职场沟通中能更加晦涩等等等等。更重要的是，绝对于男性，女性的审美观更加趋势饱满。

       然而，在咱们 “涂鸦智能IoT App开发实战营”中，一位开发者针对智能家居App 的UI设计革新，让咱们看到了男性对于浪漫和美的谋求。因为作品提交工夫在12月25号前后，所以整个UI界面的设计都是浓浓的圣诞风。

       话不多说，先上一张比照图（App启动背景图）：

       试想，在某个节日前后，将本人设计的UI界面图更改成相应的格调，再向女神/男神表白，迷信预估，在智慧女神雅典娜和恋情女神阿佛洛狄忒的双重加持下，成功率在99.99%以上！

       来一起看看具体是怎么实现的？

以下内容为涂鸦开发者“@服役熬夜选手”创作，经其受权编辑公布：

筹备工作：

       实战营的开发者们的IoT App制作是基于涂鸦提供的操作指南，先制作了一款根底的智能灯App，而后再加上本人的创意和入手能力，最初实现了一个最初专属于本人的IoT App。

       基于涂鸦 App SDK 开发一款 Android App 并管制智能灯

       基于涂鸦 App SDK 疾速地开发一款 iOS IoT App

流程阐明：

（一）App主题背景设计

  1. 启动背景：

通过更改 ty_pre.png文件，批改整个启动界面，素材的次要元素有灯和圣诞花环，暗示整个APP次要为管制灯而生，与整个APP性能相协调。

  1. APP主题背景

通过将xml文件的背景进行替换，将整个背景采纳圣诞元素壁纸。

  1. 设施界面设计

同主界面背景一样，采纳了同一背景设计，将整体突兀水平升高。

  1. 任务栏元素设计

任务栏图标进行了从新设计，图标次要起源是iconfont图标库，进行相干转换后插入到默认地位。

  1. 滑动栏元素设计

通过批改相干xml文件，将整个滑动的原点替换为了圣诞帽，体现了圣诞节限定的特点。

  1. 关灯元素设计

将关灯后的“灯”元素扭转为“蜡烛元素”。

  1. 模式面板元素设计

模式面板如图，也应用了圣诞相干配色。

（二）功能设计

       在性能上，次要的改变就是增加了模式面板，次要开发过程如下：

首先是新建了模式面板的xml文件，而后在主程序里通过对不同模式按钮的监听，实现了灯模式的切换。

  1. 申明面板

申明面板类。

@BindView(R.id.fl_lamp_mode_operation)//申明一个模式操作面板@    public View mModeView;
  1. 注册按键响应函数

次要是按键按下后对应的响应函数。

@OnClick(R.id.ll_lamp_mode_goodnight)      public void onClickGoodnight() {//晚安模式@         mLampPresenter.LampGoodnightScene();      }        @OnClick(R.id.ll_lamp_mode_work)      public void onClickWork() {//晚安模式@         mLampPresenter.LampWorkScene();      }        @OnClick(R.id.ll_lamp_mode_read)      public void onClickRead() {//晚安模式@         mLampPresenter.LampReadScene();      }        @OnClick(R.id.ll_lamp_mode_casual)      public void onClickCasual() {//晚安模式@         mLampPresenter.LampCasualScene();      }        @OnClick(R.id.ll_lamp_work_white)      public void onClickWhite() {//晚安模式@         mLampPresenter.LampWhiteMode();      }        @OnClick(R.id.ll_lamp_work_color)      public void onClickColor() { mLampPresenter.LampColorMode(); }        @OnClick(R.id.ll_lamp_work_scene)      public void onClickScene() {//晚安模式@         mLampPresenter.LampSceneMode();      }
  1. 按键函数实现

次要是将对应按键实现的性能进行实现。

 /**     * 更新灯泡模式状态 @     */    public void LampGoodnightScene() {         mLightDevice.scene(LightScene.SCENE_GOODNIGHT, new IResultCallback(){             @Override             public void onError(String code, String error) {             }             @Override             public void onSuccess() {             }         });     }    public void LampWorkScene() {        mLightDevice.scene(LightScene.SCENE_WORK, new IResultCallback(){            @Override            public void onError(String code, String error) {            }            @Override            public void onSuccess() {            }        });    }    public void LampReadScene() {        mLightDevice.scene(LightScene.SCENE_READ, new IResultCallback(){            @Override            public void onError(String code, String error) {            }            @Override            public void onSuccess() {            }        });    }    public void LampCasualScene() {        mLightDevice.scene(LightScene.SCENE_CASUAL, new IResultCallback(){            @Override            public void onError(String code, String error) {            }            @Override            public void onSuccess() {            }        });    }    /**    * 灯的工作模式切换@    */    public void LampWhiteMode(){        mLightDevice.workMode(LightMode.MODE_WHITE, new IResultCallback(){            @Override            public void onError(String code, String error) {            }            @Override            public void onSuccess() {            }        });    }    public void LampColorMode(){        mLightDevice.workMode(LightMode.MODE_COLOUR, new IResultCallback(){            @Override            public void onError(String code, String error) {            }            @Override            public void onSuccess() {            }        });    }    public void LampSceneMode(){        mLightDevice.workMode(LightMode.MODE_SCENE, new IResultCallback(){            @Override            public void onError(String code, String error) {            }            @Override            public void onSuccess() {            }        });    }
  1. 面板切换函数

用来实现亮度、冷暖亮度面板和模式面板的切换。

@OnClick(R.id.ll_lamp_up_operation)//@    public void onVClickArrawDown(){        AnimationUtil.translateView(mOperationView, Animation.RELATIVE_TO_SELF, 0f,                Animation.RELATIVE_TO_SELF, 0f,                Animation.RELATIVE_TO_SELF, 0f,                Animation.RELATIVE_TO_SELF, 1f, 300, false, new Animation.AnimationListener() {                    @Override                    public void onAnimationStart(Animation animation) {                        mModeView.setVisibility(View.GONE);//暗藏模式面板 @                    }                    @Override                    public void onAnimationEnd(Animation animation) {                        mOperationView.setVisibility(View.VISIBLE);                    }                    @Override                    public void onAnimationRepeat(Animation animation) {                    }                });    }

OK，以上就是制作的全流程啦~

（三）实际效果演示

咱们来看看实际效果：

【涂鸦智能App SDK开发实战营】优秀作品展现_1

总结

基于安卓App开发零碎的开放性，挪动端迅速倒退，企业开发从传统的PC端开发挪动App。涂鸦智能提供的Demo工程提供了智能家居相干的开发工具包和UI业务包，大大便于开发者和相干企业疾速开发出定制的智能家居App。

作为一名开发者，我深切感触到了涂鸦智能的微小后劲，这种提供根底的App SDK开发方式为智能家具行业提供了最优的解决方案，同时将宽广开发者从繁冗的劳动中解放出来，可能有更多的工夫去专一于业务的开发。