diff --git a/README.en.md b/README.en.md index c982f453e6f638cc9088dfe624ec1feb9325ee7c..8219c33210a7e8535ce004419b916ebe2892a971 100644 --- a/README.en.md +++ b/README.en.md @@ -6,7 +6,7 @@ Learn to implement an instant messaging app based on the adaptive layout and res #### Description -This codelab implements an instant messaging app based on the adaptive layout and responsive layout, achieving one-time development for multi-device deployment. It uses the three-layer project architecture for code reuse and tailors the pages to different device sizes such as mobile phones, foldable phones, and PC/2-in-1 devices. +This codelab implements an instant messaging app based on the adaptive layout and responsive layout, achieving one-time development for multi-device deployment. It uses the three-layer project architecture for code reuse and tailors the pages to different device sizes such as mobile phones, foldable phones, and table devices. The following figure shows the effect on the mobile phone: ![](screenshots/device/phone_EN.png) @@ -15,7 +15,7 @@ The following figure shows the effect on the foldable phone in unfolded state: ![](screenshots/device/foldable_EN.png) -The following figure shows the effect on the PC/2-in-1 device: +The following figure shows the effect on the table device: ![](screenshots/device/pad_EN.png) diff --git a/README.md b/README.md index cb2a0764140872a7986bf1ad7586b174604d1ef3..e6cd662c68700dc031f1951fd25510b4b09ecf27 100755 --- a/README.md +++ b/README.md @@ -6,7 +6,7 @@ #### 介绍 -本篇Codelab基于自适应布局和响应式布局,实现一次开发,多端部署的即时通讯页面。通过“三层工程架构”实现代码复用,并根据手机、折叠屏以及PC/2in1不同的设备尺寸设计对应页面。 +本篇Codelab基于自适应布局和响应式布局,实现一次开发,多端部署的即时通讯页面。通过“三层工程架构”实现代码复用,并根据手机、折叠屏以及平板不同的设备尺寸设计对应页面。 手机效果如图所示: ![](screenshots/device/phone.png) @@ -15,7 +15,7 @@ ![](screenshots/device/foldable.png) -PC/2in1效果如图所示: +平板效果如图所示: ![](screenshots/device/pad.png) diff --git a/common/base/src/main/ets/constants/BaseConstants.ets b/common/base/src/main/ets/constants/BaseConstants.ets index d7dce33da87f0b6b373920439423cd4bb92238cd..df5bdc899477521f0da7d8fd9f537083477b4894 100755 --- a/common/base/src/main/ets/constants/BaseConstants.ets +++ b/common/base/src/main/ets/constants/BaseConstants.ets @@ -104,9 +104,9 @@ export class BaseConstants { static readonly DEVICE_GRID_COLUMNS: string[] = ['1fr 1fr', '1fr 1fr 1fr', '1fr 1fr 1fr 1fr', '1fr 1fr 1fr 1fr 1fr', '1fr 1fr 1fr 1fr 1fr 1fr 1fr']; /** - * Device PC/2in1. + * Device tablet. */ - static readonly DEVICE_2IN1: string = '2in1'; + static readonly DEVICE_TABLET: string = 'tablet'; } /** @@ -130,6 +130,5 @@ export enum CurrentPage { export enum DeviceTypes { PHONE = 'phone', - TABLET = 'tablet', - "2IN1" = '2in1', + TABLET = 'tablet' } \ No newline at end of file diff --git a/common/base/src/main/module.json5 b/common/base/src/main/module.json5 index 169b18e9b265f521951c77c33ba87674aad045ec..d0ded38ffc86a430d725566905d7b863afcd0d01 100755 --- a/common/base/src/main/module.json5 +++ b/common/base/src/main/module.json5 @@ -4,8 +4,7 @@ "type": "har", "deviceTypes": [ "phone", - "tablet", - "2in1" + "tablet" ] } } \ No newline at end of file diff --git a/features/home/src/main/ets/pages/ContactsDetail.ets b/features/home/src/main/ets/pages/ContactsDetail.ets index f1bf0da002c8a7d3bc7f4118ff9966b0d23fc64a..6393a5e67006277075109735be70452e80524aa9 100755 --- a/features/home/src/main/ets/pages/ContactsDetail.ets +++ b/features/home/src/main/ets/pages/ContactsDetail.ets @@ -45,7 +45,7 @@ export struct ContactsDetail { .height(BaseConstants.FULL_HEIGHT) .backgroundColor($r('app.color.background_color_pink')) .padding({ - top: deviceInfo.deviceType === BaseConstants.DEVICE_2IN1 ? $r('app.float.zero') : $r('app.float.device_padding_top') + top: deviceInfo.deviceType === BaseConstants.DEVICE_TABLET ? $r('app.float.zero') : $r('app.float.device_padding_top') }) Image(this.currentContactUserIcon) diff --git a/features/home/src/main/ets/pages/ConversationDetail.ets b/features/home/src/main/ets/pages/ConversationDetail.ets index 2b221030f14694cc16433dbd9f577cf6b13b956e..1073c6651321b48b74e2d803cb3cacdd6773af19 100755 --- a/features/home/src/main/ets/pages/ConversationDetail.ets +++ b/features/home/src/main/ets/pages/ConversationDetail.ets @@ -58,7 +58,7 @@ export struct ConversationDetail { .width('100%') .backgroundColor($r('app.color.background_color_grey')) .padding({ - bottom: deviceInfo.deviceType !== '2in1' ? '28vp' : '0vp' + bottom: deviceInfo.deviceType !== 'tablet' ? '28vp' : '0vp' }) } .hideTitleBar(true) diff --git a/features/home/src/main/ets/pages/ConversationList.ets b/features/home/src/main/ets/pages/ConversationList.ets index 73aac46587455109c9535555b7d3c64a83d87248..f7631be785aa65b1b36c4ab62fb7fce8581ae743 100755 --- a/features/home/src/main/ets/pages/ConversationList.ets +++ b/features/home/src/main/ets/pages/ConversationList.ets @@ -54,7 +54,7 @@ export struct ConversationList { } // [End conversation_list] .padding({ - bottom: deviceInfo.deviceType !== '2in1' && this.currentBreakpoint === 'lg' ? '28vp' : '0vp' + bottom: deviceInfo.deviceType !== 'tablet' && this.currentBreakpoint === 'lg' ? '28vp' : '0vp' }) .backgroundColor(Color.White) .width('100%') diff --git a/features/home/src/main/ets/pages/Index.ets b/features/home/src/main/ets/pages/Index.ets index 8e2e63f7ed930d2d9eef1196cd18f7d6f05ca4d7..eeab41808b3e7eb249429688674d49ef20bcb70e 100755 --- a/features/home/src/main/ets/pages/Index.ets +++ b/features/home/src/main/ets/pages/Index.ets @@ -93,7 +93,7 @@ export struct Index { .visibility(this.currentBreakpoint !== 'lg' ? Visibility.Visible : Visibility.None) } .padding({ - bottom: deviceInfo.deviceType !== '2in1' && this.currentBreakpoint !== 'lg' ? '28vp' : '0vp' + bottom: deviceInfo.deviceType !== 'tablet' && this.currentBreakpoint !== 'lg' ? '28vp' : '0vp' }) .height('100%') } else if (this.currentPageIndex === 1) { @@ -112,7 +112,7 @@ export struct Index { } .height('100%') .padding({ - bottom: deviceInfo.deviceType !== '2in1' && this.currentBreakpoint !== 'lg' ? '28vp' : '0vp' + bottom: deviceInfo.deviceType !== 'tablet' && this.currentBreakpoint !== 'lg' ? '28vp' : '0vp' }) } } @@ -177,8 +177,8 @@ export struct Index { .visibility(this.currentPageIndex === CurrentPage.ME && this.currentBreakpoint !== 'lg' ? Visibility.Visible : Visibility.None) .padding({ - top: deviceInfo.deviceType === '2in1' ? $r('app.float.zero') : $r('app.float.device_padding_top'), - bottom: deviceInfo.deviceType !== '2in1' + top: deviceInfo.deviceType === 'tablet' ? $r('app.float.zero') : $r('app.float.device_padding_top'), + bottom: deviceInfo.deviceType !== 'tablet' && this.currentBreakpoint !== 'lg' ? $r('app.float.tab_content_pb') : $r('app.float.zero') }) diff --git a/features/home/src/main/ets/views/Conversation/ConversationDetailNone.ets b/features/home/src/main/ets/views/Conversation/ConversationDetailNone.ets index f8c0bec2efc851ce9bda962a4af5d7f69ba1f626..6c9d751cd388ecb03662d8985cdac37819929ef4 100755 --- a/features/home/src/main/ets/views/Conversation/ConversationDetailNone.ets +++ b/features/home/src/main/ets/views/Conversation/ConversationDetailNone.ets @@ -29,7 +29,7 @@ export default struct ConversationDetailNone { .height(BaseConstants.FULL_HEIGHT) } .padding({ - top: deviceInfo.deviceType === BaseConstants.DEVICE_2IN1 ? $r('app.float.zero') : $r('app.float.device_padding_top') + top: deviceInfo.deviceType === BaseConstants.DEVICE_TABLET ? $r('app.float.zero') : $r('app.float.device_padding_top') }) .hideTitleBar(true) } diff --git a/features/home/src/main/ets/views/Conversation/ConversationDetailTopSearch.ets b/features/home/src/main/ets/views/Conversation/ConversationDetailTopSearch.ets index a971d280636968d3b662cf228b33629f4d482a91..33e60f4f075b29e79f5fc32e28201f34395ee272 100755 --- a/features/home/src/main/ets/views/Conversation/ConversationDetailTopSearch.ets +++ b/features/home/src/main/ets/views/Conversation/ConversationDetailTopSearch.ets @@ -46,6 +46,6 @@ export struct ConversationDetailTopSearch { } .width(BaseConstants.FULL_WIDTH) .height(BaseConstants.FULL_HEIGHT) - .padding({ left: $r('app.float.icon_margin_two'), right: $r('app.float.icon_margin_two'),top: deviceInfo.deviceType === BaseConstants.DEVICE_2IN1 ? $r('app.float.zero') : $r('app.float.device_padding_top') }) + .padding({ left: $r('app.float.icon_margin_two'), right: $r('app.float.icon_margin_two'),top: deviceInfo.deviceType === BaseConstants.DEVICE_TABLET ? $r('app.float.zero') : $r('app.float.device_padding_top') }) } } \ No newline at end of file diff --git a/features/home/src/main/ets/views/common/HomeTopSearch.ets b/features/home/src/main/ets/views/common/HomeTopSearch.ets index 2fe1d6568f691a0a23881da12570099acc7f0cab..9355e0ae08c56155d41ff92d328ee5c7b195fd6f 100755 --- a/features/home/src/main/ets/views/common/HomeTopSearch.ets +++ b/features/home/src/main/ets/views/common/HomeTopSearch.ets @@ -53,7 +53,7 @@ export struct HomeTopSearch { .width(BaseConstants.FULL_WIDTH) .height(BaseConstants.FULL_HEIGHT) .backgroundColor(Color.White) - .padding({ left: $r('app.float.phone_icon_left'),top: deviceInfo.deviceType === BaseConstants.DEVICE_2IN1 ? $r('app.float.zero') : $r('app.float.device_padding_top') }) + .padding({ left: $r('app.float.phone_icon_left'),top: deviceInfo.deviceType === BaseConstants.DEVICE_TABLET ? $r('app.float.zero') : $r('app.float.device_padding_top') }) } @Builder diff --git a/features/home/src/main/module.json5 b/features/home/src/main/module.json5 index 47487405487ece67429275a897d5fc2494b81718..d734380faa6a6533d0ba6106e1f0872e6d2582f4 100755 --- a/features/home/src/main/module.json5 +++ b/features/home/src/main/module.json5 @@ -4,8 +4,7 @@ "type": "har", "deviceTypes": [ "phone", - "tablet", - "2in1" + "tablet" ] } } \ No newline at end of file diff --git a/features/socialCircle/src/main/ets/pages/Index.ets b/features/socialCircle/src/main/ets/pages/Index.ets index 847557667bbdbca3de0efb895daefec322b5c7c1..109a64b04386d47ee3090f12cf0c3270e4148ada 100755 --- a/features/socialCircle/src/main/ets/pages/Index.ets +++ b/features/socialCircle/src/main/ets/pages/Index.ets @@ -55,7 +55,7 @@ export struct SocialCircle { .height(BaseConstants.FULL_HEIGHT) .width(BaseConstants.FULL_WIDTH) .padding({ - top: deviceInfo.deviceType === BaseConstants.DEVICE_2IN1 ? $r('app.float.zero') : $r('app.float.device_padding_top') + top: deviceInfo.deviceType === BaseConstants.DEVICE_TABLET ? $r('app.float.zero') : $r('app.float.device_padding_top') }) } diff --git a/features/socialCircle/src/main/module.json5 b/features/socialCircle/src/main/module.json5 index e8d301a9fd04d05a5e70af73cd06d7a62caa9066..1002c4a82de87debe7431a743904aedbb7b5292d 100755 --- a/features/socialCircle/src/main/module.json5 +++ b/features/socialCircle/src/main/module.json5 @@ -4,8 +4,7 @@ "type": "har", "deviceTypes": [ "phone", - "tablet", - "2in1" + "tablet" ] } } \ No newline at end of file diff --git a/products/phone/build-profile.json5 b/products/phone/build-profile.json5 index 49ebe7ab944255c4c36956313f168bd3f52fb06e..883adbbc36b4bfe92165330e0a60ad8c23d13651 100755 --- a/products/phone/build-profile.json5 +++ b/products/phone/build-profile.json5 @@ -27,8 +27,7 @@ "config": { "deviceType": [ "phone", - "tablet", - "2in1" + "tablet" ] }, "source": { diff --git a/products/phone/src/main/ets/entryability/EntryAbility.ets b/products/phone/src/main/ets/entryability/EntryAbility.ets index 818263ac2f9b4e4e2b79cbd8219ecce156503df0..59e9d19ac85d8795b1d6124927912b8fab423482 100755 --- a/products/phone/src/main/ets/entryability/EntryAbility.ets +++ b/products/phone/src/main/ets/entryability/EntryAbility.ets @@ -44,7 +44,7 @@ export default class EntryAbility extends UIAbility { hilog.info(0x0000, 'testTag', '%{public}s', 'getMainWindow failed'); return; } - if (deviceInfo.deviceType !== BaseConstants.DEVICE_2IN1) { + if (deviceInfo.deviceType !== BaseConstants.DEVICE_TABLET) { data.setWindowLayoutFullScreen(true); } }) diff --git a/products/phone/src/main/module.json5 b/products/phone/src/main/module.json5 index 8e3d8876cef7886c8fabea3b30f49dd44c6d709a..756223cee061a94bf07bce6194940bc4544fae80 100755 --- a/products/phone/src/main/module.json5 +++ b/products/phone/src/main/module.json5 @@ -6,8 +6,7 @@ "mainElement": "EntryAbility", "deviceTypes": [ "phone", - "tablet", - "2in1" + "tablet" ], "deliveryWithInstall": true, "installationFree": false,