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

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

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106

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;

        }
    }

}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126

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;
    }

}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

5.效果图