鴻蒙 模仿boss直聘客戶端更新教程

前言：

各位同學(xué)大家好 ，之前寫過(guò)一篇鴻蒙模仿boss直聘文章。那個(gè)時(shí)候我自己天真的以為鴻蒙里面沒(méi)有類似安卓里面的fragment，所以就用布局顯示隱藏來(lái)實(shí)現(xiàn)的 雖然效果是實(shí)現(xiàn)了但是并不是很理想 ，因?yàn)樗械倪壿嫸际菍懺谕粋€(gè)Ability 視圖里面，當(dāng)邏輯復(fù)雜了我們就很難處理了，不過(guò)之前·我查文檔發(fā)現(xiàn)鴻蒙提供了 Fraction 小部分這個(gè)控件給我們開(kāi)發(fā)使用，所以就更新一下之前的模仿boss直聘的客戶端項(xiàng)目
那么廢話不多說(shuō)，我們正式開(kāi)始。

效果圖

帶頂部導(dǎo)航的

QQ截圖20210118222943.png

QQ截圖20210118223003.png

QQ截圖20210118223029.png

QQ截圖20210118223042.png

不帶tabbar頂部導(dǎo)航的

image.png

image.png

image.png

image.png

具體實(shí)現(xiàn)

我們這次更新使用 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>

底部布局效果

image.png

底部布局簡(jiǎn)單說(shuō)下是一個(gè)線性布局 DirectionalLayout 水平方向里面寫了四個(gè) DirectionalLayout 線性布局 然后每個(gè)線性布局里面嵌套一個(gè)inage圖片空間和text文本控件來(lái)顯示底部的tab 然后我們?cè)?底部布局到上面添加了一個(gè)StackLayout 布局來(lái)裝載我們的Fraction 控件

MainAbility 邏輯具體具體實(shí)現(xiàn)

  • 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();

   }
}

  • 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);

    }
  • 3 點(diǎn)擊事件
   @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;
        }
    }

  • 4多個(gè)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;
        }
    }

  • 5 默認(rèn)添加的Fraction

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

整個(gè)MainAbility 邏輯就比較清晰了我們通過(guò)監(jiān)聽(tīng)底部tab切換的點(diǎn)擊事件回調(diào)方法我們調(diào)用FractionAbility 里面的 replace 和add方法來(lái)切換Fraction 和默認(rèn)加載主頁(yè)的Fraction 來(lái)實(shí)現(xiàn)了我們的上面的效果還做到了代碼的解耦 我們具體的每個(gè)碎片頁(yè)面的邏輯我們就可以在每個(gè)獨(dú)立的Fraction 單獨(dú)去實(shí)現(xiàn)即可。

具體的fraction的內(nèi)部邏輯我們簡(jiǎn)單說(shuō)一下

  • 公司模塊

布局文件

<?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>

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;
/***
 *
 * 創(chuàng)建人：xuqing
 * 創(chuàng)建2021年2月28日17:24:03
 * 類說(shuō)明： 公司模塊
 *
 */
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);
    }
}

幾個(gè)fraction其實(shí)比較·簡(jiǎn)單都是加載本地死數(shù)據(jù)顯示在listContainer 控件上面，其他幾個(gè)fraction因?yàn)檫壿嫸疾畈欢辔疫@邊就不展開(kāi)一個(gè)一個(gè)講 有興趣的同學(xué)可以下載完整代碼去查閱 。

頂部的導(dǎo)航問(wèn)題

之前那一版頂部導(dǎo)航我們也沒(méi)有去掉 其實(shí)這個(gè)很容易我們只需要在config.json文件中添加如下代碼即可

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

到此鴻蒙模仿boss直聘客戶端就講完了 其他頁(yè)面的實(shí)現(xiàn)都差別不大大家可以去下載完整代碼查閱 這次算是更新教程。之前教程因?yàn)閭€(gè)人知識(shí)疏漏說(shuō)以給大家補(bǔ)上 以免給各位同學(xué)造成誤導(dǎo) 實(shí)在不好意思

最后總結(jié)

鴻蒙里面提供的 Fraction（字面意思小部分）用法和安卓里面的fragment(碎片頁(yè))用法差不多 都是不能單獨(dú)顯示要依附于視圖 。生命周期也比較類似 Fraction解決了我們常用app開(kāi)發(fā)中多個(gè)tab切換的問(wèn)題 ，所以這次使用 Fraction 控件 來(lái)更新了之前模仿 boss直聘項(xiàng)目，在這里我為之前的文章里面的描述錯(cuò)誤給華為和各位同學(xué)道歉。當(dāng)然 Fraction 也有缺陷 在實(shí)際開(kāi)發(fā)中，我們可能需要讓Fraction嵌套Fraction，目前鴻蒙還不支持Fraction嵌套Fraction。想信華為會(huì)盡快解決這個(gè)問(wèn)題 我們也希望華為越來(lái)越好 王者歸來(lái) 最后希望我的文章能幫助到各位解決問(wèn)題 ，以后我還會(huì)貢獻(xiàn)更多有用的代碼分享給大家。各位同學(xué)如果覺(jué)得文章還不錯(cuò) ，麻煩給關(guān)注和star，小弟在這里謝過(guò)啦!

項(xiàng)目地址

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

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容