harmonyos tab碎片页 FractionAbility fragment FractionManage 原创

碎片页面->第一种实现方式-官方组件–FractionTabAbility范例代码

1. FractionAbility
2. FractionManager->FractionScheduler->add|show|replace|remove|hide|show ->submit

项目代码地址： https://gitee.com/hljdrl/harmonyos-app-example-viewpager

FractionTabAbility 代码
package org.ohos.sample.viewpager.fraction;

import ohos.aafwk.ability.Ability;
import ohos.aafwk.ability.fraction.FractionAbility;
import ohos.aafwk.content.Intent;
import ohos.aafwk.content.Operation;
import org.ohos.sample.viewpager.fraction.slice.TabAbilitySlice;

public class FractionTabAbility extends FractionAbility {

public static final void start(Ability ability){
    Intent intent = new Intent();
    Operation operation = new Intent.OperationBuilder().withDeviceId("")
            .withBundleName(ability.getBundleName())
            .withAbilityName(FractionTabAbility.class)
            .build();
    intent.setOperation(operation);
    ability.startAbility(intent);
}

@Override
protected void onStart(Intent intent) {
    super.onStart(intent);
    super.setMainRoute(TabAbilitySlice.class.getName());

}

}

TabAbilitySlice代码
package org.ohos.sample.viewpager.fraction.slice;

import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.ability.fraction.FractionAbility;
import ohos.aafwk.ability.fraction.FractionManager;
import ohos.aafwk.ability.fraction.FractionScheduler;
import ohos.aafwk.content.Intent;
import ohos.agp.components.Component;
import ohos.agp.components.DirectionalLayout;
import org.ohos.sample.viewpager.ResourceTable;
import org.ohos.sample.viewpager.fraction.fn.*;
import org.ohosx.toolbar.Toolbar;

import java.util.ArrayList;
import java.util.List;

public class TabAbilitySlice extends AbilitySlice implements Component.ClickedListener {

private Toolbar toolbar;
private List<DirectionalLayout> tabItems = new ArrayList();
private FractionAbility fractionAbility;
private FractionManager fractionManager;
private List<BaseFraction> fractions = new ArrayList();

@Override
protected void onStart(Intent intent) {
    super.onStart(intent);
    setUIContent(ResourceTable.Layout_ability_tab_fraction_v2);
    setToolbar();
    setupTabBar();
    setupFraction();
}

void setToolbar() {
    toolbar = Toolbar.builder(this);
    toolbar.setTitle("");
    toolbar.setBackClickedListener(new Component.ClickedListener() {
        @Override
        public void onClick(Component component) {
            terminate();
        }
    });
}

void setupFraction() {
    fractionAbility = (FractionAbility) getAbility();
    fractionManager = fractionAbility.getFractionManager();
    //
    fractions.add(new HomeFraction());
    fractions.add(new SecondFraction());
    fractions.add(new ThirdFraction());
    fractions.add(new MineFraction());
    //
    FractionScheduler scheduler = fractionManager.startFractionScheduler();
    for (BaseFraction fraction : fractions) {
        scheduler.add(ResourceTable.Id_stack_layout, fraction).hide(fraction);
    }
    scheduler.show(fractions.get(0));
    scheduler.submit();
    toolbar.setTitle(fractions.get(0).getTitle());
    setTabItemSelect(0);
}

void setupTabBar() {
    DirectionalLayout tabItem1 = (DirectionalLayout) findComponentById(ResourceTable.Id_item_tab_1);
    DirectionalLayout tabItem2 = (DirectionalLayout) findComponentById(ResourceTable.Id_item_tab_2);
    DirectionalLayout tabItem3 = (DirectionalLayout) findComponentById(ResourceTable.Id_item_tab_3);
    DirectionalLayout tabItem4 = (DirectionalLayout) findComponentById(ResourceTable.Id_item_tab_4);
    tabItems.add(tabItem1);
    tabItems.add(tabItem2);
    tabItems.add(tabItem3);
    tabItems.add(tabItem4);
    //
    tabItem1.setClickedListener(this);
    tabItem2.setClickedListener(this);
    tabItem3.setClickedListener(this);
    tabItem4.setClickedListener(this);
}

private void setSelectFraction(int index) {
    FractionScheduler scheduler = fractionManager.startFractionScheduler();

    scheduler.show(fractions.get(index));
    for (int i = 0; i < fractions.size(); i++) {
        if (i != index) {
            BaseFraction hide = fractions.get(i);
            scheduler.hide(hide);
        }
    }
    scheduler.submit();
    toolbar.setTitle(fractions.get(index).getTitle());
}

private void setTabItemSelect(int select) {
    tabItems.get(select).setSelected(true);
    for (int i = 0; i < tabItems.size(); i++) {
        if (i != select) {
            DirectionalLayout tabView = tabItems.get(i);
            tabView.setSelected(false);
        }
    }
}

@Override
public void onClick(Component component) {
    int index = tabItems.indexOf(component);
    setSelectFraction(index);
    setTabItemSelect(index);
}

}

Layout_ability_tab_fraction_v2.xml 布局
<?xml version=“1.0” encoding=“utf-8”?>
<DependentLayout
xmlns:ohos=“http://schemas.huawei.com/res/ohos”
ohos:height=“match_parent”
ohos:width=“match_parent”
>

<include
    ohos:height="$float:app_toolbar_height"
    ohos:width="match_parent"
    ohos:layout="$layout:lib_app_toolbar"/>

<DirectionalLayout
    ohos:id="$+id:app_tabbar"
    ohos:height="65vp"
    ohos:width="match_parent"
    ohos:align_parent_bottom="true"
    ohos:alignment="center"
    ohos:background_element="$color:color_app_tabbar_bg"
    ohos:bottom_padding="8vp"
    ohos:orientation="horizontal"
    ohos:top_padding="8vp"
    >

    <DirectionalLayout
        ohos:id="$+id:item_tab_1"
        ohos:height="$float:tab_view_height"
        ohos:width="$float:tab_view_width"
        ohos:background_element="$graphic:state_tab_item"
        ohos:margin="$float:tab_view_margin"
        ohos:text_alignment="center"
        >

    </DirectionalLayout>

    <DirectionalLayout
        ohos:id="$+id:item_tab_2"
        ohos:height="$float:tab_view_height"
        ohos:width="$float:tab_view_width"
        ohos:background_element="$graphic:state_tab_item"
        ohos:margin="$float:tab_view_margin"
        ohos:text_alignment="center"
        >

    </DirectionalLayout>

    <DirectionalLayout
        ohos:id="$+id:item_tab_3"
        ohos:height="$float:tab_view_height"
        ohos:width="$float:tab_view_width"
        ohos:background_element="$graphic:state_tab_item"
        ohos:margin="$float:tab_view_margin"
        ohos:text_alignment="center"
        >

    </DirectionalLayout>

    <DirectionalLayout
        ohos:id="$+id:item_tab_4"
        ohos:height="$float:tab_view_height"
        ohos:width="$float:tab_view_width"
        ohos:background_element="$graphic:state_tab_item"
        ohos:margin="$float:tab_view_margin"
        ohos:text_alignment="center"
        >

    </DirectionalLayout>


</DirectionalLayout>

<StackLayout
    ohos:below="$id:app_toolbar"
    ohos:id="$+id:stack_layout"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:above="$id:app_tabbar"
    ohos:background_element="$color:color_page_slider_bg"/>

</DependentLayout>