diff --git a/README.en.md b/README.en.md new file mode 100644 index 0000000000000000000000000000000000000000..47448f89c457ff4e3a8f755e95ef532c2abfd39a --- /dev/null +++ b/README.en.md @@ -0,0 +1,104 @@ +# Multi-Device Stock Page + +## Overview + +This sample demonstrates how to develop a stock trading application that can be deployed across devices based on adaptive and responsive layouts. The application layout can adapt to different device types, such as mobile phones, foldable screens, and tablets. It also supports the split-screen mode on large-screen foldable phones, tri-fold phones, and tablets, facilitating users to compare stock details. + +## Effect + + +The effects are as follows. + +**Home page for selecting stocks:** + + +| Mobile Phone | Foldable Screen (Unfolded) | Tablet | +|-------------------------------------------------|--------------------------------------------------------|--------------------------------------------------| +| ![](screenshots/devices/home-page-phone.en.png) | ![](screenshots/devices/home-page-foldablescre.en.png) | ![](screenshots/devices/home-page-tablet.en.png) | + +**Stock details page:** + +| Mobile Phone | Foldable Screen (Unfolded) | Tablet (Full Screen) | +|---------------------------------------------------|----------------------------------------------------------|----------------------------------------------------| +| ![](screenshots/devices/detail-page-phone.en.png) | ![](screenshots/devices/detail-page-foldablescre.en.png) | ![](screenshots/devices/detail-page-tablet.en.png) | + +**Split-screen layout:** + +| Mobile Phone | Foldable Screen (Unfolded) | Tablet (Full Screen) | +|--------------|------------------------------------------------------------|-----------------------------------------------------| +| N/A | ![](screenshots/devices/split-screen-foldablescre.en.png) | ![](screenshots/devices/split-screen-tablet.en.png) | + +**Stock purchase dialog:** + +| Mobile Phone | Foldable Screen (Unfolded) | Tablet | +|-------------------------------------------------|--------------------------------------------------------|--------------------------------------------------| +| ![](screenshots/devices/stock-pop-phone.en.png) | ![](screenshots/devices/stock-pop-foldablescre.en.png) | ![](screenshots/devices/stock-pop-tablet.en.png) | + +**Stock purchase confirmation dialog:** + +| Mobile Phone | Foldable Screen (Unfolded) | Tablet | +|--------------------------------------------------------|---------------------------------------------------------------|---------------------------------------------------------| +| ![](screenshots/devices/stock-affirm-pop-phone.en.png) | ![](screenshots/devices/stock-affirm-pop-foldablescre.en.png) | ![](screenshots/devices/stock-affirm-pop-tablet.en.png) | + +How to Use + +* Home page + 1. On the home page, tap any stock to go to the stock details page. +* Stock details page + 1. Foldable screen (unfolded) or tablet: Tap the split-screen icon in the upper right corner of the screen to enter the split-screen mode. + 2. Tablet: On the right content area, tap the zoom icon in the upper left corner to enter the full-screen mode. You can tap the back icon in the upper left corner to exit the full-screen mode. + 3. Tap the **Go Trade** button in the lower part of the page. A stock purchase dialog is displayed. In the dialog, tap **Buy**. In the subsequent dialog that appears, tap **Confirm Purchase**. + +## Project Directory + +``` +├──entry/src/main/ets // Code area +│ ├──chartmodels +│ │ ├──BarChartView.ets // Bar chart component logic +│ │ ├──ChartAxisFormatter.ets // Line chart data formatting +│ │ └──LineChartModel.ets // Line chart component logic +│ ├──entryability +│ │ └──EntryAbility.ets // Application entry +│ ├──entrybackupability +│ │ └──EntryBackupAbility.ets // Data backup and restoration +│ ├──models +│ │ └──DataModel.ets // Stock data +│ ├──pages +│ │ ├──Index.ets // Home page +│ │ ├──OptionPage.ets // Page for selecting stocks +│ │ └──StockDetailsPage.ets // Stock details page +│ ├──utils +│ │ ├──BreakpointType.ets // Breakpoint class +│ │ └──Logger.ets // Logging utility +│ └──views +│ ├──BuyPopUp.ets // Dialog component for stock purchase +│ ├──CommonView.ets // Common component +│ ├──RegularWayPopUp.ets // Dialog component for regular transaction +│ ├──StockDealDetails.ets // Stock details component +│ ├──StockDetailsInfo.ets // Stock details information component +│ ├──StockDetailsView.ets // Stock details page component +│ ├──StockTable.ets // Stock table list component +│ └──TopTitleBar.ets // Top title bar of the stock details page +└──entry/src/main/resources // Application resources +``` + +## How to Implement + +* Use the **UIAbilityContext.startAbility()** method to implement the in-application split-screen feature. +* Change **mode** of **navigation** based on the breakpoint or status to implement the transitions between single-column and triple-column layouts. + + +## Required Permissions + +N/A + +## Dependencies + +N/A + +## Constraints + +1. This sample is only supported on Huawei phones and tablets running standard systems. +2. The HarmonyOS version must be HarmonyOS 5.0.5 Release or later. +3. The DevEco Studio version must be DevEco Studio 5.0.5 Release or later. +4. The HarmonyOS SDK version must be HarmonyOS 5.0.5 Release SDK or later. diff --git a/README.md b/README.md index 21e926516cd3d275f7ae41453c80121d457a8bf9..8476459e1245ef0d36699a5f9858c37802787c5f 100644 --- a/README.md +++ b/README.md @@ -1,10 +1,10 @@ # 多设备股票类界面 -### 介绍 +## 介绍 本篇Sample基于自适应布局和响应式布局，实现一次开发，多端部署的股票交易应用。根据不同设备尺寸（如手机、折叠屏、平板），实现了相应的页面布局。该Sample支持在大折叠、三折叠和平板设备上分屏显示，便于对比股票详情。 -### 效果预览 +## 效果预览 本示例分为两个页面和两个弹框： @@ -52,7 +52,7 @@ 3. 点击页面下方的“去交易”按钮，页面弹出“买入股票弹窗”。当前弹框，点击“买入”按钮，弹出“确认买入股票弹窗”。 -### 工程目录 +## 工程目录 ``` ├──entry/src/main/ets // 代码区 @@ -86,20 +86,20 @@ ``` -### 具体实现 +## 具体实现 * 使用UIAbilityContext.startAbility()方法实现应用内分屏功能。 * 根据不同断点或状态改变navigation的mode属性，实现单栏和三栏的切换效果。 -### 相关权限 +## 相关权限 不涉及。 -### 依赖 +## 依赖 不涉及。 -### 约束与限制 +## 约束与限制 1. 本示例仅支持标准系统上运行，支持设备：华为手机、平板。 diff --git a/screenshots/devices/detail-page-foldablescre.en.png b/screenshots/devices/detail-page-foldablescre.en.png new file mode 100644 index 0000000000000000000000000000000000000000..412fbc4cfeba85da93363adef3fbf23ad744b502 Binary files /dev/null and b/screenshots/devices/detail-page-foldablescre.en.png differ diff --git a/screenshots/devices/detail-page-phone.en.png b/screenshots/devices/detail-page-phone.en.png new file mode 100644 index 0000000000000000000000000000000000000000..c32518e545def08e9907a27a232437231fe27812 Binary files /dev/null and b/screenshots/devices/detail-page-phone.en.png differ diff --git a/screenshots/devices/detail-page-tablet.en.png b/screenshots/devices/detail-page-tablet.en.png new file mode 100644 index 0000000000000000000000000000000000000000..36633e816d0537b4ac4c3b6b710fabf5ca719a48 Binary files /dev/null and b/screenshots/devices/detail-page-tablet.en.png differ diff --git a/screenshots/devices/home-page-foldablescre.en.png b/screenshots/devices/home-page-foldablescre.en.png new file mode 100644 index 0000000000000000000000000000000000000000..6c9a7b2eb3621447f6c4b41eac2659997f387123 Binary files /dev/null and b/screenshots/devices/home-page-foldablescre.en.png differ diff --git a/screenshots/devices/home-page-phone.en.png b/screenshots/devices/home-page-phone.en.png new file mode 100644 index 0000000000000000000000000000000000000000..3fd9e70e61eeded69fc9bc09f45b4799c6e06abd Binary files /dev/null and b/screenshots/devices/home-page-phone.en.png differ diff --git a/screenshots/devices/home-page-tablet.en.png b/screenshots/devices/home-page-tablet.en.png new file mode 100644 index 0000000000000000000000000000000000000000..0969ab6e3bbc3ca79d5b01d343711c6b21f279e0 Binary files /dev/null and b/screenshots/devices/home-page-tablet.en.png differ diff --git a/screenshots/devices/split-screen-foldablescre.en.png b/screenshots/devices/split-screen-foldablescre.en.png new file mode 100644 index 0000000000000000000000000000000000000000..5cafbf081d0d6f3d2f30d7cf18f3d88fccd22981 Binary files /dev/null and b/screenshots/devices/split-screen-foldablescre.en.png differ diff --git a/screenshots/devices/split-screen-tablet.en.png b/screenshots/devices/split-screen-tablet.en.png new file mode 100644 index 0000000000000000000000000000000000000000..2ab5d7833e3267c2b9f6ad3adafeb0a15243cd1b Binary files /dev/null and b/screenshots/devices/split-screen-tablet.en.png differ diff --git a/screenshots/devices/stock-affirm-pop-foldablescre.en.png b/screenshots/devices/stock-affirm-pop-foldablescre.en.png new file mode 100644 index 0000000000000000000000000000000000000000..257c3efd58a4fc6dc472ff4d3da16b3a821595e1 Binary files /dev/null and b/screenshots/devices/stock-affirm-pop-foldablescre.en.png differ diff --git a/screenshots/devices/stock-affirm-pop-phone.en.png b/screenshots/devices/stock-affirm-pop-phone.en.png new file mode 100644 index 0000000000000000000000000000000000000000..3b5a7896eb70be462dfc44d788c7cab8456eb2d4 Binary files /dev/null and b/screenshots/devices/stock-affirm-pop-phone.en.png differ diff --git a/screenshots/devices/stock-affirm-pop-tablet.en.png b/screenshots/devices/stock-affirm-pop-tablet.en.png new file mode 100644 index 0000000000000000000000000000000000000000..462085188bad7c1b2989bf9afd909fc5770349bc Binary files /dev/null and b/screenshots/devices/stock-affirm-pop-tablet.en.png differ diff --git a/screenshots/devices/stock-pop-foldablescre.en.png b/screenshots/devices/stock-pop-foldablescre.en.png new file mode 100644 index 0000000000000000000000000000000000000000..1edac435f8ca060c8b4a65c9216d17cc8a4f8cb1 Binary files /dev/null and b/screenshots/devices/stock-pop-foldablescre.en.png differ diff --git a/screenshots/devices/stock-pop-phone.en.png b/screenshots/devices/stock-pop-phone.en.png new file mode 100644 index 0000000000000000000000000000000000000000..34795627f94b8abdb58c0e329ee10f67796e2c25 Binary files /dev/null and b/screenshots/devices/stock-pop-phone.en.png differ diff --git a/screenshots/devices/stock-pop-tablet.en.png b/screenshots/devices/stock-pop-tablet.en.png new file mode 100644 index 0000000000000000000000000000000000000000..363f93bee20e51c292f03a1e859838a178314a82 Binary files /dev/null and b/screenshots/devices/stock-pop-tablet.en.png differ