成都创新互联网站制作重庆分公司

Android中IoTApp的UI改造方法是什么

这篇文章主要讲解了“Android中IoT App的UI改造方法是什么”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“Android中IoT App的UI改造方法是什么”吧!

建网站原本是网站策划师、网络程序员、网页设计师等,应用各种网络程序开发技术和网页设计技术配合操作的协同工作。成都创新互联公司专业提供成都网站建设、成都做网站,网页设计,网站制作(企业站、自适应网站建设、电商门户网站)等服务,从网站深度策划、搜索引擎友好度优化到用户体验的提升,我们力求做到极致!

准备工作:

       实战营的开发者们的IoT App制作是基于涂鸦提供的操作指南,先制作了一款基础的智能灯App,然后再加上自己的创意和动手能力,最后完成了一个最后专属于自己的IoT App。

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

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

流程说明:

(一)App主题背景设计

1. 启动背景:

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

Android中IoT App的UI改造方法是什么

2. APP主题背景

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

Android中IoT App的UI改造方法是什么

3. 设备界面设计

同主界面背景一样,采用了同一背景设计,将整体突兀程度降低。

Android中IoT App的UI改造方法是什么

4. 任务栏元素设计

任务栏图标进行了重新设计,图标主要来源是iconfont图标库,进行相关转换后插入到默认位置。

Android中IoT App的UI改造方法是什么

5. 滑动栏元素设计

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

Android中IoT App的UI改造方法是什么

6. 关灯元素设计

将关灯后的“灯”元素改变为“蜡烛元素”。

Android中IoT App的UI改造方法是什么

7. 模式面板元素设计

模式面板如图,也使用了圣诞相关配色。

Android中IoT App的UI改造方法是什么

(二)功能设计

       在功能上,主要的改动就是添加了模式面板,主要开发过程如下:

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

1. 声明面板

声明面板类。

@BindView(R.id.fl_lamp_mode_operation)//声明一个模式操作面板@
    public View mModeView;

2. 注册按键响应函数

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

@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();  
    }

3. 按键函数实现

主要是将对应按键实现的功能进行实现。

 /**
     * 更新灯泡模式状态 @
     */
    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() {
            }
        });
    }

4. 面板切换函数

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

@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) {

                    }
                });
    }

感谢各位的阅读,以上就是“Android中IoT App的UI改造方法是什么”的内容了,经过本文的学习后,相信大家对Android中IoT App的UI改造方法是什么这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是创新互联,小编将为大家推送更多相关知识点的文章,欢迎关注!


网页标题:Android中IoTApp的UI改造方法是什么
URL网址:http://cxhlcq.com/article/jhigjp.html

其他资讯

在线咨询

微信咨询

电话咨询

028-86922220(工作日)

18980820575(7×24)

提交需求

返回顶部