【模块-Java 布局】HarmonyOS Codelab挑战赛记录

HarmonyOS

项目启动

然后会弹出一个框，需要升级一些东西

需要其他的模拟器，默认提供的两个无法启动，可以点击

创建一个 P40 的模拟器，需要华为开发者账号

如果一直登陆跳转，且提示登陆失败，可能是浏览器缓存的问题，测试谷歌浏览器失败了，可能由于本身使用了油猴脚本的原因，换用 edge 成功。

使用 P40 模拟器打开，点击绿色的按钮运行。

然后以 P40 模拟器运行，entry 这个项目

布局文件

以下所有布局文件即 xxx.xml 均为官网示例代码，复制即可使用

UI组件项目示例代码

类文件

以下类文件，即 xxx.java 代码均为官网示例代码，复制后需要导入组件所需的类按 Alt+Enter 即可智能导入，代码已上传 gitee

体验TabList和Tab组件

布局文件

在src/main/resources/base/layout目录下新建布局文件tab_list.xml，此布局文件中主要使用Tablist组件，并设置其样式。

slice 目录

在src/main/java/com/huawei/codelab/slice目录下新建TabListSlice.java文件，继承AbilitySlice。
定义成员变量

TabListSlice.java

package com.huawei.codelab.slice;

import com.huawei.codelab.ResourceTable;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.components.TabList;
import ohos.agp.components.Text;

public class TabListSlice extends AbilitySlice {
    // 需导入 import ohos.aafwk.ability.AbilitySlice;
    private TabList tabList; //需导入 import ohos.agp.components.TabList;
    private Text tabContent; // 需导入 import ohos.agp.components.Text;

    // 重写 AbilitySlice 类里的 onStart 方法
    @Override
    protected void onStart(Intent intent) {
   
        super.onStart(intent);
        // 加载布局文件，之前的 tab_list
        super.setUIContent(ResourceTable.Layout_tab_list);
        // 初始化组件
        initComponent();
        // 点击事件监听
        addTabSelectedListener();
    }
    private void initComponent() {
   
        // 根据 tab_list 中的组件 id 获取对应的组件
        tabContent = (Text) findComponentById(ResourceTable.Id_tab_content);
        tabList = (TabList) findComponentById(ResourceTable.Id_tab_list);
        initTab();
    }
    // 创建三个页签
    private void initTab() {
   
        if (tabList.getTabCount() == 0) {
   
            tabList.addTab(createTab("Image"));
            tabList.addTab(createTab("Video"));
            tabList.addTab(createTab("Audio"));
            tabList.setFixedMode(true);
            tabList.getTabAt(0).select();
            tabContent.setText("Select the " + tabList.getTabAt(0).getText());
        }
    }

    private TabList.Tab createTab(String text) {
   
        TabList.Tab tab = tabList.new Tab(this);
        tab.setText(text);
        tab.setMinWidth(64);
        tab.setPadding(12, 0, 12, 0);
        return tab;
    }

    private void addTabSelectedListener() {
   
        tabList.addTabSelectedListener(new TabList.TabSelectedListener() {
   
            @Override
            public void onSelected(TabList.Tab tab) {
   
                tabContent.setText("Select the " + tab.getText());
            }

            @Override
            public void onUnselected(TabList.Tab tab) {
   
            }

            @Override
            public void onReselected(TabList.Tab tab) {
   
            }
        });
    }

}

关联主页跳转

在src/main/java/com/huawei/codelab/slice/MainAbilitySlice.java的onClick方法中增加关联跳转。

@Override 
public void onClick(Component component) {
    
    String className = ""; 
    switch (component.getId()) {
    
        case ResourceTable.Id_tab_list: 
            className = "com.huawei.codelab.slice.TabListSlice"; 
            break; 
        default: 
            break; 
    } 
    abilitySliceJump(className); 
}

效果展示

体验ListContainer组件

布局文件

在src/main/resources/base/layout目录下创建以下三个布局文件

1. news_list_layout.xml作为新闻列表主界面
2. item_news_type_layout.xml作为上方的新闻类别的item详情布局
3. item_news_layout.xml作为中间的新闻列表的item详情布局

provider 目录

NewsTypeProvider.java ，用于构造新闻类别

package com.huawei.codelab.provider;

import com.huawei.codelab.ResourceTable;

import ohos.agp.components.*;
import ohos.app.Context;

import java.util.Optional;

public class NewsTypeProvider extends BaseItemProvider {
    // 继承
    // 声明变量
    private String[] newsTypeList;
    private Context context;

    public NewsTypeProvider(String[] listBasicInfo, Context context) {
   
        this.newsTypeList = listBasicInfo;
        this.context = context;
    }

    @Override
    public int getCount() {
   
        return newsTypeList == null ? 0 : newsTypeList.length;
    }

    @Override
    public Object getItem(int position) {
   
        return Optional.of(this.newsTypeList[position]);
    }

    @Override
    public long getItemId(int position) {
   
        return position;
    }

    @Override
    public Component getComponent(int position, Component componentP, ComponentContainer componentContainer) {
   
        ViewHolder viewHolder = null;
        Component component = componentP;
        if (component == null) {
   
            component = LayoutScatter.getInstance(context).parse(ResourceTable.Layout_item_news_type_layout, null, false);
            viewHolder = new ViewHolder();
            Component componentText = component.findComponentById(ResourceTable.Id_news_type_text);
            if (componentText instanceof Text) {
   
                viewHolder.title = (Text) componentText;
            }
            component.setTag(viewHolder);
        } else {
   
            if (component.getTag() instanceof ViewHolder) {
   
                viewHolder = (ViewHolder) component.getTag();
            }
        }
        if (viewHolder != null) {
   
            viewHolder.title.setText(newsTypeList[position]);
        }
        return component;
    }

    private static class ViewHolder {
   
        Text title;
    }
}

NewsTypeProvider.java， 用于构造新闻列表

package com.huawei.codelab.provider;

import com.huawei.codelab.ResourceTable;
import ohos.agp.components.*;
import ohos.app.Context;

import java.util.List;
import java.util.Optional;

public class NewsListProvider extends BaseItemProvider {
   
    private List<