1.5　开发跨设备的HarmonyOS App

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

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

这个方案的关键点是检测当前的设备类型。在创建HarmonyOS工程时，要么创建TV（华为智慧屏）工程，要么创建Wearable（智能手表）工程，要么创建其他设备的工程。也就是说，使用IDE创建的HarmonyOS工程只能在一种特定的设备上运行。要想让App在多种设备上运行，需要设置 config.json文件的deviceType属性，该属性指定了当前工程可以运行的设备类型，如果创建的是TV工程，deviceType属性的值如下：

"deviceType": [
     "tv"
]

如果创建的是Wearable工程，deviceType属性的值如下：

"deviceType": [
     "wearable"
]

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

"deviceType": [
     "tv",
     "wearable"
]

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

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

public void onStart(Intent intent) {
　
       super.onStart(intent);
　
       LayoutConfig config = new LayoutConfig(LayoutConfig.MATCH_PARENT, 
                                              LayoutConfig.MATCH_PARENT);
       myLayout.setLayoutConfig(config);
       ShapeElement element = new ShapeElement();
       element.setRgbColor(new RgbColor(255, 255, 255));
       myLayout.setBackground(element);
       Text text = new Text(this);
       text.setLayoutConfig(config);
       text.setText("Hello World");
       text.setTextColor(new Color(0xFF000000));
       text.setTextSize(50);
       text.setTextAlignment(TextAlignment.CENTER);
       myLayout.addComponent(text);
       super.setUIContent(myLayout);
}

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

if(DeviceInfo.getDeviceType().equals("tv")) {  
   ...
} else if(DeviceInfo.getDeviceType().equals("wearable")) {
   ...
}

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

public void onStart(Intent intent) {
       super.onStart(intent);
       LayoutConfig config = new LayoutConfig(LayoutConfig.MATCH_PARENT, 
                                              LayoutConfig.MATCH_PARENT);
       myLayout.setLayoutConfig(config);
       ShapeElement element = new ShapeElement();
       element.setRgbColor(new RgbColor(255, 255, 255));
       myLayout.setBackground(element);
       Text text = new Text(this);
       text.setLayoutConfig(config);
       if(DeviceInfo.getDeviceType().equals("tv")) {  
           // 运行在TV上的代码
           text.setText("华为智慧屏");
           text.setTextColor(new Color(0xFFFF0000));
           text.setTextSize(200);
       } else if(DeviceInfo.getDeviceType().equals("wearable")) {
           // 运行在Wearable上的代码
           text.setText("华为智能手表");
           text.setTextColor(new Color(0xFF0000FF));
           text.setTextSize(50);
       }
       text.setTextAlignment(TextAlignment.CENTER);
       myLayout.addComponent(text);
       super.setUIContent(myLayout);
   }

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

图1-18　在TV上显示的效果

图1-19　在Wearable上显示的效果