HarmonyOS Development: Customize a simple title bar

Foreword

this article is based on Api12 

the title bar is standard for almost every application and will exist more or less. A simple combination View in Android can be done. In Hongmeng development, it is also very simple. Select the corresponding layout and then set up the components. 

You can use relative layout RelativeContainer or linear layout Row, can be implemented, according to the requirements of the project or UI design to put the components, as shown in the figure above, the middle is the title, left and right two components, simple implementation is as follows:

 

Row() {
Text (Return). magic ({left: 10})
Text (left and right text buttons)
Text ("Edit"). marin ({right: 10})
}.width("100%")
.height(50)
.justifyContent(FlexAlign.SpaceBetween)

the above code is only used for the three components on the left, middle and right. It can be found that a title combination component has no difficulty or technical content. In actual development, if there are multiple title bar forms, considering the code reuse, try to extract a custom component, and select the component required by the current page through attribute control. 

For example, some pages have pictures on the left and pictures on the right, or two buttons on the left, two pictures, or a combination of pictures and words, etc., which need to be considered in actual packaging. 

In view of the above situations, a simple package has also been made, which has been uploaded to the central warehouse and can be directly used by friends in need. 

Central Warehouse Address: 

https://ohpm.openharmony.cn/#/cn/detail/@abner%2Fbar 

quick Use

Method 1: Set the three-party package dependency in the oh-package.json5 that needs the Module. The configuration example is as follows:

 

"dependencies": { "@abner/bar": "^1.0.1"}

method 2: in the Terminal window, run the following command to install the third-party package. DevEco Studio automatically adds the third-party package dependency to the project oh-package.json5. 

Suggestion: Execute the command under the module path used.

---

ohpm install @abner/bar

Initialization 

the initialization function is used to unify the title bar, such as width and height, font color size, unified click event, etc. It is recommended to be carried out in the AbilityStage, and the attribute is selectively called. If it is not needed, it may not be set.

 

initActionBar({})

Related Properties 

related attributes can be used for global initialization or individually. 

Property	type	overview
barWidth	Length	title Bar Width
barHeight	Length	title Bar Height
barBackgroundColor	ResourceColor	title Bar Background Color
onTitleClick	callback	header Click Event
leftText	string/Resource	left button text
left2Text	string/Resource	second left button text
leftMenuMargin	Length	left button, default distance left
leftMenuBgColor	ResourceColor	left background color
rightMenuBgColor	ResourceColor	right background color
rightMenuMargin	Length	right Button Distance to Right
leftMenuWidth	Length	overall width of left button
leftMenuHeight	Length	overall height of left button
rightMenuWidth	Length	right button width
rightMenuHeight	Length	right button height
onLeftClick	callback	left overall click
onLeftTextClick	callback	click on the left text button
onLeftImageClick	callback	click on the left picture button
onRightClick	callback	click on the whole right
onRightTextClick	callback	click on the right text button
onRightImageClick	callback	click on the picture button on the right
leftIcon	PixelMap/ ResourceStr/ DrawableDescriptor	left Button First Icon
left2Icon	PixelMap/ ResourceStr/ DrawableDescriptor	left button second icon
rightIcon	PixelMap/ ResourceStr/ DrawableDescriptor	right button first icon
right2Icon	PixelMap/ ResourceStr/ DrawableDescriptor	right button second icon
hideLeftMenu	boolean	hide the left button, not hidden by default
hideTitle	boolean	hide the title, not hidden by default
hideRightMenu	boolean	hide the right button, not hidden by default
isAvoidanceNavigation	boolean	whether to avoid navigation, default not to avoid
titleAttribute	TitleAttribute	title common properties, color size, etc.
leftMenuAttribute	BarMenuAttribute	common properties of the first button on the left, color size, etc.
leftMenu2Attribute	BarMenuAttribute	the second button on the left common properties, color size, etc.
rightMenuAttribute	BarMenuAttribute	common properties of the first button on the right, color size, etc.
rightMenu2Attribute	BarMenuAttribute	the second button on the right side of the general properties, color size, etc.

Basic use 

1, simple use, is an ordinary component

 

ActionBar({
Title: "Ordinary Single Title"
})

2. Left text button display

 

ActionBar({
Title: "Left Text Button",
LeftText: "Return",
onLeftClick: () => {
Console.log ("===Left button clicked")
},
})

3. Left picture button

 

ActionBar({
Title: "Left Image Button",
leftIcon: $r("app.media.app_icon"),
onLeftClick: () => {
Console.log ("===Left button clicked")
},
})

4. Right text button

 

ActionBar({
  title: "right text", rightText: "edit",
  onRightClick: () => {
    console.log("====click right")
  }
})

5. The right picture button

 

ActionBar({
  title: "right image",
  rightIcon: $r("app.media.app_icon"),
  onRightClick: () => {
    console.log("====click right")
  }
})

6. Left and right text buttons

 

ActionBar({
  title: "left and right",
  leftText: "back",
  rightText: "edit",
  onLeftClick: () => {
    console.log("====click left")
  },
  onRightClick: () => {
    console.log("====click right")
  }
})

7. Left and right picture buttons

 

ActionBar({
  title: "left and right image",
  rightIcon: $r("app.media.app_icon"),
  leftIcon: $r("app.media.app_icon"),
  onLeftClick: () => {
    console.log("====click left")
  },
  onRightClick: () => {
    console.log("====click right")
  }
})

8. Left text double button

 

ActionBar({
  title: "left text",
  leftText: "button 1",
  left2Text: "button 2",
  leftMenuAttribute: {
    textMargin: { right: 10 }
  },
  onLeftTextClick: (position) => {
    console.log("====click:" + position)
  }
})

9. Left picture double button

 

ActionBar({
  title: "left image",
  leftIcon: $r("app.media.app_icon"),
  left2Icon: $r("app.media.app_icon"),
  leftMenuAttribute: {
    imageMargin: { right: 10 }
  },
  onLeftImageClick: (position) => {
    console.log("====click:" + position)
  }
})

10. Right text double button

 

ActionBar({
  title: "right text",
  rightText: "button 1",
  right2Text: "button 2",
  rightMenuAttribute: {
    textMargin: { left: 10 }
  },
  onRightTextClick: (position) => {
    console.log("====click:" + position)
  }
})

11. The right picture double button

 

ActionBar({
  title: "right text add image",
  rightIcon: $r("app.media.app_icon"),
  right2Icon: $r("app.media.app_icon"),
  rightMenu2Attribute: {
    imageMargin: { left: 10 }
  },
  onRightImageClick: (position) => {
    console.log("====click:" + position)
  }
})

12. Left and right text double buttons

 

ActionBar({
  title: "left and right text",
  leftText: "button 1",
  left2Text: "bnutton 2",
  leftMenuAttribute: {
    textMargin: { right: 10 }
  },
  onLeftTextClick: (position) => {
    console.log("====click:" + position)
  },
  rightText: "button 1",
  right2Text: "button 2",
  rightMenuAttribute: {
    textMargin: { left: 10 }
  },
  onRightTextClick: (position) => {
    console.log("====click:" + position)
  }
})

13. Picture and text on the left

 

ActionBar({
  title: "left image",
  leftText: "back",
  leftIcon: $r("app.media.app_icon"),
  leftMenuType: MenuType.IMAGE_TEXT,
  leftMenuAttribute: {
    imageMargin: {
      right: 10
    }
  },
  onLeftClick: () => {
    console.log("============click")
  }
})

14. Left Text

ActionBar({
  title: "left image",
  leftText: "back",
  leftIcon: $r("app.media.app_icon"),
  leftMenuType: MenuType.TEXT_IMAGE,
  leftMenuAttribute: {
    textMargin: {
      right: 10
    }
  },
  onLeftClick: () => {
    console.log("============click")
  }
})

15. Picture and text on the right

ActionBar({
  title: "right image",
  rightText: "edit",
  rightIcon: $r("app.media.app_icon"),
  rightMenuType: MenuType.IMAGE_TEXT,
  rightMenuAttribute: {
    imageMargin: {
      right: 10
    }
  },
  onRightClick: () => {
    console.log("============click")
  }
})

1*6. Right text*

ActionBar({
  title: "right title",
  rightText: "edit",
  rightIcon: $r("app.media.app_icon"),
  rightMenuType: MenuType.TEXT_IMAGE,
  rightMenuAttribute: {
    textMargin: {
      right: 10
    }
  },
  onRightClick: () => {
    console.log("============click")
  }
})

17. Custom Title

ActionBar({
  titleLayout: this.titleLayout
})

18. The left button defines itself

ActionBar({
  title: "left",
  leftMenuLayout: this.leftMenuLayout
})

19. The right button defines itself

ActionBar({
  title: "right",
  rightMenuLayout: this.rightMenuLayout
})

use summary 

it is a very simple Title bar component, there is no too much technical content, one thing needs to be noted, when using immersion, pay attention to the position of the title bar, need to avoid the status bar.