Preface:

Hello, everyone. I haven’t updated my article for some time. I don’t know how long it will take. Today I want to cooperate with the top switch control tabList provided in Hongmeng to achieve the effect of the top TAB switch and the following multiple fractions. So without further ado let’s get started

The preparatory work

Installation of the Hongmeng development environment you can see my previous article

Huawei HongMeng system development experience in the early: www.jianshu.com/p/f94c847c7…

Effect:

Concrete implementation:

Tablist layout

<? The 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" /> <StackLayout ohos:id="$+id:mainstack" ohos:height="match_parent" ohos:width="match_parent" > </StackLayout> </DirectionalLayout>Copy the code

We wrote a tabList on top of the vertical linear layout and a StackLayout underneath to load our multiple fractions

  • Java code logic

Top label data

Private String[] STR ={private String[] STR ={private String[] STR ={private String[] STR ={private String[] STR ={private String[]Copy the code

Initialize the TAB and add the top TAB text

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); Tablist.settabmargin (26); // Set tabList.settabMargin (26); */ addHomeFraction(); tabList.addTabSelectedListener(new TabList.TabSelectedListener() { @Override public void onSelected(TabList.Tab tab) { System.out.println(" callback when a Tab is unselected when a Tab is selected "); // Callback when a Tab is unselected when a Tab is selected. layoutShow(tab.getPosition()); } @override public void onUnselected(tablist.tab Tab) {// Callback when a Tab changes from selected to unselected System.out.println(" callback when a Tab changes from selected to unchecked "); } @override public void onReselected(tablist.tab Tab) {system.out.println (" TabList.tab ");} @override public void onReselected(tablist.tab Tab) { State callback when clicked again "); }}); }}Copy the code

After we initialize our tabList control, we loop through the for loop to set our tabList TAB and add it to the addTab method of the tabList component

Multiple fractions switch logic

private void addHomeFraction(){ getFractionManager() .startFractionScheduler() .add(ResourceTable.Id_mainstack, new AttentionFraction()) .submit(); } public void layoutShow(int code){ switch (code){ case 0: getFractionManager() .startFractionScheduler() .replace(ResourceTable.Id_mainstack, new AttentionFraction()) .submit(); break; case 1: getFractionManager() .startFractionScheduler() .replace(ResourceTable.Id_mainstack, new RecommendFraction()) .submit(); break; case 2: getFractionManager() .startFractionScheduler() .replace(ResourceTable.Id_mainstack, new HotspotFraction()) .submit(); break; case 3: getFractionManager() .startFractionScheduler() .replace(ResourceTable.Id_mainstack, new QuestionFraction()) .submit(); break; default: break; }}Copy the code

So here we have an addHomeFraction method and a layoutShow method and we call addHomeFraction when we enter MainAbility to load the first default fraction Then when we click on the tabList TAB at the top we call the layoutShow method in the onSelected callback

Public void onSelected(tablist.tab Tab) {system.out. println(" Callback when a Tab is selected when a Tab is selected "); layoutShow(tab.getPosition()); }Copy the code

We just need to pass in tab.getPosition() and click on the subscript of the top TAB

  • Focus on modules

Layout file

Refer to the paragraph

<? The XML version = "1.0" encoding = "utf-8"? > <DirectionalLayout xmlns:ohos="http://schemas.huawei.com/res/ohos" ohos:height="match_parent" ohos:orientation="vertical" ohos:width="match_parent"> <ListContainer ohos:id="$+id:jop_page_list" ohos:height="match_parent" ohos:width="match_parent"> </ListContainer> </DirectionalLayout>Copy the code

Java logic code

package com.example.tablist.fraction; import com.example.tablist.ResourceTable; import com.example.tablist.bean.PositionInfo; import com.example.tablist.config.Api; import com.example.tablist.provider.PositionProvider; import com.google.gson.Gson; import ohos.aafwk.ability.fraction.Fraction; import ohos.aafwk.content.Intent; import ohos.agp.components.Component; import ohos.agp.components.ComponentContainer; import ohos.agp.components.LayoutScatter; import ohos.agp.components.ListContainer; import java.util.List; /*** ** Founded by: xuqing * Created February 28, 2021 17:24:03 * Public class AttentionFraction extends Fraction {private PositionProvider PositionProvider; private ListContainer listContainer; @Override protected Component onComponentAttached(LayoutScatter scatter, ComponentContainer container, Intent intent) { Component component=scatter.parse(ResourceTable.Layout_fraction_attention,container,false); return component; } protected void onStart(Intent intent) { super.onStart(intent); listContainer= (ListContainer) getFractionAbility().findComponentById(ResourceTable.Id_jop_page_list); getPostition(); } public void getPostition(){ Gson gson=new Gson(); PositionInfo positionInfo=gson.fromJson(Api.getPositioninfo(),PositionInfo.class); List<PositionInfo.DataBean> list=positionInfo.getData(); positionProvider=new PositionProvider(list, getFractionAbility()); listContainer.setItemProvider(positionProvider); }}Copy the code

Several fractions are actually relatively simple. They are all loaded with local dead data and displayed on the listContainer control. The other fractions have similar logic, so I won’t expand them one by one. TabList Fraction to implement the top switching effect ## We only need a simple basic to switch the top TAB. Then we combine fraction with our Ability to bind, but our Ability needs to inherit FractionAbility. In this way, we can complete the binding of fraction and ability. We can call our method of replacing the fraction in the callback method of tabList, so that the fraction below can be switched when the tabList at the top is clicked The whole code logic is relatively simple, as in the previous article at the bottom of the switch. If you are interested in the linkage effect of tablist and fraction, you can study it privately. I don’t have enough space to elaborate on it. Finally, I hope my article can help you solve the problem. If you think the article is good, please pay attention and star. Thank you

Project Address:

Yards cloud: gitee.com/qiuyu123/ta…