鸿蒙 底部导航，中间凸起页面

鸿蒙 底部导航，中间凸起页面

1.布局
activity_main.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"
    ohos:orientation="vertical">

    <DirectionalLayout
        ohos:id="$+id:mainstack"
        ohos:height="match_parent"
        ohos:width="match_parent"
        ohos:background_element="#FFFFFF"
        ohos:weight="1"/>

    <DirectionalLayout
        ohos:height="match_content"
        ohos:width="match_parent"
        ohos:align_parent_bottom="true"
        ohos:background_element="transparent"
        ohos:orientation="horizontal">

        <DirectionalLayout
            ohos:id="$+id:homeLayout"
            ohos:height="match_content"
            ohos:width="match_content"
            ohos:background_element="#FFFFFF"
            ohos:top_margin="22vp"
            ohos:weight="2">

            <Image
                ohos:id="$+id:image1"
                ohos:height="40vp"
                ohos:width="40vp"
                ohos:image_src="$media:home_select"
                ohos:layout_alignment="center"
                ohos:scale_mode="stretch"
                ohos:top_padding="5vp"/>

            <Text
                ohos:id="$+id:text1"
                ohos:height="match_content"
                ohos:width="match_parent"
                ohos:bottom_margin="5vp"
                ohos:layout_alignment="center"
                ohos:text="首页"
                ohos:text_alignment="center"
                ohos:text_color="$color:color_f3"
                ohos:text_size="14fp"
                />

        </DirectionalLayout>

        <StackLayout
            ohos:height="match_parent"
            ohos:width="match_content"
            ohos:weight="1">

            <Image
                ohos:height="match_parent"
                ohos:width="match_parent"
                ohos:image_src="$media:img_home_tab_play_bg"
                ohos:scale_mode="stretch"/>

            <Image
                ohos:height="45vp"
                ohos:width="45vp"
                ohos:image_src="$media:model_add"
                ohos:layout_alignment="center"
                ohos:bottom_margin="8vp"
                ohos:scale_mode="stretch"/>

        </StackLayout>

        <DirectionalLayout
            ohos:id="$+id:meLayout"
            ohos:height="match_content"
            ohos:width="match_content"
            ohos:background_element="#fff"
            ohos:top_margin="22vp"
            ohos:weight="2">

            <Image
                ohos:id="$+id:image2"
                ohos:height="40vp"
                ohos:width="40vp"
                ohos:image_src="$media:me_unselect"
                ohos:layout_alignment="center"
                ohos:scale_mode="stretch"
                ohos:top_padding="5vp"/>

            <Text
                ohos:id="$+id:text2"
                ohos:height="match_content"
                ohos:width="match_parent"
                ohos:bottom_margin="5vp"
                ohos:layout_alignment="center"
                ohos:text="我的"
                ohos:text_alignment="center"
                ohos:text_size="14fp"
                />
        </DirectionalLayout>

    </DirectionalLayout>


</DependentLayout>

2.图片






3.主页面代码

package com.example.myapplication.slice;

import com.example.myapplication.Fraction.BookFraction;
import com.example.myapplication.Fraction.CircleFraction;
import com.example.myapplication.Fraction.MainFraction;
import com.example.myapplication.Fraction.MineFraction;
import com.example.myapplication.ResourceTable;
import com.example.myapplication.bar.bottom.BottomBarInfo;
import com.example.myapplication.bar.bottom.BottomNavigationBar;
import com.example.myapplication.bar.component.BottomBarComponentProvider;
import com.example.myapplication.bar.component.FractionBarComponent;
import ohos.aafwk.ability.Ability;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.ability.fraction.FractionAbility;
import ohos.aafwk.ability.fraction.FractionManager;
import ohos.aafwk.content.Intent;
import ohos.agp.components.*;
import ohos.agp.utils.Color;
import ohos.global.resource.NotExistException;
import ohos.global.resource.ResourceManager;
import ohos.global.resource.WrongTypeException;

import java.io.IOException;
import java.util.ArrayList;
import java.util.List;

public class MainAbilitySlice2 extends AbilitySlice implements Component.ClickedListener {


    private DirectionalLayout homebtn, mybtn;
    private int defaultColor;
    private int tintColor;

    private Text text1, text2;
    private Image image1, image2;

    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_ability_main2);
        homebtn = (DirectionalLayout) findComponentById(ResourceTable.Id_homeLayout);
        mybtn = (DirectionalLayout) findComponentById(ResourceTable.Id_meLayout);

        text1 = (Text) findComponentById(ResourceTable.Id_text1);
        text2 = (Text) findComponentById(ResourceTable.Id_text2);

        image1 = (Image) findComponentById(ResourceTable.Id_image1);
        image2 = (Image) findComponentById(ResourceTable.Id_image2);

        homebtn.setClickedListener(this);
        mybtn.setClickedListener(this);
        defaultColor = getColor(ResourceTable.Color_colorGray);
        tintColor = getColor(ResourceTable.Color_colorBlue);


        //调用自定义的颜色文件
        ResourceManager resManager = getAbility().getResourceManager();
        try {
            defaultColor = resManager.getElement(ResourceTable.Color_color_8a).getColor();
            tintColor = resManager.getElement(ResourceTable.Color_color_ed).getColor();
        } catch (IOException | WrongTypeException | NotExistException e) {
            e.printStackTrace();
        }

        addHomeFraction();
    }


    private void addHomeFraction() {
        ((FractionAbility) getAbility()).getFractionManager()
                .startFractionScheduler()
                .add(ResourceTable.Id_mainstack, new MainFraction())
                .submit();
    }


    private void replaceHomeFraction() {
        ((FractionAbility) getAbility()).getFractionManager()
                .startFractionScheduler()
                .replace(ResourceTable.Id_mainstack, new MainFraction())
                .submit();
    }

    private void replaceMyFraction() {
        ((FractionAbility) getAbility()).getFractionManager()
                .startFractionScheduler()
                .replace(ResourceTable.Id_mainstack, new MineFraction())
                .submit();
    }

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

    @Override
    public void onForeground(Intent intent) {
        super.onForeground(intent);
    }


    @Override
    public void onClick(Component component) {
        switch (component.getId()) {
            case ResourceTable.Id_homeLayout:
                text1.setTextColor(new Color(tintColor));
                image1.setImageAndDecodeBounds(ResourceTable.Media_home_select);
                text2.setTextColor(new Color(defaultColor));
                image2.setImageAndDecodeBounds(ResourceTable.Media_me_unselect);
                replaceHomeFraction();
                break;
            case ResourceTable.Id_meLayout:
                text2.setTextColor(new Color(tintColor));
                image2.setImageAndDecodeBounds(ResourceTable.Media_me_select);
                text1.setTextColor(new Color(defaultColor));
                image1.setImageAndDecodeBounds(ResourceTable.Media_home_unselect);
                replaceMyFraction();
                break;
            default:
                break;

        }
    }

}

4.MineFraction.java 【类似于Android 的Fragment】
注意：主Ability 继承 FractionAbility

package com.example.myapplication.Fraction;

import com.example.myapplication.ResourceTable;
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;

public class MineFraction extends Fraction {

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

}

5.效果图