鸿蒙应用开发之Ability底部导航栏

先说一下功能需求:

 点击底部导航的图片所在的区域，上方显示不同的内容，例如：点击第一个图标，中间显示

文本内容“home”,点击第二个图标显示"list',点击第三个图标显示"me'，

点击home的时候，home所在区域显示高亮，其他两个导航图标和文字显示灰色

1 布局如下:

ability_main.xml

<?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:alignment="center"
    ohos:orientation="vertical">

    <StackLayout
        ohos:id="$+id:main_content"
        ohos:height="0vp"
        ohos:width="match_parent"
        ohos:weight="1">
    </StackLayout>
    <Image
        ohos:height="1vp"
        ohos:width="match_parent"
        ohos:image_src="#cccccc"></Image>
    <DirectionalLayout
        ohos:top_margin="10vp"
        ohos:height="50vp"
        ohos:width="match_parent"
        ohos:orientation="horizontal">
        <!--home-->
        <DirectionalLayout
            ohos:id="$+id:icon_home"
            ohos:height="match_parent"
            ohos:width="match_content"
            ohos:orientation="vertical"
            ohos:weight="1"
            >
            <Image
                ohos:id="$+id:home_img"
                ohos:layout_alignment="center"
                ohos:height="26vp"
                ohos:width="26vp"
                ohos:image_src="$media:icon_home"></Image>
            <Text
                ohos:id="$+id:home_txt"
                ohos:layout_alignment="center"
                ohos:height="match_content"
                ohos:width="match_content"
                ohos:text_size="10fp"
                ohos:text="home"></Text>
        </DirectionalLayout>
        <DirectionalLayout
            ohos:id="$+id:icon_list"
            ohos:weight="1"
            ohos:height="match_parent"
            ohos:width="match_content"
            ohos:orientation="vertical">
            <Image
                ohos:id="$+id:list_img"
                ohos:layout_alignment="center"
                ohos:height="26vp"
                ohos:width="26vp"
                ohos:image_src="$media:icon_list"></Image>
            <Text
                ohos:id="$+id:list_txt"
                ohos:layout_alignment="center"
                ohos:height="match_content"
                ohos:width="match_content"
                ohos:text="list"></Text>
        </DirectionalLayout>
        <DirectionalLayout
            ohos:id="$+id:icon_me"
            ohos:weight="1"
            ohos:height="match_parent"
            ohos:width="match_content"
            ohos:orientation="vertical">
            <Image
                ohos:id="$+id:me_img"
                ohos:image_src="$media:icon_me"
                ohos:layout_alignment="center"
                ohos:height="26vp"
                ohos:width="26vp"></Image>
            <Text
                ohos:id="$+id:me_txt"
                ohos:layout_alignment="center"
                ohos:height="match_content"
                ohos:width="match_content"
                ohos:text="me"></Text>
        </DirectionalLayout>
    </DirectionalLayout>

</DirectionalLayout>

布局分析:中间的同一片区域，当点击下面的图标要显示不同的内容，所以这里用的是层叠布局

<StackLayout
    ohos:id="$+id:main_content"
    ohos:height="0vp"
    ohos:width="match_parent"
    ohos:weight="1">
</StackLayout>

中间这片大的区域和下面的底部导航之间分割线用的是图片，只不过图片的高度是1vp,宽度是和它的屏幕一样宽

ohos:id="$+id:icon_home"
ohos:height="match_parent"
ohos:width="match_content"
ohos:orientation="vertical"
ohos:weight="1"

中间这片区域内容的切换需要写java代码，写三个Fraction

package com.gulixiong.abilitycase.fraction;

import com.gulixiong.abilitycase.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 HomeFraction extends Fraction {
    @Override
    protected Component onComponentAttached(LayoutScatter scatter, ComponentContainer container, Intent intent) {
        //指定布局文件
        Component component = scatter.parse(ResourceTable.Layout_fraction_home, container, false);
        return component;
    }
}

package com.gulixiong.abilitycase.fraction;

import com.gulixiong.abilitycase.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 ListFraction extends Fraction {

    @Override
    protected Component onComponentAttached(LayoutScatter scatter, ComponentContainer container, Intent intent) {
        //指定布局文件
        Component component = scatter.parse(ResourceTable.Layout_fraction_list, container, false);
        return component;
    }
}

package com.gulixiong.abilitycase.fraction;

import com.gulixiong.abilitycase.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 MeFraction extends Fraction {

    @Override
    protected Component onComponentAttached(LayoutScatter scatter, ComponentContainer container, Intent intent) {
        //指定布局文件
        Component component = scatter.parse(ResourceTable.Layout_fraction_me, container, false);
        return component;
    }
}

我们看到每个Fraction类中指定了布局，以MeFraction 为例，Component component = scatter.parse(ResourceTable.Layout_fraction_me, container, false);这里指定了

Layout_fraction_me，所以三个Fration需要分别新建三个对应的布局文件

fraction_home.xml

<?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:alignment="center"
    ohos:orientation="vertical">

    <Text
        ohos:id="$+id:fraction_home"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:text_size="20fp"
        ohos:text="home">

    </Text>

</DirectionalLayout>

fraction_list.xml

<?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:alignment="center"
    ohos:orientation="vertical">

    <Text
        ohos:id="$+id:fraction_list"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:text_size="20fp"
        ohos:text="list">
    </Text>

</DirectionalLayout>

fraction_me.xml

<?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:alignment="center"
    ohos:orientation="vertical">

    <Text
        ohos:id="$+id:fraction_me"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:text_size="20fp"
        ohos:text="me">
    </Text>

</DirectionalLayout>

MainAbilitySlice.java代码如下：

package com.gulixiong.abilitycase.slice;

import com.gulixiong.abilitycase.MainAbility;
import com.gulixiong.abilitycase.ResourceTable;
import com.gulixiong.abilitycase.fraction.HomeFraction;
import com.gulixiong.abilitycase.fraction.ListFraction;
import com.gulixiong.abilitycase.fraction.MeFraction;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.ability.fraction.FractionScheduler;
import ohos.aafwk.content.Intent;
import ohos.agp.components.Component;
import ohos.agp.components.DirectionalLayout;
import ohos.agp.components.Image;
import ohos.agp.components.Text;
import ohos.agp.utils.Color;
import ohos.hiviewdfx.HiLog;
import ohos.hiviewdfx.HiLogLabel;

public class MainAbilitySlice extends AbilitySlice {
    private static final HiLogLabel LABEL_LOG = new HiLogLabel(3, 0xD000F00, "fraction");
    //定义选中和没有选中时的颜色
    private int selectColor;
    private int unselectColor;
    DirectionalLayout icon_home;
    DirectionalLayout icon_list;
    DirectionalLayout icon_me;
    Text homeText;
    Text listText;
    Text meText;
    Image homeImg;
    Image listImg;
    Image meImg;

    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_ability_main);
        initColor();
        initUI();
        setListeners();
        loadFraction(0);
        setColor(0);
    }

    private void initColor(){
        selectColor = Color.getIntColor("#bfbfbf");
        unselectColor = Color.getIntColor("#0faeff");
        HiLog.info(LABEL_LOG,"initColor()----");
    }

    private void initUI(){
        icon_home= (DirectionalLayout) findComponentById(ResourceTable.Id_icon_home);
        icon_list= (DirectionalLayout) findComponentById(ResourceTable.Id_icon_list);
        icon_me= (DirectionalLayout) findComponentById(ResourceTable.Id_icon_me);

        homeText= (Text) findComponentById(ResourceTable.Id_home_txt);
        listText=(Text) findComponentById(ResourceTable.Id_list_txt);
        meText=(Text) findComponentById(ResourceTable.Id_me_txt);
        homeImg= (Image) findComponentById(ResourceTable.Id_home_img);
        listImg= (Image) findComponentById(ResourceTable.Id_list_img);
        meImg= (Image) findComponentById(ResourceTable.Id_me_img);
        HiLog.info(LABEL_LOG,"initUI()----");
    }

    private void setListeners(){
        icon_home.setClickedListener(new Component.ClickedListener() {
            @Override
            public void onClick(Component component) {
                loadFraction(0);
                setColor(0);
            }
        });
        icon_list.setClickedListener(new Component.ClickedListener() {
            @Override
            public void onClick(Component component) {
                loadFraction(1);
                setColor(1);
            }
        });
        icon_me.setClickedListener(new Component.ClickedListener() {
            @Override
            public void onClick(Component component) {
                loadFraction(2);
                setColor(2);
            }
        });
        HiLog.info(LABEL_LOG,"setListeners()----");
    }

    private void loadFraction(int type){
        //获取小部分的管理器
        MainAbility mainAbility = (MainAbility) getAbility();
        //获取FractionScheduler对象
        FractionScheduler scheduler=mainAbility.getFractionManager().startFractionScheduler();
        //建立FractionScheduler和Fraction之间的关系
        switch (type) {
            case 0 :{
                scheduler.replace(ResourceTable.Id_main_content,new HomeFraction());
                break;
            }
            case 1 :{
                scheduler.replace(ResourceTable.Id_main_content,new ListFraction());
                break;
            }
            case 2 :{
                scheduler.replace(ResourceTable.Id_main_content,new MeFraction());
                break;
            }
        }
        scheduler.submit();
        HiLog.info(LABEL_LOG,"loadFraction(int type)----");
    }


    private void setColor(int type){
          HiLog.info(LABEL_LOG,"setColor(int type)----开始");
          switch (type) {
              case 0: {
                  meImg.setImageAndDecodeBounds(ResourceTable.Media_icon_me);
                  listImg.setImageAndDecodeBounds(ResourceTable.Media_icon_list);
                  meText.setTextColor(new Color(unselectColor));
                  listText.setTextColor(new Color(unselectColor));

                  homeText.setTextColor(new Color(selectColor));
                  homeImg.setImageAndDecodeBounds(ResourceTable.Media_icon_home_xz);
                  break;
              }
              case 1: {
                  meImg.setImageAndDecodeBounds(ResourceTable.Media_icon_me);
                  homeImg.setImageAndDecodeBounds(ResourceTable.Media_icon_home);
                  meText.setTextColor(new Color(unselectColor));
                  homeText.setTextColor(new Color(unselectColor));

                  listText.setTextColor(new Color(selectColor));
                  listImg.setImageAndDecodeBounds(ResourceTable.Media_icon_list_xz);
                  break;
              }
              case 2: {
                  listImg.setImageAndDecodeBounds(ResourceTable.Media_icon_list);
                  homeImg.setImageAndDecodeBounds(ResourceTable.Media_icon_home);
                  listText.setTextColor(new Color(unselectColor));
                  homeText.setTextColor(new Color(unselectColor));

                  meText.setTextColor(new Color(selectColor));
                  meImg.setImageAndDecodeBounds(ResourceTable.Media_icon_me_xz);
                  break;
              }
          }
        HiLog.info(LABEL_LOG,"setColor(int type)----结束");
    }

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

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