当前位置：网站首页>The Summer Challenge realizes a standard layout of Huawei app with openharmony ETS

The Summer Challenge realizes a standard layout of Huawei app with openharmony ETS

2022-06-21 20:48:00 【51CTO】

use OpenHarmony eTS Achieve one Huawei app Standard layout

This article is participating in the starlight project 3.0 – Summer Challenge

Catalog

use OpenHarmony eTS Achieve one Huawei app Standard layout

1. Introduce
2. Effect display
3. Code explanation

3.1 preparation
3.2 Implement a bottom tab bar
3.3 Implement a top toolbar
3.4 Achieve one Grid Grid display

4. Think and summarize

4.1 Icon download
4.2 Achieve the acquisition of screen orientation

5. Complete code

1. Introduce

Huawei Of app, We can all see that it was designed by heart , Worth learning . If we look carefully Huawei The phone comes with app, We will find all app, Whatever the type app, Its layout structure is a similar structure , This shows that the use of this layout structure can really be very wide , And the experience was great …

Like Huawei's application market app、 Contacts 、 browser 、 Gallery 、 Smart Life app、 music app、 My Huawei 、 Changlian wait , You see , It's all this upper, middle and lower layout structure , Top bar （top+middle）+ Content display area （content）+ Bottom tab bar , that , Today we will work together to implement such a layout .

2. Effect display

DAYU200 Real machine
# Summer Challenge # use OpenHarmony eTS Achieve one Huawei app Standard layout _eTS

Video address
https://ost.51cto.com/show/13842

Simulator

# Summer Challenge # use OpenHarmony eTS Achieve one Huawei app Standard layout _eTS_02

# Summer Challenge # use OpenHarmony eTS Achieve one Huawei app Standard layout _eTS_03

3. Code explanation

3.1 preparation

1). Add one to save image Resources ets file ,resource_const.ets

export function initImageMap(): Map<string, Resource> {
  let imageMap = new Map()
  
  //tappage
  //tab icon
  imageMap.set('tab_01', $r('app.media.ic_public_home'))
  imageMap.set('tab_02', $r('app.media.ic_public_appstore'))
  imageMap.set('tab_03', $r('app.media.ic_gallery_album_damage_video'))
  imageMap.set('tab_04', $r('app.media.ic_gallery_search_things'))
  imageMap.set('tab_05', $r('app.media.ic_user_portrait'))

  imageMap.set('tab_01_filled', $r('app.media.ic_public_home_filled'))
  imageMap.set('tab_02_filled', $r('app.media.ic_public_appstore_filled'))
  imageMap.set('tab_03_filled', $r('app.media.ic_gallery_album_damage_video_filled'))
  imageMap.set('tab_04_filled', $r('app.media.ic_gallery_search_things_filled'))
  imageMap.set('tab_05_filled', $r('app.media.ic_user_portrait_filled'))

  //tab color
  imageMap.set('tab_filled_color', $r('app.color.filled_color'))
  imageMap.set('tab_unfilled_color', $r('app.color.unfilled_color'))

  return imageMap

}

     1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.

Why do you do this ,

One is because I found , Sometimes if you use it directly , Sometimes the picture will be confused , The picture is not displayed .

Second, it is convenient to use and change .

Image($r('app.media.light_power'))  // So I'm going to use it directly 
  .width(40)
  .height(40)
  .alignSelf(ItemAlign.End)
  .margin({ right: '10%', bottom: '3%' })
  .onClick(() => {
    router.push({ uri: 'pages/index' })
  })

     1.
2.
3.
4.
5.
6.
7.
8.

2).string.json Defined in the resource file tab Show text

  {
    "name": "tab_01",
    "value": " Home Furnishing "
  }
,
  {
    "name": "tab_02",
    "value": " Shopping Mall "
  }
,
  {
    "name": "tab_03",
    "value": " Content "
  }
,
  {
    "name": "tab_04",
    "value": " scene "
  }
,
  {
    "name": "tab_05",
    "value": " my "
  }

     1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.

The next step is to get to the point , Create a new one ets page ,tabpage.ets

3.2 Implement a bottom tab bar

1). Import the required components

// The logging component 
import { CommonLog  as logger } from '@ohos/ohos_clogger'

// For data presentation model 
import { NoticeDataModel, initOneNoticeData } from "../model/NoticeDataModel"

// Introduce defined constants 、 View component 
import { initImageMap } from '../common/resource_const'

// Resource management , Used to obtain the screen orientation 
import resourceManager from '@ohos.resourceManager';

     1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.

2). Definition tab Icon and text colors State variables

//tab icon
@State tab_01_icon: Resource = initImageMap().get('tab_01_filled')
@State tab_02_icon: Resource = initImageMap().get('tab_02')
@State tab_03_icon: Resource = initImageMap().get('tab_03')
@State tab_04_icon: Resource = initImageMap().get('tab_04')
@State tab_05_icon: Resource = initImageMap().get('tab_05')
//tab  text color 
@State tab_01_color: Resource = initImageMap().get('tab_filled_color')
@State tab_02_color: Resource = initImageMap().get('tab_unfilled_color')
@State tab_03_color: Resource = initImageMap().get('tab_unfilled_color')
@State tab_04_color: Resource = initImageMap().get('tab_unfilled_color')
@State tab_05_color: Resource = initImageMap().get('tab_unfilled_color')

     1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.

3). So let's see build() Layout ,

In the outermost layers Column Container layout , And then there was Flex Layout ,top bar ,middle,Content It's all line by line , So use Row Container layout , Take a seat first .

Bottom tab Column use Flex Layout , Every tab use Column Layout ,Column It's up and down 2 layer , One image, A text .

5 individual tab, So each tab Of width Set to 20%, For the sake of beauty , To the outermost Column Set a background picture .

build() {
  Column() {
    // use Flex Layout  
    Flex({ direction: FlexDirection.Column, wrap: FlexWrap.NoWrap }) {
        //top bar 
        Row() {}.width('100%').height('80vp')
        //middle
        Row() {}.width('100%').height('150vp')
        //content
        Row() {}.width('100%').height('100%')
        //bottom tab
        Flex() {
          Column() {
            Image(this.tab_01_icon)
              .width('100%')
              .height('50%')
              .flexShrink(0)
              .objectFit(ImageFit.Contain)
            Text($r('app.string.tab_01'))
              .width('100%')
              .height('50%')
              .flexShrink(0)
              .fontColor(this.tab_01_color)
              .fontSize('15fp')
              .textAlign(TextAlign.Center)
          }.onClick(() => {
            this.current_tab_index = 1
            this.switchTab()
          })
          .width('20%')
          .height('100%')

          Column() {
            Image(this.tab_02_icon)
              .width('100%')
              .height('50%')
              .flexShrink(0)
              .objectFit(ImageFit.Contain)
            Text($r('app.string.tab_02'))
              .width('100%')
              .height('50%')
              .flexShrink(0)
              .fontColor(this.tab_02_color)
              .fontSize('15fp')
              .textAlign(TextAlign.Center)
          }
          .onClick(() => {
            this.current_tab_index = 2
            this.switchTab()
          })
          .width('20%')
          .height('100%')

          Column() {
            Image(this.tab_03_icon)
              .width('100%')
              .height('50%')
              .flexShrink(0)
              .objectFit(ImageFit.Contain)
            Text($r('app.string.tab_03'))
              .width('100%')
              .height('50%')
              .flexShrink(0)
              .fontColor(this.tab_03_color)
              .fontSize('15fp')
              .textAlign(TextAlign.Center)
          }
          .onClick(() => {
            this.current_tab_index = 3
            this.switchTab()
          })
          .width('20%')
          .height('100%')

          Column() {
            Image(this.tab_04_icon)
              .width('100%')
              .height('50%')
              .flexShrink(0)
              .objectFit(ImageFit.Contain)
            Text($r('app.string.tab_04'))
              .width('100%')
              .height('50%')
              .flexShrink(0)
              .fontColor(this.tab_04_color)
              .fontSize('15fp')
              .textAlign(TextAlign.Center)
          }
          .onClick(() => {
            this.current_tab_index = 4
            this.switchTab()
          })
          .width('20%')
          .height('100%')

          Column() {
            Image(this.tab_05_icon)
              .width('100%')
              .height('50%')
              .flexShrink(0)
              .objectFit(ImageFit.Contain)
            Text($r('app.string.tab_05'))
              .width('100%')
              .height('50%')
              .flexShrink(0)
              .fontColor(this.tab_05_color)
              .fontSize('15fp')
              .textAlign(TextAlign.Center)
          }
          .onClick(() => {
            this.current_tab_index = 5
            this.switchTab()
          })
          .width('20%')
          .height('100%')
        }
        .width('100%')
        .height('90vp')
        .align(Alignment.Center)
        .flexShrink(0)
        .backgroundColor('#ffdbc9c9')
        .margin({ top: '5vp'})
        .padding({ top: '5vp', bottom: '5vp', left: '5vp', right: '5vp' })
        
    }
  }
  .width('100%')
  .height('100%')
  .alignItems(HorizontalAlign.End)
  // Set a background picture  
  .backgroundImage($r('app.media.community_notice'), ImageRepeat.XY)
}

     1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.
113.
114.
115.
116.
117.
118.
119.
120.
121.
122.
123.
124.
125.
126.
127.
128.
129.
130.
131.
132.

# Summer Challenge # use OpenHarmony eTS Achieve one Huawei app Standard layout _eTS_04

4). Achieve click tab The effect of switching

Defines the of the current operation tab Indexes

5). Define switch tab function switchTab()

Set the current click tab The selection effect of , At the same time, other tab Uncheck the effect . This method can also continue to optimize .

// Switch Tab
switchTab() {

  if (this.current_tab_index == 1) {
    if (this.tab_01_icon.id != initImageMap().get('tab_01_filled').id) {

      logger.getInstance(this).debug(`===========${JSON.stringify(this.tab_01_icon)}`)
      logger.getInstance(this).debug(`===========${JSON.stringify(initImageMap().get('tab_01_filled'))}`)
      // The current selection 
      this.tab_01_icon = initImageMap().get('tab_01_filled')
      this.tab_01_color = initImageMap().get('tab_filled_color')
      // Reset other 
      this.tab_02_icon = initImageMap().get('tab_02')
      this.tab_02_color = initImageMap().get('tab_unfilled_color')

      this.tab_03_icon = initImageMap().get('tab_03')
      this.tab_03_color = initImageMap().get('tab_unfilled_color')

      this.tab_04_icon = initImageMap().get('tab_04')
      this.tab_04_color = initImageMap().get('tab_unfilled_color')

      this.tab_05_icon = initImageMap().get('tab_05')
      this.tab_05_color = initImageMap().get('tab_unfilled_color')
    }
  }
  if (this.current_tab_index == 2) {
    if (this.tab_02_icon.id != initImageMap().get('tab_02_filled').id) {

      logger.getInstance(this).debug(`===========${JSON.stringify(this.tab_02_icon)}`)
      logger.getInstance(this).debug(`===========${JSON.stringify(initImageMap().get('tab_02_filled'))}`)
      // The current selection 
      this.tab_02_icon = initImageMap().get('tab_02_filled')
      this.tab_02_color = initImageMap().get('tab_filled_color')
      // Reset other 
      this.tab_01_icon = initImageMap().get('tab_01')
      this.tab_01_color = initImageMap().get('tab_unfilled_color')

      this.tab_03_icon = initImageMap().get('tab_03')
      this.tab_03_color = initImageMap().get('tab_unfilled_color')

      this.tab_04_icon = initImageMap().get('tab_04')
      this.tab_04_color = initImageMap().get('tab_unfilled_color')

      this.tab_05_icon = initImageMap().get('tab_05')
      this.tab_05_color = initImageMap().get('tab_unfilled_color')
    }
  }
  if (this.current_tab_index == 3) {
    if (this.tab_03_icon.id != initImageMap().get('tab_03_filled').id) {

      logger.getInstance(this).debug(`===========${JSON.stringify(this.tab_03_icon)}`)
      logger.getInstance(this).debug(`===========${JSON.stringify(initImageMap().get('tab_03_filled'))}`)
      // The current selection 
      this.tab_03_icon = initImageMap().get('tab_03_filled')
      this.tab_03_color = initImageMap().get('tab_filled_color')
      // Reset other 
      this.tab_02_icon = initImageMap().get('tab_02')
      this.tab_02_color = initImageMap().get('tab_unfilled_color')

      this.tab_01_icon = initImageMap().get('tab_01')
      this.tab_01_color = initImageMap().get('tab_unfilled_color')

      this.tab_04_icon = initImageMap().get('tab_04')
      this.tab_04_color = initImageMap().get('tab_unfilled_color')

      this.tab_05_icon = initImageMap().get('tab_05')
      this.tab_05_color = initImageMap().get('tab_unfilled_color')
    }
  }
  if (this.current_tab_index == 4) {
    if (this.tab_04_icon.id != initImageMap().get('tab_04_filled').id) {

      logger.getInstance(this).debug(`===========${JSON.stringify(this.tab_04_icon)}`)
      logger.getInstance(this).debug(`===========${JSON.stringify(initImageMap().get('tab_04_filled'))}`)
      // The current selection 
      this.tab_04_icon = initImageMap().get('tab_04_filled')
      this.tab_04_color = initImageMap().get('tab_filled_color')
      // Reset other 
      this.tab_02_icon = initImageMap().get('tab_02')
      this.tab_02_color = initImageMap().get('tab_unfilled_color')

      this.tab_03_icon = initImageMap().get('tab_03')
      this.tab_03_color = initImageMap().get('tab_unfilled_color')

      this.tab_01_icon = initImageMap().get('tab_01')
      this.tab_01_color = initImageMap().get('tab_unfilled_color')

      this.tab_05_icon = initImageMap().get('tab_05')
      this.tab_05_color = initImageMap().get('tab_unfilled_color')
    }
  }
  if (this.current_tab_index == 5) {
    if (this.tab_05_icon.id != initImageMap().get('tab_05_filled').id) {

      logger.getInstance(this).debug(`===========${JSON.stringify(this.tab_05_icon)}`)
      logger.getInstance(this).debug(`===========${JSON.stringify(initImageMap().get('tab_05_filled'))}`)
      // The current selection 
      this.tab_05_icon = initImageMap().get('tab_05_filled')
      this.tab_05_color = initImageMap().get('tab_filled_color')
      // Reset other 
      this.tab_02_icon = initImageMap().get('tab_02')
      this.tab_02_color = initImageMap().get('tab_unfilled_color')

      this.tab_03_icon = initImageMap().get('tab_03')
      this.tab_03_color = initImageMap().get('tab_unfilled_color')

      this.tab_04_icon = initImageMap().get('tab_04')
      this.tab_04_color = initImageMap().get('tab_unfilled_color')

      this.tab_01_icon = initImageMap().get('tab_01')
      this.tab_01_color = initImageMap().get('tab_unfilled_color')
    }
  }

}

     1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.
113.
114.
115.

6). Click on tab To set the current operation tab Index and call switchTab() function

3.3 Implement a top toolbar

Because we want to achieve , When sliding up , hide middle The contents of the column , stay top The column shows the reduced version of middle Information .

So define a show_top_title Variable , Used to control the top title The overt and covert , Define a show_mid_title State variable control middle title The overt and covert .

top The column contains a text （ Initially, it does not display ）, A search button , An add button , We hope top The operation button of the column can be on the right , So pay attention to the settings

.alignItems(HorizontalAlign.End)

//top bar 
Row() {
  Column() {
    if (this.show_top_title) {
      Text(' Step 2 detective's home ')
        .height('100%')
        .width('100%')
        .fontSize(24)
        .fontWeight(FontWeight.Bolder)
        .fontWeight('#CCFFF')
    }
  }
  .width('60%')
  .height('100%')
  .padding({ left: 10 })

  Column() {
    Image($r('app.media.ic_public_search'))
      .width('50vp')
      .height('100%')
      .borderRadius(30)
      .margin({ right: 10 })
      .objectFit(ImageFit.ScaleDown)
    //.backgroundColor('#bbdd11')
  }
  .width('20%')
  .height('100%')
  //.backgroundColor('#bbdd11')
  .alignItems(HorizontalAlign.End)
  .onClick(() => {
    logger.getInstance(this).debug(`you click '' button`)
  })

  Column() {
    Image($r('app.media.ic_public_add'))
      .width('50vp')
      .height('100%')
      .borderRadius(30)
      .margin({ right: 10 })
      .objectFit(ImageFit.ScaleDown)
    //.backgroundColor('#bbdd11')
  }
  .width('20%')
  .height('100%')
  //.backgroundColor('#bbdd11')
  .alignItems(HorizontalAlign.End)
  .onClick(() => {
    logger.getInstance(this).debug(`you click '+' button`)
  })
}
.width('100%')
.height('80vp')
.align(Alignment.End)
.backgroundColor('#ffdbc9c9')

     1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.

3.4 Achieve one Grid Grid display

1). Analog data list , The data source is NoticeDataModel Simulation data of , The data structure is a notification , Include title and content , For demonstration purposes only .

// Data list 
@State notice_list: NoticeDataModel[] = [
  initOneNoticeData(),
  initOneNoticeData(),
  initOneNoticeData(),
  initOneNoticeData(),
  initOneNoticeData(),
  initOneNoticeData(),
  initOneNoticeData(),
  initOneNoticeData(),
  initOneNoticeData(),
  initOneNoticeData(),
  initOneNoticeData(),
  initOneNoticeData(),
  initOneNoticeData(),
  initOneNoticeData(),
  initOneNoticeData(),
  initOneNoticeData(),
  initOneNoticeData(),
  initOneNoticeData()
]

     1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.

2).content Layout use Grid Achieve a mesh effect , Use ForEach Traversal notice_list The data of ,

ForEach Pay attention to the use of , The last part , item => item.id) , Generally, unique fields are used to assign values , You can improve the performance of re rendering after changes .

.columnsTemplate(‘1fr 1fr’) Can be controlled Column format , Is shown as 2 Column , It can be 1 Column ,3 Column

//content
Row() {
  Grid() {
    ForEach(this.notice_list, item => {
      GridItem() {
        Column() {
          Text(item.notice_title)
            .fontSize(18)
            .width('100%')
          Text(item.notice_content)
            .fontSize(15)
            .width('100%')
            .padding({ top: 5 })
            .fontColor('#6D7278')
        }
        .width('100%')
        .height(160)
        .borderRadius(15)
        .padding({ top: 10, left: 10 })
        .backgroundColor(0xF9CF93)
      }
    }, item => item.id)
  }
  // Column format , Is shown as 2 Column  
  .columnsTemplate('1fr 1fr')
  .columnsGap(20)
  .rowsGap(20)
  .margin({ top: 10 })
  .onScrollIndex((first: number) => {
    logger.getInstance(this).debug(`${first.toString()}`)
    if (first == 4) {
      this.show_top_title = true;
      this.show_mid_title = false;
    }
    if (first == 2) {
      this.show_top_title = false;
      this.show_mid_title = true;
    }
  })
}
.width('100%')
.height('100%')
.padding({ left: '5vp', right: '5vp' })
.alignItems(VerticalAlign.Top)
//.backgroundColor('#ffc1dfe0')

     1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.

1 Column	2 Column	3 list

3. When you slide up content when , hide middle The content of , Show at the same time top The text content in the column .

onScrollIndex Callback function

.onScrollIndex((first: number) => {
  logger.getInstance(this).debug(`${first.toString()}`)
  if (first == 4) {
    this.show_top_title = true;
    this.show_mid_title = false;
  }
  if (first == 2) {
    this.show_top_title = false;
    this.show_mid_title = true;
  }
})

     1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.

4. Think and summarize

4.1 Icon download

1. Provided by Huawei HarmonyOS Icon Library

2. Alibaba vector icon library

4.2 Achieve the acquisition of screen orientation

adopt resourceManager obtain getConfiguration, then config.direction Get screen orientation , This part of the code is HarmonyOS You can get , But in OpenHarmony Cannot be used in .

resourceManager.getResourceManager('com.example.lanls')
  .then(mgr => {

    logger.getInstance(this).debug(`=====${JSON.stringify(mgr)}`)
    mgr.getConfiguration()
      .then(config => {
        logger.getInstance(this).debug(`${JSON.stringify(config)}`)
        //DIRECTION_VERTICAL = 0,
        this.is_landscape = config.direction.valueOf() == 1 ? true : false
      })
      .catch(error => {
        logger.getInstance(this).error("getstring promise " + error);
      });
  })
  .catch(error => {
    logger.getInstance(this).error("error occurs" + error);
  });

     1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.