当前位置： 正文

鸿蒙 模仿boss直聘客户端实现教程

2024-10-24 视图效果 114

前言：

各位同学大家好有段时间没有给大家更新文章，具体多久我也不记得，最近在学习鸿蒙开发，就模仿boss直聘app的一些经典页面写了一个鸿蒙的开源demo 希望能帮助到各位同学学习 那么废话不多说，我们正式开始。

准备工作

1 安装鸿蒙开发环境 大家可以看我之前的文章
华为鸿蒙系统开发初体验 ：https://www.jianshu.com/p/f94c847c7fdc

效果图：

QQ截图20210118222943.png

QQ截图20210118223003.png

QQ截图20210118223029.png

QQ截图20210118223042.png

具体实现：

因为我们要做底部tab切换的效果 ，所以我查阅了很多鸿蒙的文档 希望能够有跟安卓里面的fragment 或者iOS里面的viewcontroller 给我们用这样可以做到每个碎片也逻辑分离 但是事与愿违，最后我想到用布局显示影藏 来做到切换的效果 这样做坏处是当每个切换的页面逻辑复杂了我们不好处理 代码冗余 ，但是没有办法 目前就简单粗暴实现效果 后面再想办法优化

底部tab布局

底部布局简单说下是一个线性布局 DirectionalLayout 水平方向里面写了四个 DirectionalLayout 线性布局 然后每个线性布局里面嵌套一个inage图片空间和text文本控件来显示底部的tab

控件初始化

    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);
        jop_page_module= (DirectionalLayout) findComponentById(ResourceTable.Id_jop_page_module);
        company_page_module= (DirectionalLayout) 
       findComponentById(ResourceTable.Id_company_page_module);
        chat_page_module= (DirectionalLayout) findComponentById(ResourceTable.Id_chat_page_module);
        mine_page_module= (DirectionalLayout) findComponentById(ResourceTable.Id_mine_page_module);
        listContainer= (ListContainer) findComponentById(ResourceTable.Id_jop_page_list);
        companylistComtainer= (ListContainer) findComponentById(ResourceTable.Id_company_page_list);
        messagelistComtainer= (ListContainer) findComponentById(ResourceTable.Id_message_page_list);
        job_pagedl.setClickedListener(this);
        company_page_dl.setClickedListener(this);
        chat_page_dl.setClickedListener(this);
        mine_page_dl.setClickedListener(this);
TypeScript

点击事件

 @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:
                super.setMainRoute(MinepageAbilitySlice.class.getName());
                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;
        }
    }
TypeScript

封装一个方式来处理4个布局显示影藏

   public  void  layoutShow(int  code){
        switch (code){
            case 0:
                jop_page_module.setVisibility(0);
                company_page_module.setVisibility(1);
                chat_page_module.setVisibility(1);
                mine_page_module.setVisibility(1);
                getPostition();

            break;
            case 1:
                jop_page_module.setVisibility(1);
                company_page_module.setVisibility(0);
                chat_page_module.setVisibility(1);
                mine_page_module.setVisibility(1);
                getCompany();
            break;
          case 2:
              jop_page_module.setVisibility(1);
              company_page_module.setVisibility(1);
              chat_page_module.setVisibility(0);
              mine_page_module.setVisibility(1);
              getMessage();
           break;
            case 3:
                jop_page_module.setVisibility(1);
                company_page_module.setVisibility(1);
                chat_page_module.setVisibility(1);
                mine_page_module.setVisibility(0);
             break;
            default:
            break;
        }
    }
TypeScript

然后我们观察职位模块 公司模块 消息模块都是上面一个标题 下面是列表 我这边就拿一个模块举例

职位模块

职位模块布局上门是一个 DependentLayout 嵌套一个text 显示标题 下面是ListContainer 列表组件
初始化控件

代码块 listContainer= (ListContainer) findComponentById(ResourceTable.Id_jop_page_list);
TypeScript

获取数据

这边是本地的模拟的数据

 public  static  String getPositioninfo(){
        String str="{n" +
                "    "msg": "获取数据成功",n" +
                "    "code": 200,n" +
                "    "data": [n" +
                "        {n" +
                "            "id": 4,n" +
                "            "name": "资深安卓工程师",n" +
                "            "cname": "今日头条",n" +
                "            "size": "D轮",n" +
                "            "salary": "40K-60K",n" +
                "            "username": "Kimi",n" +
                "            "title": "HR"n" +
                "        },n" +
                "        {n" +
                "            "id": 5,n" +
                "            "name": "资深安卓工程师",n" +
                "            "cname": "今日头条",n" +
                "            "size": "D轮",n" +
                "            "salary": "40K-60K",n" +
                "            "username": "Kimi",n" +
                "            "title": "HR"n" +
                "        },n" +
                "        {n" +
                "            "id": 6,n" +
                "            "name": "资深安卓工程师",n" +
                "            "cname": "今日头条",n" +
                "            "size": "D轮",n" +
                "            "salary": "40K-60K",n" +
                "            "username": "Kimi",n" +
                "            "title": "HR"n" +
                "        },n" +
                "        {n" +
                "            "id": 7,n" +
                "            "name": "资深安卓工程师",n" +
                "            "cname": "今日头条",n" +
                "            "size": "D轮",n" +
                "            "salary": "40K-60K",n" +
                "            "username": "Kimi",n" +
                "            "title": "HR"n" +
                "        },n" +
                "        {n" +
                "            "id": 8,n" +
                "            "name": "资深安卓工程师",n" +
                "            "cname": "今日头条",n" +
                "            "size": "D轮",n" +
                "            "salary": "40K-60K",n" +
                "            "username": "Kimi",n" +
                "            "title": "HR"n" +
                "        },n" +
                "        {n" +
                "            "id": 9,n" +
                "            "name": "资深安卓工程师",n" +
                "            "cname": "今日头条",n" +
                "            "size": "D轮",n" +
                "            "salary": "40K-60K",n" +
                "            "username": "Kimi",n" +
                "            "title": "HR"n" +
                "        },n" +
                "        {n" +
                "            "id": 10,n" +
                "            "name": "资深安卓工程师",n" +
                "            "cname": "今日头条",n" +
                "            "size": "D轮",n" +
                "            "salary": "40K-60K",n" +
                "            "username": "Kimi",n" +
                "            "title": "HR"n" +
                "        },n" +
                "        {n" +
                "            "id": 11,n" +
                "            "name": "资深安卓工程师",n" +
                "            "cname": "今日头条",n" +
                "            "size": "D轮",n" +
                "            "salary": "40K-60K",n" +
                "            "username": "Kimi",n" +
                "            "title": "HR"n" +
                "        },n" +
                "        {n" +
                "            "id": 12,n" +
                "            "name": "资深安卓工程师",n" +
                "            "cname": "今日头条",n" +
                "            "size": "D轮",n" +
                "            "salary": "40K-60K",n" +
                "            "username": "Kimi",n" +
                "            "title": "HR"n" +
                "        },n" +
                "        {n" +
                "            "id": 13,n" +
                "            "name": "移动端架构师",n" +
                "            "cname": "银汉游戏",n" +
                "            "size": "B轮",n" +
                "            "salary": "15K-20K",n" +
                "            "username": "刘丽",n" +
                "            "title": "人事主管"n" +
                "        },n" +
                "        {n" +
                "            "id": 14,n" +
                "            "name": "Java工程师",n" +
                "            "cname": "37互娱",n" +
                "            "size": "D轮",n" +
                "            "salary": "25K-30K",n" +
                "            "username": "Reiki",n" +
                "            "title": "HR-M"n" +
                "        }n" +
                "    ]n" +
                "}";
        return  str;
    }
TypeScript

用gson解析将json数据转成bean 然后获取里面 List list

    public  void  getPostition(){
        Gson gson=new Gson();
        PositionInfo positionInfo=gson.fromJson(Api.getPositioninfo(),PositionInfo.class);
        List list=positionInfo.getData();
        positionProvider=new PositionProvider(list,MainAbility.this);
        listContainer.setItemProvider(positionProvider);
    }
TypeScript

ListContainer的适配器

package com.example.hms_boss.provider;
import com.example.hms_boss.MainAbility;
import com.example.hms_boss.ResourceTable;
import com.example.hms_boss.bean.PositionInfo;
import ohos.agp.components.*;
import java.util.List;

public class PositionProvider extends RecycleItemProvider {

    private List list;
    private MainAbility slice;
    public PositionProvider(List list, MainAbility slice) {
        this.list = list;
        this.slice = slice;
    }
    @Override
    public int getCount() {
        return list.size();
    }
    @Override
    public Object getItem(int position) {
        return list.get(position);
    }
    @Override
    public long getItemId(int position) {
        return position;
    }

    @Override
    public Component getComponent(int i, Component component, ComponentContainer componentContainer) {
        if (component== null) {
            Component     cpt = LayoutScatter.getInstance(slice).parse(ResourceTable.Layout_position_listview_item,null,false);
            PositionInfo.DataBean  dataBean = list.get(i);
            Text position_nametext =(Text) cpt.findComponentById(ResourceTable.Id_position_name);
            Text position_namesizetext =(Text) cpt.findComponentById(ResourceTable.Id_position_namesize);
            Text text_hr =(Text) cpt.findComponentById(ResourceTable.Id_text_hr);
            Text position_salary_text =(Text) cpt.findComponentById(ResourceTable.Id_position_salary);
            position_nametext.setText(dataBean.getName());
            position_namesizetext.setText(dataBean.getCname()+dataBean.getSize());
            text_hr.setText(dataBean.getUsername()+"|"+dataBean.getTitle());
            position_salary_text.setText(dataBean.getSalary());
            return cpt;
        } else {
            return component;
        }
    }
}
TypeScript

ListContainer 设置适配器

companyProvicer=new CompanyProvicer(datalist,MainAbility.this);
  companylistComtainer.setItemProvider(companyProvicer);
TypeScript

到此鸿蒙模仿boss直聘客户端就讲完了 其他页面的实现都差别不大大家可以去下载完整代码查阅

最后总结

这次开发这个鸿蒙模仿boss直聘客户端 demo给我的感觉 鸿蒙跟现在安卓iOS比起来 差距还是有 我这边是用的java UI来布局的 基础的fragment或者viewcontroller 这样的控件都没有提供 感觉这个操纵系统还是很简陋 路还很长 不过好消息是很多基于java的库是在安卓 java EE 鸿蒙上面是通用的 我这边用json解析就是用google的gson来处理 非常方便 总而言之华为很长的路要走 ，我们只能一边默默支持一边耐心的等待华为王者归来

阅读全文
资源下载
下载价格免费
立即下载
下载说明：
1、本站所有资源均从互联网上收集整理而来，仅供学习交流之用，因此不包含技术服务请大家谅解！
2、本站不提供任何实质性的付费和支付资源，所有需要积分下载的资源均为网站运营赞助费用或者线下劳务费用！
3、本站所有资源仅用于学习及研究使用，您必须在下载后的24小时内删除所下载资源，切勿用于商业用途，否则由此引发的法律纠纷及连带责任本站和发布者概不承担！
4、本站站内提供的所有可下载资源，本站保证未做任何负面改动（不包含修复bug和完善功能等正面优化或二次开发），但本站不保证资源的准确性、安全性和完整性，用户下载后自行斟酌，我们以交流学习为目的，并不是所有的源码都100%无错或无bug！如有链接无法下载、失效或广告，请联系客服处理！
5、本站资源除标明原创外均来自网络整理，版权归原作者或本站特约原创作者所有，如侵犯到您的合法权益，请立即告知本站，本站将及时予与删除并致以最深的歉意！
6、如果您也有好的资源或教程，您可以投稿发布，成功分享后有站币奖励和额外收入！
7、如果您喜欢该资源，请支持官方正版资源，以得到更好的正版服务！
8、请您认真阅读上述内容，注册本站用户或下载本站资源即您同意上述内容！
原文链接：https://www.shuli.cc/?p=20362，转载请注明出处。
赏 0

猜你喜欢

2024-10-27 175

2024-10-27 157

2024-10-27 177

2024-10-27 189

2024-10-27 192

2024-10-27 128

评论0

取消

首页 发现 VIP 我的
显示验证码
没有账号？注册  忘记密码？