乐趣区

关于sdk:直男审美不存在的来看看-攻城狮对一款IoT-App的UI改造吧

jiezi

人们始终会有一种固有思维，认为绝对于男生，女生更适宜做 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 开发方式为智能家具行业提供了最优的解决方案，同时将宽广开发者从繁冗的劳动中解放出来，可能有更多的工夫去专一于业务的开发。

退出移动版