#星光计划2.0# 鸿蒙模仿boss直聘客户端更新教程原创精华

xq9527

发布于 2021-12-14 14:08

浏览

1收藏

前言：

那么废话不多说，我们正式开始。

效果图

带顶部导航的

#星光计划2.0# 鸿蒙模仿boss直聘客户端更新教程-鸿蒙开发者社区

不带tabbar顶部导航的

#星光计划2.0# 鸿蒙模仿boss直聘客户端更新教程-鸿蒙开发者社区

具体实现

我们这次更新使用 Fraction
底部布局

<?xml version="1.0" encoding="utf-8"?>
<DependentLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
     >
    <DirectionalLayout
        ohos:id="$+id:bottom_dl"
        ohos:height="60vp"
        ohos:width="match_parent"
        ohos:orientation="horizontal"
        ohos:align_parent_bottom="true"

        >
    <DirectionalLayout
        ohos:id="$+id:job_page_dl"
        ohos:height="match_parent"
        ohos:width="0"
        ohos:weight="1"
        ohos:orientation="vertical"
        >

        <Image
            ohos:id="$+id:job_page_image"
            ohos:height="match_content"
            ohos:width="match_content"
            ohos:layout_alignment="vertical_center|horizontal_center"
            ohos:image_src="$media:ic_main_tab_find_pre"
            >
        </Image>
        <Text
            ohos:id="$+id:job_page_text"
            ohos:height="match_parent"
            ohos:width="match_parent"
            ohos:layout_alignment="horizontal_center"
            ohos:text="职位"
            ohos:text_color="#008577"
            ohos:layout_direction="locale"
            ohos:text_size="15vp"
            ohos:left_margin="20vp"
            >
        </Text>


    </DirectionalLayout>

        <DirectionalLayout
            ohos:id="$+id:company_page_dl"
            ohos:height="match_parent"
            ohos:width="0"
            ohos:weight="1"
            ohos:orientation="vertical"
            >

            <Image
                ohos:id="$+id:company_page_image"
                ohos:height="match_content"
                ohos:width="match_content"
                ohos:layout_alignment="vertical_center|horizontal_center"
                ohos:image_src="$media:ic_main_tab_company_nor"
                >
            </Image>
            <Text
                ohos:id="$+id:company_page_text"
                ohos:height="match_parent"
                ohos:width="match_parent"
                ohos:layout_alignment="vertical_center|horizontal_center"
                ohos:text="公司"
                ohos:text_color="#6B6B6B"
                ohos:text_size="15vp"
                ohos:left_margin="20vp"
                >
            </Text>
        </DirectionalLayout>

        <DirectionalLayout
            ohos:id="$+id:chat_page_dl"
            ohos:height="match_parent"
            ohos:width="0"
            ohos:weight="1"
            ohos:orientation="vertical"
            >
            <Image
                ohos:id="$+id:chat_page_image"
                ohos:height="match_content"
                ohos:width="match_content"
                ohos:layout_alignment="vertical_center|horizontal_center"
                ohos:image_src="$media:ic_main_tab_company_nor"
                >
            </Image>
            <Text
                ohos:id="$+id:chat_page_text"
                ohos:height="match_parent"
                ohos:width="match_parent"
                ohos:layout_alignment="vertical_center|horizontal_center"
                ohos:text="消息"
                ohos:text_color="#6B6B6B"
                ohos:text_size="15vp"
                ohos:left_margin="20vp"
                >
            </Text>
        </DirectionalLayout>
        <DirectionalLayout
            ohos:id="$+id:mine_page_dl"
            ohos:height="match_parent"
            ohos:width="0"
            ohos:weight="1"
            ohos:orientation="vertical"
            >
            <Image
                ohos:id="$+id:mine_page_image"
                ohos:height="match_content"
                ohos:width="match_content"
                ohos:layout_alignment="vertical_center|horizontal_center"
                ohos:image_src="$media:ic_main_tab_my_nor"
                >
            </Image>
            <Text
                ohos:id="$+id:mine_page_text"
                ohos:height="match_parent"
                ohos:width="match_parent"
                ohos:layout_alignment="vertical_center|horizontal_center"
                ohos:text="我的"
                ohos:text_color="#6B6B6B"
                ohos:text_size="15vp"
                ohos:left_margin="20vp"
                >
            </Text>
        </DirectionalLayout>
    </DirectionalLayout>
    <StackLayout
        ohos:id="$+id:mainstack"
        ohos:height="match_parent"
        ohos:width="match_parent"
        ohos:above="$id:bottom_dl"
        >
    </StackLayout>
</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.
107.
108.
109.
110.
111.
112.
113.
114.
115.
116.
117.
118.
119.
120.
121.
122.
123.
124.
125.
126.
127.
128.
129.
130.
131.
132.
133.
134.
135.
136.
137.
138.

底部布局效果

#星光计划2.0# 鸿蒙模仿boss直聘客户端更新教程-鸿蒙开发者社区
底部布局简单说下是一个线性布局 DirectionalLayout 水平方向里面写了四个 DirectionalLayout 线性布局然后每个线性布局里面嵌套一个inage图片空间和text文本控件来显示底部的tab 然后我们在底部布局到上面添加了一个StackLayout 布局来装载我们的Fraction 控件

MainAbility 逻辑具体具体实现

1 自己的Ability 继承 FractionAbility

public class MainAbility extends FractionAbility implements Component.ClickedListener {
    private Image job_pageimage;
    private Image company_page_image;
    private Image chat_page_image;
    private Image mine_page_image;
    private Text job_pagetext,company_page_text ,chat_page_text ,mine_page_text;
    private DirectionalLayout job_pagedl , company_page_dl, chat_page_dl,mine_page_dl;

   @Override
   public void onStart(Intent intent) {
       super.onStart(intent);
       super.setUIContent(ResourceTable.Layout_ability_main);
       addHomeFraction();
       initview();

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

2控件初始化、

    private void initview() {
        job_pageimage= (Image) findComponentById(ResourceTable.Id_job_page_image);
        company_page_image= (Image) 
        findComponentById(ResourceTable.Id_company_page_image);
        chat_page_image= (Image) findComponentById(ResourceTable.Id_chat_page_image);
        mine_page_image= (Image) findComponentById(ResourceTable.Id_mine_page_image);
        job_pagetext= (Text) findComponentById(ResourceTable.Id_job_page_text);
        company_page_text= (Text) findComponentById(ResourceTable.Id_company_page_text);
        chat_page_text= (Text) findComponentById(ResourceTable.Id_chat_page_text);
        mine_page_text= (Text) findComponentById(ResourceTable.Id_mine_page_text);
        job_pagedl= (DirectionalLayout) findComponentById(ResourceTable.Id_job_page_dl);
        company_page_dl= (DirectionalLayout) 
        findComponentById(ResourceTable.Id_company_page_dl);
        chat_page_dl= (DirectionalLayout) findComponentById(ResourceTable.Id_chat_page_dl);
        mine_page_dl= (DirectionalLayout) findComponentById(ResourceTable.Id_mine_page_dl);
        job_pagedl.setClickedListener(this);
        company_page_dl.setClickedListener(this);
        chat_page_dl.setClickedListener(this);
        mine_page_dl.setClickedListener(this);

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

3 点击事件

   @Override
    public void onClick(Component component) {
        switch (component.getId()){
            case ResourceTable.Id_job_page_dl:
                job_pageimage.setPixelMap(ResourceTable.Media_ic_main_tab_find_pre);
                company_page_image.setPixelMap(ResourceTable.Media_ic_main_tab_company_nor);
                chat_page_image.setPixelMap(ResourceTable.Media_ic_main_tab_contacts_nor);
                mine_page_image.setPixelMap(ResourceTable.Media_ic_main_tab_my_nor);
                job_pagetext.setTextColor(Color.GREEN);
                company_page_text.setTextColor(Color.GRAY);
                chat_page_text.setTextColor(Color.GRAY);
                mine_page_text.setTextColor(Color.GRAY);
                layoutShow(0);

                break;
            case ResourceTable.Id_company_page_dl:
                job_pageimage.setPixelMap(ResourceTable.Media_ic_main_tab_find_nor);
                company_page_image.setPixelMap(ResourceTable.Media_ic_main_tab_company_pre);
                chat_page_image.setPixelMap(ResourceTable.Media_ic_main_tab_contacts_nor);
                mine_page_image.setPixelMap(ResourceTable.Media_ic_main_tab_my_nor);
                job_pagetext.setTextColor(Color.GRAY);
                company_page_text.setTextColor(Color.GREEN);
                chat_page_text.setTextColor(Color.GRAY);
                mine_page_text.setTextColor(Color.GRAY);
                layoutShow(1);
                break;
            case ResourceTable.Id_chat_page_dl:
                job_pageimage.setPixelMap(ResourceTable.Media_ic_main_tab_find_nor);
                company_page_image.setPixelMap(ResourceTable.Media_ic_main_tab_company_nor);
                chat_page_image.setPixelMap(ResourceTable.Media_ic_main_tab_contacts_pre);
                mine_page_image.setPixelMap(ResourceTable.Media_ic_main_tab_my_nor);
                job_pagetext.setTextColor(Color.GRAY);
                company_page_text.setTextColor(Color.GRAY);
                chat_page_text.setTextColor(Color.GREEN);
                mine_page_text.setTextColor(Color.GRAY);
                layoutShow(2);
                break;
            case ResourceTable.Id_mine_page_dl:
                job_pageimage.setPixelMap(ResourceTable.Media_ic_main_tab_find_nor);
                company_page_image.setPixelMap(ResourceTable.Media_ic_main_tab_company_nor);
                chat_page_image.setPixelMap(ResourceTable.Media_ic_main_tab_contacts_nor);
                mine_page_image.setPixelMap(ResourceTable.Media_ic_main_tab_my_pre);
                job_pagetext.setTextColor(Color.GRAY);
                company_page_text.setTextColor(Color.GRAY);
                chat_page_text.setTextColor(Color.GRAY);
                mine_page_text.setTextColor(Color.GREEN);
                layoutShow(3);
                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.

4多个Fraction切换逻辑

   public  void  layoutShow(int  code){
        switch (code){
            case 0:
            getFractionManager()
                        .startFractionScheduler()
                        .replace(ResourceTable.Id_mainstack, new JobFraction())
                        .submit();

            break;
            case 1:
            getFractionManager()
                        .startFractionScheduler()
                        .replace(ResourceTable.Id_mainstack, new CompanyFraction())
                        .submit();


            break;
          case 2:
          getFractionManager()
                      .startFractionScheduler()
                      .replace(ResourceTable.Id_mainstack, new MessageFraction())
                      .submit();

           break;
            case 3:
          getFractionManager()
                        .startFractionScheduler()
                        .replace(ResourceTable.Id_mainstack, new MinepageFraction())
                        .submit();

             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.

5 默认添加的Fraction

   private void  addHomeFraction(){
        getFractionManager()
                .startFractionScheduler()
                .add(ResourceTable.Id_mainstack, new JobFraction())
                .submit();
    }
1.
2.
3.
4.
5.
6.

整个MainAbility 逻辑就比较清晰了我们通过监听底部tab切换的点击事件回调方法我们调用FractionAbility 里面的 replace 和add方法来切换Fraction 和默认加载主页的Fraction 来实现了我们的上面的效果还做到了代码的解耦我们具体的每个碎片页面的逻辑我们就可以在每个独立的Fraction 单独去实现即可。
##具体的fraction的内部逻辑我们简单说一下

公司模块

布局文件

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

    <ListContainer
        ohos:id="$+id:jop_page_list"
        ohos:height="match_parent"
        ohos:width="match_parent">
    </ListContainer>
</DirectionalLayout>

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.

java逻辑代码

package com.example.tablist.fraction;
import com.example.tablist.ResourceTable;
import com.example.tablist.bean.PositionInfo;
import com.example.tablist.config.Api;
import com.example.tablist.provider.PositionProvider;
import com.google.gson.Gson;
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;
import ohos.agp.components.ListContainer;
import java.util.List;
/***
 *
 * 创建人：xuqing
 * 创建2021年2月28日17:24:03
 * 类说明： 公司模块
 *
 */
public class AttentionFraction extends Fraction {
    private PositionProvider positionProvider;
    private ListContainer listContainer;
    @Override
    protected Component onComponentAttached(LayoutScatter scatter, ComponentContainer container, 
                  Intent intent) {
        Component component=scatter.parse(ResourceTable.Layout_fraction_attention,container,false);
        return component;
    }
    protected void onStart(Intent intent) {
        super.onStart(intent);
        listContainer= (ListContainer) 
        getFractionAbility().findComponentById(ResourceTable.Id_jop_page_list);
        getPostition();
    }
    public  void  getPostition(){
        Gson gson=new Gson();
        PositionInfo positionInfo=gson.fromJson(Api.getPositioninfo(),PositionInfo.class);
        List<PositionInfo.DataBean> list=positionInfo.getData();
        positionProvider=new PositionProvider(list,  getFractionAbility());
        listContainer.setItemProvider(positionProvider);
    }
}
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.

几个fraction其实比较·简单都是加载本地死数据显示在listContainer 控件上面，其他几个fraction因为逻辑都差不多我这边就不展开一个一个讲有兴趣的同学可以下载完整代码去查阅。

顶部的导航问题

之前那一版顶部导航我们也没有去掉其实这个很容易我们只需要在config.json文件中添加如下代码即可

  "metaData":{      "customizeData":[        {          "name": "hwc-theme",          "value": "androidhwext:style/Theme.Emui.Light.NoTitleBar",          "extra": ""        }      ]    }
1.

#星光计划2.0# 鸿蒙模仿boss直聘客户端更新教程-鸿蒙开发者社区
到此鸿蒙模仿boss直聘客户端就讲完了其他页面的实现都差别不大大家可以去下载完整代码查阅这次算是更新教程。之前教程因为个人知识疏漏说以给大家补上以免给各位同学造成误导实在不好意思

最后总结

鸿蒙里面提供的 Fraction（字面意思小部分）用法和安卓里面的fragment(碎片页)用法差不多都是不能单独显示要依附于视图。生命周期也比较类似 Fraction解决了我们常用app开发中多个tab切换的问题，所以这次使用 Fraction 控件来更新了之前模仿 boss直聘项目，在这里我为之前的文章里面的描述错误给华为和各位同学道歉。当然 Fraction 也有缺陷在实际开发中，我们可能需要让Fraction嵌套Fraction，目前鸿蒙还不支持Fraction嵌套Fraction。想信华为会尽快解决这个问题我们也希望华为越来越好王者归来最后希望我的文章能帮助到各位解决问题，以后我还会贡献更多有用的代码分享给大家。各位同学如果觉得文章还不错，麻烦给关注和star，小弟在这里谢过啦!

项目地址

码云：https://gitee.com/qiuyu123/newhms_boss

分类

OpenHarmony

HarmonyOS

标签

鸿蒙

51CTO

51CTO博客

51CTO学堂

#星光计划2.0# 鸿蒙模仿boss直聘客户端更新教程原创精华

前言：

效果图

带顶部导航的

不带tabbar顶部导航的

具体实现

底部布局效果

MainAbility 逻辑具体具体实现

1 自己的Ability 继承 FractionAbility

2控件初始化、

3 点击事件

4多个Fraction切换逻辑

5 默认添加的Fraction

公司模块

顶部的导航问题

最后总结

项目地址

目录

订阅鸿蒙技术特刊，精选内容抢先看

51CTO

51CTO博客

51CTO学堂

#星光计划2.0# 鸿蒙 模仿boss直聘客户端更新教程 原创 精华

前言：

效果图

带顶部导航的

不带tabbar顶部导航的

具体实现

底部布局效果

MainAbility 逻辑具体具体实现

1 自己的Ability 继承 FractionAbility

2控件初始化、

3 点击事件

4多个Fraction切换逻辑

5 默认添加的Fraction

公司模块

顶部的导航问题

最后总结

项目地址

目录

订阅鸿蒙技术特刊，精选内容抢先看

#星光计划2.0# 鸿蒙模仿boss直聘客户端更新教程原创精华