Shulou(Shulou.com)06/01 Report--

This article mainly explains "what is the UI transformation method of IoT App in Android". The content of the explanation is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "what is the UI transformation method of IoT App in Android"?

Preparatory work:

The developers of the actual combat camp made IoT App based on the operation guide provided by graffiti, first made a basic smart lamp App, then added their own creativity and hands-on ability, and finally completed a final IoT App dedicated to themselves.

Develop an Android App based on graffiti App SDK and control smart lights

Quickly develop an iOS IoT App based on graffiti App SDK

Process description: (1) App theme background design

1. Startup background:

By changing the ty_pre.png file and modifying the entire startup interface, the main elements of the material are lights and Christmas wreaths, implying that the whole APP is mainly created to control lights and is coordinated with the entire APP function.

2. APP theme background

By replacing the background of the xml file, the entire background is made of Christmas element wallpaper.

3. Equipment interface design

Like the main interface background, the same background design is adopted to reduce the overall abrupt degree.

4. Taskbar element design

The taskbar icon has been redesigned, mainly from the iconfont icon library, and inserted into the default location after related conversion.

5. Sliding bar element design

By modifying the relevant xml files, the whole sliding origin is replaced by the Christmas hat, which reflects the characteristics of the Christmas limit.

6. Light off element design

Change the "lamp" element to "candle element" after turning off the light.

7. Pattern panel element design

The pattern panel, as shown in the picture, also uses Christmas-related colors.

(2) functional design

In terms of functionality, the main change is the addition of the pattern panel, and the main development process is as follows:

First of all, the xml file of the mode panel is created, and then the lamp mode is switched by monitoring the buttons of different modes in the main program.

1. Declaration panel

Declare the panel class.

@ BindView (R.id.fl_lamp_mode_operation) / / declare a pattern operator panel @ public View mModeView

two。 Register keystroke response function

It is mainly the corresponding response function after pressing the key.

@ OnClick (R.id.ll_lamp_mode_goodnight) public void onClickGoodnight () {/ / good night mode @ mLampPresenter.LampGoodnightScene ();} @ OnClick (R.id.ll_lamp_mode_work) public void onClickWork () {/ / good night mode @ mLampPresenter.LampWorkScene () } @ OnClick (R.id.ll_lamp_mode_read) public void onClickRead () {/ / good night mode @ mLampPresenter.LampReadScene ();} @ OnClick (R.id.ll_lamp_mode_casual) public void onClickCasual () {/ / good night mode @ mLampPresenter.LampCasualScene () } @ OnClick (R.id.ll_lamp_work_white) public void onClickWhite () {/ / good night mode @ mLampPresenter.LampWhiteMode ();} @ OnClick (R.id.ll_lamp_work_color) public void onClickColor () {mLampPresenter.LampColorMode () } @ OnClick (R.id.ll_lamp_work_scene) public void onClickScene () {/ / good night mode @ mLampPresenter.LampSceneMode ();}

3. Key function realization

The main purpose is to realize the function of the corresponding key.

/ * Update bulb mode status @ * / 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. Panel switching function

It is used to switch between brightness, cold and warm brightness panel and mode panel.

@ OnClick (R.id.ll_lamp_up_operation) / / @ public void onVClickArrawDown () {AnimationUtil.translateView (mOperationView, 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) / / Hidden mode panel @} @ Override public void onAnimationEnd (Animation animation) {mOperationView.setVisibility (View.VISIBLE) } @ Override public void onAnimationRepeat (Animation animation) {}}) Thank you for your reading. The above is the content of "what is the UI transformation method of IoT App in Android". After the study of this article, I believe you have a deeper understanding of what the UI transformation method of IoT App in Android is, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.