Hongmeng tablist and tab basic usage tutorial

Preface ：

Hello everyone , I haven't updated the article for you for a while I don't remember exactly how long , I've been studying Hongmeng development recently （ Day 3 school ） Wrote some little demo Just want to share it with your family Today I'm going to talk about TabList and Tab Hongmeng OS Developing Top navigation control

preparation

1 Install Hongmeng development environment You can see my previous article
Initial experience of Huawei Hongmeng system development ：https://www.jianshu.com/p/f94c847c7fdc
design sketch ：

Concrete realization ：

Tablist You can switch multiple tab columns ,Tab For a tab . Sub tabs are usually placed above the content area , Show different categories . The tab name should be concise , Clearly describe the content of the classification .

• xml Created in TabList

<?xml version="1.0" encoding="utf-8"?><DirectionalLayout    xmlns:ohos="http://schemas.huawei.com/res/ohos"    ohos:height="match_parent"    ohos:width="match_parent"    ohos:orientation="vertical">    <TabList        ohos:id="$+id:tab_list"        ohos:top_margin="10vp"        ohos:tab_margin="12vp"        ohos:tab_length="60vp"        ohos:text_size="15fp"        ohos:height="36vp"        ohos:width="match_parent"        ohos:layout_alignment="center"        ohos:orientation="horizontal"        ohos:text_alignment="center"        ohos:normal_text_color="#999999"        ohos:selected_text_color="#FF0000"        ohos:selected_tab_indicator_color="#FF0000"        ohos:selected_tab_indicator_height="2vp"        /></DirectionalLayout>

• Set the font color and indicator The color of the

<TabList       ohos:normal_text_color="#999999"        ohos:selected_text_color="#FF0000"        ohos:selected_tab_indicator_color="#FF0000"        ohos:selected_tab_indicator_height="2vp">

• TabList Add Tab

     for (int i = 0; i < str.length; i++) {                TabList.Tab tab = tabList.new Tab(getContext());                tab.setText(str[i]);                tabList.addTab(tab);            }

• Fake data

    private  String[] str={"image","Video","Audio","HuaweiShare"};

• Set... In the code Tab Layout

tabList.setTabLength(60); //  Set up Tab Width tabList.setTabMargin(26); //  Set the two Tab The gap between 

Show the renderings ：

• Set up FixedMode
  The default is false, In this mode TabList The total width of is Tab The sum of the widths , If it's fixed TabList Width , When beyond the visual area , Then you can slide TabList To display . If set to true,TabList The total width of will be the same as the viewing area , each Tab The width will also vary according to TabList Distribute evenly over the width of , This mode is applicable to Tab Less often .

tabList.setFixedMode(true);

Show the renderings ：

• Add... To a location Tab

//  In this example, at " picture " and " video " In the tab between " Journalism " Tab TabList.Tab tab = createTab("News");tabList.addTab(tab, 1); // 1 Indicate location 

Define a create Tab And set up Tab Methods

//  establish Tab And set up Tabprivate TabList.Tab createTab(String name) {    TabList.Tab tab = tabList.new Tab(this);    tab.setText(name);    tab.setName(name);    tab.setMinWidth(64);    tab.setPadding(12, 0, 12, 0);    return tab;}

• Add... To a location Tab Show the renderings
  
• Listen in response to focus change events

   tabList.addTabSelectedListener(new TabList.TabSelectedListener() {                @Override                public void onSelected(TabList.Tab tab) {                    //  When a Tab Callback from unselected state to selected state                     new ToastDialog(MainAbility.this)                            .setText(" Callback from unselected state to selected state ")                            .setAlignment(LayoutAlignment.CENTER)                            .show();                }                @Override                public void onUnselected(TabList.Tab tab) {                    //  When a Tab Callback when changing from selected to unselected                     new ToastDialog(MainAbility.this)                            .setText(" Callback when changing from selected to unselected ")                            .setAlignment(LayoutAlignment.CENTER)                            .show();                }                @Override                public void onReselected(TabList.Tab tab) {                    //  When a Tab Is already selected , Status callback when clicked again                     new ToastDialog(MainAbility.this)                            .setText(" Is already selected , Status callback when clicked again ")                            .setAlignment(LayoutAlignment.CENTER)                            .show();                }            });

• Response listening event rendering ：
  
  

TabList Common interfaces

Tab Use

• Set up Tab attribute

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

• To select a Tab

tab.select();

• obtain Tab stay TabList Location index in

tab.getPosition();

• complete java Code ：

package com.example.tablist;import com.example.tablist.slice.MainAbilitySlice;import ohos.aafwk.ability.Ability;import ohos.aafwk.content.Intent;import ohos.agp.components.TabList;import ohos.agp.utils.LayoutAlignment;import ohos.agp.window.dialog.ToastDialog;/** * *  founder ：xuqing *  Creation time ：2020 year 12 month 20 Japan 15:33:53 *  Class description ： tablist  Example  * * */public class MainAbility extends Ability {    private  String[] str={"image","Video","Audio","HuaweiShare"};    @Override    public void onStart(Intent intent) {        super.onStart(intent);        super.setUIContent(ResourceTable.Layout_ability_main);        initview();    }    private void initview() {        TabList tabList = (TabList) findComponentById(ResourceTable.Id_tab_list);        if(tabList!=null){            for (int i = 0; i < str.length; i++) {                TabList.Tab tab = tabList.new Tab(getContext());                tab.setText(str[i]);                tabList.addTab(tab);            }           /* tabList.setTabLength(60); //  Set up Tab Width  tabList.setTabMargin(26); //  Set the two Tab The gap between */            tabList.addTabSelectedListener(new TabList.TabSelectedListener() {                @Override                public void onSelected(TabList.Tab tab) {                    //  When a Tab Callback from unselected state to selected state                     new ToastDialog(MainAbility.this)                            .setText(" Callback from unselected state to selected state ")                            .setAlignment(LayoutAlignment.CENTER)                            .show();                }                @Override                public void onUnselected(TabList.Tab tab) {                    //  When a Tab Callback when changing from selected to unselected                     new ToastDialog(MainAbility.this)                            .setText(" Callback when changing from selected to unselected ")                            .setAlignment(LayoutAlignment.CENTER)                            .show();                }                @Override                public void onReselected(TabList.Tab tab) {                    //  When a Tab Is already selected , Status callback when clicked again                     new ToastDialog(MainAbility.this)                            .setText(" Is already selected , Status callback when clicked again ")                            .setAlignment(LayoutAlignment.CENTER)                            .show();                }            });        }    }}

Here we are os in TabList and Tab The basic usage is over

The final summary ：

Let's finish reading Hongmeng TabList and Tab After basic usage, the feeling is similar to that in Android TabLayout as well as flutter in tabbar Is very similar It's used to deal with APP UI Top navigation in layout Multiple tab switching and sliding effects , In a word, Hongmeng TabList and Tab The functions are quite complete
Monitoring methods for various events And the methods officially exposed to us are very complete It allows us to easily realize various complex top navigation effects , Due to limited space I won't go into details here Interested students can do more research in private Can complete other more dazzling interaction effects , The above is my personal learning 3 Heavenly Hongmeng os Development For Hongmeng TabList and Tab A summary of basic usage If there are mistakes and mistakes, I hope you can correct them Finally, I hope my article can help you to solve the problem , In the future, I will contribute more useful code to share with you . If you think the article is good , Please pay attention and star, Thank you here

Project address ：

Code cloud ：https://gitee.com/qiuyu123/hm_tablist