想了解更多內(nèi)容，請(qǐng)?jiān)L問(wèn)：

51CTO和華為官方合作共建的鴻蒙技術(shù)社區(qū)

https://harmonyos.51cto.com

 現(xiàn)在的智能設(shè)備種類越來(lái)越多，而且這些智能設(shè)備的屏幕尺寸、分辨率都不同，例如，比較常見(jiàn)的智能設(shè)備有手機(jī)、平板電腦、車載電腦、智能電視、智能手表等。盡管這些設(shè)備都有屏幕，但它們的屏幕千差萬(wàn)別，有的屏幕尺寸小，有的屏幕尺寸大，有的是縱向的屏幕，有的是橫向的屏幕，有的帶觸摸功能，有的不帶觸摸功能，甚至有的設(shè)備的屏幕是圓形(如智能手表)，這就給開(kāi)發(fā)App帶來(lái)了麻煩?，F(xiàn)在幾乎每一個(gè)智能設(shè)備廠商，如Apple、華為都面臨這個(gè)問(wèn)題。這就要求我們開(kāi)發(fā)的App盡可能適合更多的智能設(shè)備。

當(dāng)然，最簡(jiǎn)單，最直接的方式是為每一類智能設(shè)備單獨(dú)開(kāi)發(fā)App。例如，為手機(jī)開(kāi)發(fā)一款A(yù)pp，為智能電視開(kāi)發(fā)一款A(yù)pp，為智能手表開(kāi)發(fā)一款A(yù)pp。這么做盡管從技術(shù)上是可行的，但由于這些不同設(shè)備的App，盡管在UI展現(xiàn)上不同，但大多數(shù)邏輯代碼是相同的。如果單獨(dú)為不同的設(shè)備開(kāi)發(fā)App，將會(huì)造成大量的代碼冗余。所以我推薦的方案是讓一個(gè)App同時(shí)適用于不同的智能設(shè)備?；镜脑硎窃贏pp運(yùn)行時(shí)會(huì)自動(dòng)檢測(cè)當(dāng)前的設(shè)備，然后會(huì)執(zhí)行與特定設(shè)備相關(guān)的代碼，使用與特定設(shè)備相關(guān)的布局和資源。

這里的關(guān)鍵點(diǎn)是檢測(cè)當(dāng)前的設(shè)備類型。在創(chuàng)建HarmonyOS工程時(shí)，要么創(chuàng)建TV(華為智慧屏)工程，要么創(chuàng)建Wearable(智能手表)工程，所以使用模板創(chuàng)建的HarmonyOS工程只能在一類設(shè)備(TV或Wearable)中運(yùn)行。讀者可以通過(guò)config.json文件的deviceType屬性查看當(dāng)前工程可以運(yùn)行的設(shè)備類型，如果創(chuàng)建的是TV工程，deviceType屬性的值如下： 

"deviceType": [ "tv" ] 

如果創(chuàng)建的是Wearable工程，deviceType屬性的值如下：

"deviceType": [ "tv" ] 

如果deviceType屬性的值是tv，當(dāng)前工程是不能在智能手表上運(yùn)行的，反之亦然。要想讓當(dāng)前工程同時(shí)在TV和Wearable上運(yùn)行，需要同時(shí)指定tv和wearable(要手動(dòng)修改config.json文件)，配置代碼如下：

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

當(dāng)完成deviceType屬性的設(shè)置后，當(dāng)前工程就可以同時(shí)在TV和Wearable上運(yùn)行了。不過(guò)由于TV和Wearable的屏幕尺寸相差太多，所以布局通常會(huì)采用完全不同的樣式。在HarmonyOS中，可以使用Java語(yǔ)言動(dòng)態(tài)創(chuàng)建組件的方式實(shí)現(xiàn)布局，也可以使用布局文件。關(guān)于布局文件的使用，在后面的文章中會(huì)詳細(xì)介紹。本文主要討論使用Java代碼動(dòng)態(tài)創(chuàng)建組件的布局方式。

在創(chuàng)建的HarmonyOS工程中會(huì)自動(dòng)生成一個(gè)樣例代碼，這些代碼主要集中在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); 
    } 

讀者并不需要對(duì)這段代碼的每一行都了解，只需要知道這段代碼將背景設(shè)為白色，并且在創(chuàng)建了一個(gè)用于顯示文本的Text組件，并且在屏幕中心顯示Hello World。如果在TV設(shè)備上運(yùn)行，效果如圖1所示。不過(guò)這樣以來(lái)，在所有的設(shè)備中的UI都一樣，但我們的目的是讓不同的設(shè)備顯示不同的UI，所以就需要通過(guò)下面的代碼判斷當(dāng)前設(shè)備的類型。

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

其中g(shù)etDeviceType方法返回的值就是App當(dāng)前運(yùn)行設(shè)備的類型。如果運(yùn)行在TV上，值為tv，如果運(yùn)行在智能手表上，值為wearable。所以可以用下面的代碼來(lái)替換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")) {  
          // 運(yùn)行在TV上執(zhí)行的代碼 
            text.setText("華為智慧屏"); 
            text.setTextColor(new Color(0xFFFF0000)); 
            text.setTextSize(200); 
        } else if(DeviceInfo.getDeviceType().equals("wearable")) { 
            // 運(yùn)行在Wearable上執(zhí)行的代碼 
            text.setText("華為智能手表"); 
            text.setTextColor(new Color(0xFF0000FF)); 
            text.setTextSize(50); 
        } 
        text.setTextAlignment(TextAlignment.CENTER); 
        myLayout.addComponent(text); 
        super.setUIContent(myLayout); 
    } 

在這段代碼中，將TV和Wearable上顯示的文本內(nèi)容、文本尺寸和文本顏色做了改變，所以在TV和Wearable上顯示的文本是不同的。在TV上顯示的效果如圖2所示。在Wearable上顯示的效果如圖3所示。

 

圖3 在Wearable上顯示的效果

想了解更多內(nèi)容，請(qǐng)?jiān)L問(wèn)：

51CTO和華為官方合作共建的鴻蒙技術(shù)社區(qū)

https://harmonyos.51cto.com

【編輯推薦】