Overview
This topic uses news & reading apps as a typical example to detail how the feature of one-time development for multi-device deployment is applied in actual development. When used on large-screen devices, news & reading apps need to ensure that users can normally use them to read, as well as improve the interaction efficiency on the large screens. The main page of a news & reading app includes home page recommendation, trending news, news details, news browsing, and featured news.
The development of news & reading apps involves several key capabilities:
- Orientation layout
- Extended layout
- Repetition layout
- List-to-waterfall layout
- List-to-grid layout
- Full-screen-to-waterfall layout
- Commenting while browsing
- Immersive browsing
- Text size adjustment
The following sections provide reference examples from the perspectives of UX design, architecture design, and page development, helping you develop news & reading apps.
Before reading this topic, you need to be familiar with the ArkUI framework and the capabilities of one-time development for multi-device deployment for page development. The following sections describe how to use them in app development.
Architecture Design
The HarmonyOS project architecture uses a tiered architecture encompassing three layers: product customization layer, basic feature layer, and common capability layer. It provides a clear, efficient, and scalable design architecture. For details, see the logical design in Layered Architecture Design.
Page Development
This section describes how to use layout capabilities to adapt a set of pages in the news & reading app across different devices, helping you develop news & reading apps from scratch.
[h2]Home Page Recommendations
The home page is designed to recommend featured news for users. Based on the UX design diagrams for the home page on different devices, you can design the page as follows:
- Divide the home page into nine areas, as shown in the following figures.
sm | md | lg | |
|---|---|---|---|
Final effect |
|
|
|
The following table describes the implementation solutions.
No. | Area | Implementation |
|---|---|---|
1 | Bottom/Side tab | The grid layout is used to listen for breakpoint changes and change the position. |
2 | Top tab and search box | The grid layout is used to listen for breakpoint changes to enable wrapping. The List component implements the extension capability, while the layoutWeight component implements the stretching capability. |
3 | The lanes attribute of the List component is used to display the content in 1, 2, and 3 columns at different breakpoints. | |
4 | The Swiper component is used. You can specify the displayCount attribute to implement the extension capability and set the aspectRatio attribute to implement the scaling capability. | |
5 | The repetition layout is used on PCs/2-in-1 devices and wide-screen devices, and the original layout is retained on smartphones and foldable phones. | |
6 | The repetition layout is used on foldable phones and PCs/2-in-1 devices, and a single-column layout is used on smartphones. | |
7 | The repetition layout is used on foldable phones and PCs/2-in-1 devices to show more widgets. | |
8 | The repetition layout is used on foldable phones and PCs/2-in-1 devices, and a single-column layout is used on smartphones. | |
9 | The extension capability is used to show more short video widgets on the screen when the device size is widened. |
Use the List component to set the lanes attribute at different breakpoints: Set the value to 1 at the sm breakpoint, 2 at the md breakpoint, and 3 at the lg breakpoint. This enables more columns to be displayed in different screen sizes.
Item | sm | md | lg |
|---|---|---|---|
Final effect |
|
|
|
Use the Swiper component and set the displayCount attribute at different breakpoints to implement the extension capability of the adaptive layout. Set the displayCount attribute to 1 at the sm breakpoint, to 2 at the md breakpoint, and to 3 at the lg breakpoint for the large news image card. This enables more content to be displayed in different screen sizes.
Item | sm | md | l |
|---|---|---|---|
Final effect |
|
|
|
Item | sm | md | lg |
|---|---|---|---|
Design capability |
| ||
Final effect |
|
|
|
// src/main/ets/pages/MediaNews.ets
build() {
Column() {
Header()
GridRow({
gutter: $r("app.float.grid_gutter_bigger")
}) {
ForEach(this.newsList, (news: News) => {
GridCol({
span: {
sm: Constants.GRID_COL_SPAN[5],
lg: Constants.GRID_COL_SPAN[4]
}
}) {
NewsWithThreeImages({ news })
}
}, (news: News) => news.getNewsID())
}
.onBreakpointChange((breakPoints: string) => {
// Return the number of rendered data records based on the breakpoint situation
this.newsList = this.multiImageViewModel.getNewsListByBreakpoint(breakPoints);
})
.width(Constants.CONTENT_WIDTH)
}
.width(Constants.FULL_WIDTH)
.justifyContent(FlexAlign.Center)
} Use the grid layout and breakpoints to control the number of columns. Set the span attribute of GridCol to 12 at the sm breakpoint and to 6 at the md or larger breakpoint. Use the visibility attribute of the Text component and breakpoints to display or hide the summary. Set visibility to Visibility.Hidden at the sm and md breakpoints and to Visibility.Visible at the lg or larger breakpoint.
Item | sm | md | lg |
|---|---|---|---|
Design capability |
| ||
Final effect |
|
|
|
build() {
Column() {
Header()
GridRow({
columns: 12,
gutter: {
x: { md: Constants.GRID_HORIZONTAL_GUTTER[0], lg: Constants.GRID_HORIZONTAL_GUTTER[1] },
y: { sm: Constants.GRID_VERTICAL_GUTTER[0], md: Constants.GRID_VERTICAL_GUTTER[1] }
}
}) {
ForEach(this.newsList, (news: News) => {
GridCol({
span: {
sm: Constants.GRID_COL_SPAN[5],
md: Constants.GRID_COL_SPAN[4]
}
}) {
LeftTextRightImageBgWhite({ news })
}
}, (news: News) => news.getNewsID())
}
.onBreakpointChange((breakPoints: string) => {
this.newsList = this.imageAndTextViewModel.getNewsListByBreakpoint(breakPoints);
})
.width(Constants.CONTENT_WIDTH)
}
.width(Constants.FULL_WIDTH)
.justifyContent(FlexAlign.Center)
} Item | sm | md | lg |
|---|---|---|---|
Design capability |
| ||
Final effect |
|
|
|
Use the grid layout and breakpoints to control the number of columns to be displayed and the number of data sources. At the sm breakpoint, set the span attribute of GridCol to 12 and the number of returned rendered data sources to 1. At the md breakpoint, set the span attribute to 6 and the number of rendered data sources to 2. At the lg breakpoint, set the span attribute to 4 and the number of rendered data sources to 3.
Item | sm | md | lg |
|---|---|---|---|
Design capability |
| ||
Final effect |
|
|
|
Use the Scroll and Row components to implement the extended layout. As the screen size increases, more short videos can be displayed. For details about the extended layout, see extension capability.
Item | sm | md | lg |
|---|---|---|---|
Final effect |
|
|
|
[h2]Trending News
The trending news page provides browsing experience of trending news on different devices. Based on the UX design diagrams for the trending news page on different devices, you can design the page as follows:
- Divide the trending news page into three areas, as shown in the following figures.
Item | sm | md | lg |
|---|---|---|---|
Final effect |
|
|
|
The following table describes the implementation solutions.
No. | Area | Implementation |
|---|---|---|
1 | Bottom/Side tab | The grid layout is used to listen for breakpoint changes and change the position. |
2 | Top tab and search box | The grid layout is used to listen for breakpoint changes to enable wrapping. The List component implements the extension capability, while the layoutWeight component implements the stretching capability. |
3 | Listening for breakpoints is used to change the layout at different breakpoints. The List component is used at the sm or smaller breakpoint, and the grid layout is used at a breakpoint larger than sm. |
To flexibly switch from a list to a grid, you can use the List component to display content at the sm or smaller breakpoint, and use the grid layout at a breakpoint larger than sm. In the grid layout, set the columns attribute of GridRow to 2 at the md breakpoint and to 4 at the lg breakpoint. For the component content that needs to occupy more space, set the span attribute of GridCol separately so that the component content occupies more copies.
Column() {
if (this.curBp === 'sm') {
List({
space: Constants.LIST_GUTTER
}) {
// ...
}
.width(Constants.CONTENT_WIDTH)
} else {
GridRow({
columns: {
md: Constants.GRID_ROW_COLUMNS[1],
lg: Constants.GRID_ROW_COLUMNS[2]
},
gutter: $r("app.float.news_list_common_space")
}) {
// ...
}
// ...
}
} [h2]News Details
The news details page provides detailed news information for users. Based on the UX design diagrams for the news details page on different devices, you can design the page as follows:
- Commenting while browsing
Item | sm | md | lg |
|---|---|---|---|
Design capability |
| ||
Final effect |
|
|
|
The following table describes the implementation solutions.
No. | Area | Implementation |
|---|---|---|
1 | Top bar | When you use the stretching capability of the adaptive layout, the blank content in the middle changes with the device size when the screen width changes using the Blank component. |
2 | News title and release information | The proportion capability is used to ensure that the UIs of multiple devices are the same. |
3 | News content | The proportion capability is used to ensure that the UIs of multiple devices are the same. |
4 | Comment area | The orientation layout is used to enable the horizontal layout of the news and comment areas as the device is widened. |
5 | Bottom toolbar | The equalization capability of the adaptive layout is used to keep the icon size unchanged when the device size changes and ensure the icon spacing and the spacing between the left and right edges change equally. |
By leveraging the grid layout, you can seamlessly implement the orientation layout that enables commenting while browsing. To achieve this, set the span attribute of GridCol to 12 at the sm breakpoint and to 6 at the breakpoint larger than sm, thereby automatically switching the top-down layout of news and comment areas to a left-right layout.
[h2]News Browsing
The news browsing page provides a news flow list for users. Based on the UX design diagrams for the news details page on different devices, you can design the page as follows:
- Full-screen-to-waterfall layout
Item
sm
md
lg
Final effect
On the news browsing page, you can use the WaterFlow container to switch between one column and multiple columns. Specifically, set columnsTemplate of WaterFlow to 1, 2, and 3 at the sm, md, and lg breakpoints, respectively.
Item | sm | md | lg |
|---|---|---|---|
Final effect |
|
|
|
The featured news page employs a waterfall layout, seamlessly transitioning from one column to multiple columns as needed. This adaptive design is achieved through the WaterFlow container, which intelligently adjusts its display to accommodate various devices. The news are displayed in one column at the sm breakpoint. At the md breakpoint, the columnsTemplate attribute of WaterFlow is set to two columns. At the lg breakpoint, the columnsTemplate attribute is set to three columns.