RadioContainer+Fraction实现底部导航

上篇写了TabList+Fraction实现顶部导航

这篇文章用RadioContainer+Fraction实现底部导航。

先看效果图：

 

 

 

 

一、AbilitySlice布局文件

<?xml version="1.0" encoding="utf-8"?>
<DependentLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:background_element="$color:dialog_btn_gray_color"
    ohos:orientation="vertical"
    >

    <RadioContainer
        ohos:id="$+id:radio_container"
        ohos:height="70vp"
        ohos:width="match_parent"
        ohos:align_parent_bottom="true"
        ohos:background_element="white"
        ohos:orientation="horizontal"
        >

        <RadioButton
            ohos:id="$+id:home_radio"
            ohos:height="match_parent"
            ohos:width="match_parent"
            ohos:weight="1"
            ohos:text="Home"
            ohos:element_top="$graphic:home_select"
            ohos:top_padding="7vp"
            ohos:check_element="null"
            ohos:text_color_on="$color:button_blue_color"
            ohos:text_color_off="#bfbfbf"
            ohos:marked="true"
            />

        <RadioButton
            ohos:id="$+id:news_radio"
            ohos:height="match_parent"
            ohos:width="match_parent"
            ohos:weight="1"
            ohos:text="News"
            ohos:element_top="$graphic:news_select"
            ohos:top_padding="7vp"
            ohos:check_element="null"
            ohos:text_color_on="$color:button_blue_color"
            ohos:text_color_off="#bfbfbf"
            />

        <RadioButton
            ohos:id="$+id:info_radio"
            ohos:height="match_parent"
            ohos:width="match_parent"
            ohos:weight="1"
            ohos:text="Info"
            ohos:element_top="$graphic:info_select"
            ohos:top_padding="7vp"
            ohos:check_element="null"
            ohos:text_color_on="$color:button_blue_color"
            ohos:text_color_off="#bfbfbf"
            />
    </RadioContainer>


    <StackLayout
        ohos:id="$+id:content_layout"
        ohos:height="match_parent"
        ohos:width="match_parent"
        ohos:above="$+id:radio_container"
        />
</DependentLayout>

二、初始化RadioContainer

radio_container = (RadioContainer) findComponentById(ResourceTable.Id_radio_container);

三、监听选中事件并在选中事件中处理显示fraction逻辑

radio_container.setMarkChangedListener((radioContainer, i) -> {
    HiLog.error(LABEL, "checkid:%{public}s", i);
    switch (i) {
        case 0:
            replaceHomeFraction();
            break;
        case 1:
            replaceNewsFraction();
            break;
        case 2:
            replaceInfoFraction();
            break;
    }
});

四、切换Fraction方法

private void replaceHomeFraction() {
    FractionManager mFractionManager = ((FractionAbility) getAbility()).getFractionManager();
    FractionScheduler fractionScheduler = mFractionManager.startFractionScheduler();
    if (newsFraction != null) {
        fractionScheduler.hide(newsFraction);
    }
    if (infoFraction != null) {
        fractionScheduler.hide(infoFraction);
    }
    if (homeFraction == null) {
        homeFraction = new HomeFraction();
        fractionScheduler.add(ResourceTable.Id_content_layout, homeFraction).show(homeFraction).submit();
    } else {
        fractionScheduler.show(homeFraction).submit();
    }

}

private void replaceInfoFraction() {
    FractionManager mFractionManager = ((FractionAbility) getAbility()).getFractionManager();
    FractionScheduler fractionScheduler = mFractionManager.startFractionScheduler();

    if (newsFraction != null) {
        fractionScheduler.hide(newsFraction);
    }
    if (homeFraction != null) {
        fractionScheduler.hide(homeFraction);
    }

    if (infoFraction == null) {
        infoFraction = new InfoFraction();
        fractionScheduler.add(ResourceTable.Id_content_layout, infoFraction).show(infoFraction).submit();
    } else {
        fractionScheduler.show(infoFraction).submit();
    }
}

private void replaceNewsFraction() {
    FractionManager mFractionManager = ((FractionAbility) getAbility()).getFractionManager();
    FractionScheduler fractionScheduler = mFractionManager.startFractionScheduler();
    if (homeFraction != null) {
        fractionScheduler.hide(homeFraction);
    }
    if (infoFraction != null) {
        fractionScheduler.hide(infoFraction);
    }
    if (newsFraction == null) {
        newsFraction = new NewsFraction();
        fractionScheduler.add(ResourceTable.Id_content_layout, newsFraction).show(newsFraction).submit();
    } else {
        fractionScheduler.show(newsFraction).submit();
    }
}

五、fration代码

public class NewsFraction extends Fraction {

    @Override
    protected Component onComponentAttached(LayoutScatter scatter, ComponentContainer container, Intent intent) {
        Component component = scatter.parse(ResourceTable.Layout_news_layout, container, false);
        return component;
    }

    @Override
    protected void onStart(Intent intent) {
        super.onStart(intent);

    }

@Override
    protected void onActive() {
        super.onActive();
    }

}

最后附上 radioButtion 选中效果xml

home_select.xml

<?xml version="1.0" encoding="utf-8"?>
<state-container
    xmlns:ohos="http://schemas.huawei.com/res/ohos">

    <item
        ohos:element="$graphic:icon_home_sel"
        ohos:state="component_state_checked"/>

    <item
        ohos:element="$graphic:icon_home"
        ohos:state="component_state_empty"/>
</state-container>

icon_home_sel和icon_home 都是svg转的xml。