現(xiàn)在的智能設(shè)備種類越來越多,而且這些智能設(shè)備的屏幕尺寸、分辨率都不同,例如,比較常見的智能設(shè)備有手機、平板電腦、車載電腦、智能電視、智能手表等。盡管這些設(shè)備都有屏幕,但它們的屏幕千差萬別,有的屏幕尺寸小,有的屏幕尺寸大,有的是縱向的屏幕,有的是橫向的屏幕,有的帶觸摸功能,有的不帶觸摸功能,甚至有的設(shè)備的屏幕是圓形(如智能手表),這就給開發(fā)App帶來了麻煩?,F(xiàn)在幾乎每一個智能設(shè)備廠商,如Apple、華為都面臨這個問題。這就要求我們開發(fā)的App盡可能適合更多的智能設(shè)備。
當(dāng)然,最簡單,最直接的方式是為每一類智能設(shè)備單獨開發(fā)App。例如,為手機開發(fā)一款A(yù)pp,為智能電視開發(fā)一款A(yù)pp,為智能手表開發(fā)一款A(yù)pp。這么做盡管從技術(shù)上是可行的,但由于這些不同設(shè)備的App,盡管在UI展現(xiàn)上不同,但大多數(shù)邏輯代碼是相同的。如果單獨為不同的設(shè)備開發(fā)App,將會造成大量的代碼冗余。所以我推薦的方案是讓一個App同時適用于不同的智能設(shè)備。基本的原理是在App運行時會自動檢測當(dāng)前的設(shè)備,然后會執(zhí)行與特定設(shè)備相關(guān)的代碼,使用與特定設(shè)備相關(guān)的布局和資源。
這里的關(guān)鍵點是檢測當(dāng)前的設(shè)備類型。在創(chuàng)建HarmonyOS工程時,要么創(chuàng)建TV(華為智慧屏)工程,要么創(chuàng)建Wearable(智能手表)工程,所以使用模板創(chuàng)建的HarmonyOS工程只能在一類設(shè)備(TV或Wearable)中運行。讀者可以通過config.json文件的deviceType屬性查看當(dāng)前工程可以運行的設(shè)備類型,如果創(chuàng)建的是TV工程,deviceType屬性的值如下:
"deviceType": [ "tv" ]
如果創(chuàng)建的是Wearable工程,deviceType屬性的值如下:
"deviceType": [ "tv" ]
如果deviceType屬性的值是tv,當(dāng)前工程是不能在智能手表上運行的,反之亦然。要想讓當(dāng)前工程同時在TV和Wearable上運行,需要同時指定tv和wearable(要手動修改config.json文件),配置代碼如下:
"deviceType": [ "tv", "wearable" ]
當(dāng)完成deviceType屬性的設(shè)置后,當(dāng)前工程就可以同時在TV和Wearable上運行了。不過由于TV和Wearable的屏幕尺寸相差太多,所以布局通常會采用完全不同的樣式。在HarmonyOS中,可以使用Java語言動態(tài)創(chuàng)建組件的方式實現(xiàn)布局,也可以使用布局文件。關(guān)于布局文件的使用,在后面的文章中會詳細(xì)介紹。本文主要討論使用Java代碼動態(tài)創(chuàng)建組件的布局方式。
在創(chuàng)建的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); }
讀者并不需要對這段代碼的每一行都了解,只需要知道這段代碼將背景設(shè)為白色,并且在創(chuàng)建了一個用于顯示文本的Text組件,并且在屏幕中心顯示Hello World。如果在TV設(shè)備上運行,效果如圖1所示。不過這樣以來,在所有的設(shè)備中的UI都一樣,但我們的目的是讓不同的設(shè)備顯示不同的UI,所以就需要通過下面的代碼判斷當(dāng)前設(shè)備的類型。
if(DeviceInfo.getDeviceType().equals("tv")) { ... ... } else if(DeviceInfo.getDeviceType().equals("wearable")) { ... ... }
其中g(shù)etDeviceType方法返回的值就是App當(dāng)前運行設(shè)備的類型。如果運行在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上執(zhí)行的代碼 text.setText("華為智慧屏"); text.setTextColor(new Color(0xFFFF0000)); text.setTextSize(200); } else if(DeviceInfo.getDeviceType().equals("wearable")) { // 運行在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所示。
圖2 在TV上顯示的效果
圖3 在Wearable上顯示的效果
編輯:hfy
-
智能手表
+關(guān)注
關(guān)注
36文章
3259瀏覽量
112983 -
智慧屏
+關(guān)注
關(guān)注
2文章
354瀏覽量
19643 -
HarmonyOS
+關(guān)注
關(guān)注
79文章
1949瀏覽量
29760
發(fā)布評論請先 登錄
相關(guān)推薦
評論