开发跨设备的鸿蒙(HarmonyOS)App

开发 前端 OpenHarmony
现在的智能设备种类越来越多,而且这些智能设备的屏幕尺寸、分辨率都不同,这就给开发App带来了麻烦。现在几乎每一个智能设备厂商,如Apple、华为都面临这个问题。这就要求我们开发的App尽可能适合更多的智能设备。

想了解更多内容,请访问:

51CTO和华为官方合作共建的鸿蒙技术社区

https://harmonyos.51cto.com

 现在的智能设备种类越来越多,而且这些智能设备的屏幕尺寸、分辨率都不同,例如,比较常见的智能设备有手机、平板电脑、车载电脑、智能电视、智能手表等。尽管这些设备都有屏幕,但它们的屏幕千差万别,有的屏幕尺寸小,有的屏幕尺寸大,有的是纵向的屏幕,有的是横向的屏幕,有的带触摸功能,有的不带触摸功能,甚至有的设备的屏幕是圆形(如智能手表),这就给开发App带来了麻烦。现在几乎每一个智能设备厂商,如Apple、华为都面临这个问题。这就要求我们开发的App尽可能适合更多的智能设备。

当然,最简单,最直接的方式是为每一类智能设备单独开发App。例如,为手机开发一款App,为智能电视开发一款App,为智能手表开发一款App。这么做尽管从技术上是可行的,但由于这些不同设备的App,尽管在UI展现上不同,但大多数逻辑代码是相同的。如果单独为不同的设备开发App,将会造成大量的代码冗余。所以我推荐的方案是让一个App同时适用于不同的智能设备。基本的原理是在App运行时会自动检测当前的设备,然后会执行与特定设备相关的代码,使用与特定设备相关的布局和资源。

这里的关键点是检测当前的设备类型。在创建HarmonyOS工程时,要么创建TV(华为智慧屏)工程,要么创建Wearable(智能手表)工程,所以使用模板创建的HarmonyOS工程只能在一类设备(TV或Wearable)中运行。读者可以通过config.json文件的deviceType属性查看当前工程可以运行的设备类型,如果创建的是TV工程,deviceType属性的值如下: 

  1. "deviceType": [ "tv" ] 

如果创建的是Wearable工程,deviceType属性的值如下:

  1. "deviceType": [ "tv" ] 

如果deviceType属性的值是tv,当前工程是不能在智能手表上运行的,反之亦然。要想让当前工程同时在TV和Wearable上运行,需要同时指定tv和wearable(要手动修改config.json文件),配置代码如下:

  1. "deviceType": [ "tv""wearable" ] 

当完成deviceType属性的设置后,当前工程就可以同时在TV和Wearable上运行了。不过由于TV和Wearable的屏幕尺寸相差太多,所以布局通常会采用完全不同的样式。在HarmonyOS中,可以使用Java语言动态创建组件的方式实现布局,也可以使用布局文件。关于布局文件的使用,在后面的文章中会详细介绍。本文主要讨论使用Java代码动态创建组件的布局方式。

在创建的HarmonyOS工程中会自动生成一个样例代码,这些代码主要集中在MainAbilitySlice.java文件中的onStart方法中,代码如下:

  1. public void onStart(Intent intent) { 
  2.  
  3.         super.onStart(intent); 
  4.   
  5.         LayoutConfig config = new LayoutConfig(LayoutConfig.MATCH_PARENT, 
  6.                                                        LayoutConfig.MATCH_PARENT); 
  7.         myLayout.setLayoutConfig(config); 
  8.         ShapeElement element = new ShapeElement(); 
  9.         element.setRgbColor(new RgbColor(255, 255, 255)); 
  10.         myLayout.setBackground(element); 
  11.         Text text = new Text(this); 
  12.         text.setLayoutConfig(config); 
  13.        text.setText("Hello World"); 
  14.        text.setTextColor(new Color(0xFF000000)); 
  15.         text.setTextSize(50); 
  16.         text.setTextAlignment(TextAlignment.CENTER); 
  17.         myLayout.addComponent(text); 
  18.         super.setUIContent(myLayout); 
  19.     } 

读者并不需要对这段代码的每一行都了解,只需要知道这段代码将背景设为白色,并且在创建了一个用于显示文本的Text组件,并且在屏幕中心显示Hello World。如果在TV设备上运行,效果如图1所示。不过这样以来,在所有的设备中的UI都一样,但我们的目的是让不同的设备显示不同的UI,所以就需要通过下面的代码判断当前设备的类型。

  1. if(DeviceInfo.getDeviceType().equals("tv")) {  
  2.     ... ... 
  3. else if(DeviceInfo.getDeviceType().equals("wearable")) { 
  4.     ... ... 

 

其中getDeviceType方法返回的值就是App当前运行设备的类型。如果运行在TV上,值为tv,如果运行在智能手表上,值为wearable。所以可以用下面的代码来替换onStart方法中的代码。

  1. public void onStart(Intent intent) { 
  2.         super.onStart(intent); 
  3.         LayoutConfig config = new LayoutConfig(LayoutConfig.MATCH_PARENT, 
  4.                                                        LayoutConfig.MATCH_PARENT); 
  5.         myLayout.setLayoutConfig(config); 
  6.         ShapeElement element = new ShapeElement(); 
  7.         element.setRgbColor(new RgbColor(255, 255, 255)); 
  8.         myLayout.setBackground(element); 
  9.         Text text = new Text(this); 
  10.         text.setLayoutConfig(config); 
  11.         if(DeviceInfo.getDeviceType().equals("tv")) {  
  12.           // 运行在TV上执行的代码 
  13.             text.setText("华为智慧屏"); 
  14.             text.setTextColor(new Color(0xFFFF0000)); 
  15.             text.setTextSize(200); 
  16.         } else if(DeviceInfo.getDeviceType().equals("wearable")) { 
  17.             // 运行在Wearable上执行的代码 
  18.             text.setText("华为智能手表"); 
  19.             text.setTextColor(new Color(0xFF0000FF)); 
  20.             text.setTextSize(50); 
  21.         } 
  22.         text.setTextAlignment(TextAlignment.CENTER); 
  23.         myLayout.addComponent(text); 
  24.         super.setUIContent(myLayout); 
  25.     } 

在这段代码中,将TV和Wearable上显示的文本内容、文本尺寸和文本颜色做了改变,所以在TV和Wearable上显示的文本是不同的。在TV上显示的效果如图2所示。在Wearable上显示的效果如图3所示。

 

图2 在TV上显示的效果 
 

图3 在Wearable上显示的效果

想了解更多内容,请访问:

51CTO和华为官方合作共建的鸿蒙技术社区

https://harmonyos.51cto.com

【编辑推荐】

 

责任编辑:jianghua 来源: 鸿蒙社区
相关推荐

2021-01-06 11:21:56

鸿蒙HarmonyOS应用开发

2021-06-16 15:18:03

鸿蒙HarmonyOS应用

2021-01-14 09:50:26

鸿蒙HarmonyOSAPP

2021-02-03 09:59:02

鸿蒙HarmonyOS应用开发

2021-06-23 15:48:08

鸿蒙HarmonyOS应用

2022-11-18 15:42:36

2021-01-06 10:59:14

鸿蒙HarmonyOSPage Abilit

2021-07-08 09:42:04

鸿蒙HarmonyOS应用

2022-05-19 15:40:37

配网开发设备开发

2020-11-11 11:56:05

HarmonyOS

2020-11-09 11:56:49

HarmonyOS

2021-01-11 11:36:23

鸿蒙HarmonyOSApp开发

2021-03-23 09:52:39

鸿蒙HarmonyOS应用开发

2021-01-18 13:17:04

鸿蒙HarmonyOSAPP

2021-06-24 09:32:00

鸿蒙HarmonyOS应用

2020-10-15 09:49:45

HarmonyOS 2设备开发

2020-09-28 15:13:04

鸿蒙

2022-05-18 16:17:31

设备开发鸿蒙

2022-05-06 15:38:21

鸿蒙App开发技术

2022-08-06 08:34:04

京东App适配技术栈
点赞
收藏

51CTO技术栈公众号