4.5 [Harmonyos Development] Components Tablist and Tab

Author: Han Ru

Company: Program Ka (Beijing) Technology Co., Ltd

Hongmeng Bus columnist

TabList can switch between multiple Tab fields, with a Tab as a single Tab. Subtabs are usually placed above the content area to show the different categories. The page signature should be concise and clearly describe the contents of the category.

Supported XML attributes

The common XML attributes of Tablist are inherited from: scrollView

TableList’s own XML properties are shown in the following table:

The attribute name	Product description	The values	The values that	Use case
fixed_mode	Fixed all tabs and display them simultaneously	Boolean type	You can set true/false directly, or you can refer to a Boolean resource.	ohos:fixed_mode=”true” ohos:fixed_mode=”$boolean:true_tag”
orientation	Direction of TAB arrangement	horizontal	Represents horizontal arrangement.	ohos:orientation=”horizontal”
		vertical	Represents vertical arrangement.	ohos:orientation=”vertical”
normal_text_color	Unselected text color	Color type	The color value can be set directly, or the color resource can be referenced.	ohos:normal_text_color=”#FFFFFFFF” ohos:normal_text_color=”$color:black”
selected_text_color	The color of the selected text	Color type	The color value can be set directly, or the color resource can be referenced.	ohos:normal_text_color=”#FFFFFFFF” ohos:normal_text_color=”$color:black”
selected_tab_indicator_color	Select the color of the TAB	Color type	The color value can be set directly, or the color resource can be referenced.	ohos:normal_text_color=”#FFFFFFFF” ohos:normal_text_color=”$color:black”
selected_tab_indicator_height	The height of the selected TAB	A float	A float type that represents a size. Can be a floating point value, the default unit is px; It can also be a floating-point value with px/ VP/FP units. Float resources can also be referenced.	ohos:tab_length=”100″ ohos:tab_length=”20vp” ohos:tab_length=”$float:size_value”
tab_indicator_type	The TAB indicates the type	invisible	Indicates that the selected TAB has no indicator markers.	ohos:tab_indicator_type=”invisible”
		bottom_line	Indicates that the selected TAB is marked with an underscore at the bottom.	ohos:tab_indicator_type=”bottom_line”
		left_line	Indicates that the selected TAB is marked by the left divider.	ohos:tab_indicator_type=”left_line”
		oval	Indicates that the selected TAB is marked with an elliptical background.	ohos:tab_indicator_type=”oval”
tab_length	The length of the TAB.	A float	A float type that represents a size. Can be a floating point value, the default unit is px; It can also be a floating-point value with px/ VP/FP units. Float resources can also be referenced.	ohos:tab_length=”100″ ohos:tab_length=”20vp” ohos:tab_length=”$float:size_value”
tab_margin	TAB spacing	A float	A float type that represents a size. Can be a floating point value, the default unit is px; It can also be a floating-point value with px/ VP/FP units. Float resources can also be referenced.	ohos:tab_margin=”100″ ohos:tab_margin=”20vp” ohos:tab_margin=”$float:size_value”
text_alignment	Text alignment	left	Indicates that text is left-aligned.	You can set the values as listed in the table, You can also use “\	“Make multiple combinations. ohos:text_alignment=”center” ohos:text_alignment=”top\	left”
		top	Indicates that the text is aligned at the top.
		right	Represents text aligned to the right.
		bottom	Indicates that the text is aligned at the bottom.
		horizontal_center	Indicates that text is horizontally centered.
		vertical_center	Indicates that text is vertically centered.
		center	Indicates that text is centered.
		start	Indicates that text is aligned against the beginning.
		end	Indicates that the text is aligned by the end.
text_size	Text size	A float	A float type that represents a size. Can be a floating point value, the default unit is px; It can also be a floating-point value with px/ VP/FP units. Float resources can also be referenced.	ohos:text_size=”100″ ohos:text_size=”16fp” ohos:text_size=”$float:size_value”

Create and set the TabList

Create TabList create TabList create TabList

<! -- Tablist allows multiple Tab fields to be switched between tabs. Ohos :tab_length=" 100VP ", width of each TAB Set spacing between two tabs --> <TabList ohos:id="$+id:tab_list" ohos:top_margin=" 10VP "ohos:tab_margin=" 24VP" ohos:tab_length=" 140VP" ohos:text_size="20fp" ohos:height="80vp" ohos:width="match_parent" ohos:layout_alignment="center" ohos:orientation="horizontal" ohos:background_element="#66999999" ohos:text_alignment="center"/>

You can also set the layout of the Tab in Java code:

tabList.setTabLength(60); // Set the Tab width tabList. SettabMargin (26); // Set the spacing between two tabs

2. Set font color of default state and selected state and indicator color:

<! -- ohos:normal_text_color="#000000", TAB default color ohos:selected_text_color="#AA0000", Ohos :selected_tab_indicator_color="#00AA00", the color of the selected TAB indicator line ohos:selected_tab_indicator_height=" 12VP ", > <TabList... > <TabList... ohos:normal_text_color="#000000" ohos:selected_text_color="#AA0000" ohos:selected_tab_indicator_color="#00AA00" ohos:selected_tab_indicator_height="12vp"/>

Add Tab to TabList

public class MainAbilitySlice extends AbilitySlice { @Override public void onStart(Intent intent) { super.onStart(intent); super.setUIContent(ResourceTable.Layout_ability_main); }}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}} // 2. Create Tab TabList.Tab tab1 = Tablist.new Tab(getContext()); tab1.setText("Image"); TabList.Tab tab2 = tabList.new Tab(getContext()); tab2.setText("Video"); TabList.Tab tab3 = tabList.new Tab(getContext()); tab3.setText("Audio"); AddTab (TabList, tab1); addTab(TabList, tab1); tabList.addTab(tab2); tabList.addTab(tab3); }

Effect:

4. Set FixedMode

Default is false. In this mode, the total width of the TabList is the sum of the Tab widths. If the width of the TabList is fixed, it can be displayed by sliding the TabList beyond the visible area. If set to true, the total width of the TabList will be the same as the visible area, and the width of each Tab will be equally distributed according to the width of the TabList. This pattern works for fewer tabs.

In XML:

<TabList
        ...
        ohos:fixed_mode="true"/>

Set in Java code:

tabList.setFixedMode(true);

The effect of setting fixedMode to true:

5. Add a Tab somewhere

Tablist.tab Tab = Tablist.new Tab(getContext()); Tablist.new Tab = Tablist.new Tab()); tab.setText("News"); // tab.setMinWidth(200); // tab.setPadding(40, 0, 40, 0); tabList.setTabLength(AttrHelper.vp2px(100, AttrHelper.getDensity(this))); // Set the Tab width tabList. SettabMargin (attrhelper.vp2px (15, attrhelper.getDensity (this))); // Set the spacing between two tabs tablist.addTab (Tab, 1); Println ("-- >"+ tablist.getTabCount ());

The effect of adding a TAB to a location:

6. Respond to changes in focus

tabList.addTabSelectedListener(new TabList.TabSelectedListener() { @Override public void onSelected(TabList.Tab tab) { // Callback when a Tab is changed from unchecked to checked... } @Override public void onUnselected(tablist.tab Tab) {// Override public void onUnselected(tablist.tab Tab) {// Override public void onUnselected(tablist.tab Tab) {// Override public void onUnselected(tablist.tab Tab); } @Override public void onreselfed (tablist.tab Tab) {// State callback when a Tab is selected and is clicked again... }});

TabList is a common interface

methods	instructions
getSelectedTab	Returns the Tab selected
getSelectedTabIndex	Returns the position index of the selected Tab
getTabCount	Gets the number of tabs
getTabAt	Get a Tab
removeTab	Removes a TAB at a location
setOrientation	Set horizontal or vertical directions

3. Use of TAB

Setting the Tab property

tab.setMinWidth(64); tab.setPadding(12, 0, 12, 0);

Select a Tab
```
tab.select();
```
Gets the position index of the Tab in the TabList
```
tab.getPosition();
```

1, community: https://www.harmonybus.net/ HongMeng bus

2. Official Account: Harmonybus

3, technical exchange QQ group: 714518656

Lesson 4, video: https://www.chengxuka.com

4.5 [Harmonyos Development] Components Tablist and Tab