鸿蒙应用开发之Ability底部导航栏
先说一下功能需求:点击底部导航的图片所在的区域，上方显示不同的内容，例如：点击第一个图标，中间显示文本内容“home”,点击第二个图标显示"list',点击第三个图标显示"me'，点击home的时候，home所在区域显示高亮，其他两个导航图标和文字显示灰色1 布局如下:ability_main.xml<?xml version="1.0" encoding="utf-8"?><D
·
先说一下功能需求:
点击底部导航的图片所在的区域，上方显示不同的内容，例如：点击第一个图标，中间显示
文本内容“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);
}
}
华为开发者空间，是为全球开发者打造的专属开发空间，汇聚了华为优质开发资源及工具，致力于让每一位开发者拥有一台云主机，基于华为根生态开发、创新。
更多推荐
2
0- 0
已为社区贡献1条内容
所有评论(0)