HarmonyOS官方模板学习 之 Category List Ability(Java) 原创 精华

发布于 2021-6-1 22:14
浏览
1收藏

Category List Ability(Java)

介绍

使用Java语言开发,用于Phone设备的Feature Ability模板,使用XML布局,该模板由标题栏和单行列表组成,其中单行列表被分为多个分组,单行列表中的每一项由左侧文本和右侧文本组成。该模板还提供了ListContainerBaseItemProvider的接口使用方法示例。

搭建环境

安装DevEco Studio,详情请参考DevEco Studio下载
设置DevEco Studio开发环境,DevEco Studio开发环境需要依赖于网络环境,需要连接上网络才能确保工具的正常使用,可以根据如下两种情况来配置开发环境:

如果可以直接访问Internet,只需进行下载HarmonyOS SDK操作。
如果网络不能直接访问Internet,需要通过代理服务器才可以访问,请参考配置开发环境

代码结构解读

注意:'#'代表注释

│  config.json  #项目配置文件
│
├─java
│  └─com
│      └─buty
│          └─categorylistabilityjava
│              │  MainAbility.java  
│              │  MyApplication.java
│              │
│              ├─custom
│              │  ├─categorylist
│              │  │      CategoryItemFactory.java #类别项工厂
│              │  │      HeadItem.java #Head类别项
│              │  │      SingleListIconItem #带icon的SingleList类别项
│              │  │      SingleListIconProfileItem #profile的SingleList类别项
│              │  │      SearchItem.java #Search 类别项
│              │  │      SingleListItem.java #SingleList 类别项
│              │  │      TestCategory.java  #一个用于测试的测试的类别,设置传入组件的形状和背景以及item的点击事件
│              │  │
│              │  └─data
│              │         CustomData.java #模拟数据类
│              │
│              ├─datamodel
│              │      Category.java #类别接口,实现此接口以创建新的类别
│              │      CategoryItemBase.java #基础的属性接口,实现这个接口可以创建一种新的类别项
│              │
│              ├─slice
│              │      MainAbilitySlice.java #主能力页面
│              │
│              └─views
│                  └─adapter
│                          CategoryListItemProvider.java #类别列表项提供程序。
│
└─resources
    ├─base
    │  ├─element
    │  │      color.json  #存放颜色值
    │  │      float.json  #存放float值
    │  │      string.json #存放字符串
    │  │
    │  ├─graphic
    │  │      blue.xml
    │  │      gprs.xml
    │  │      icon_add.xml
    │  │      icon_more.xml
    │  │      icon_right_grey.xml
    │  │      icon_search.xml
    │  │      ic_header.xml
    │  │      search_box_background.xml
    │  │      wifi.xml
    │  │
    │  ├─layout
    │  │      list_item.xml #列表项组件
    │  │      list_item_header.xml #header列表项组件
    │  │      list_item_profile.xml #profile列表项组件
    │  │      main_ability.xml  #主页面
    │  │      search_item.xml  #search列表组件
    │  │
    │  ├─media
    │  │      icon.png
    │  │
    │  └─profile
    └─rawfile

页面布局

1.主页面

本页面的布局包括DirectionalLayout和DependentLayout布局,
由ListContainer、Image、Text组件共同来构成,整体分为上下布局,非常简单
::: hljs-left

HarmonyOS官方模板学习 之 Category List Ability(Java)-开源基础软件社区

:::

页面在resources\base\layout\ability_main.xml 代码如下:

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

    <!-- Title part-->
    <DirectionalLayout
        xmlns:ohos="http://schemas.huawei.com/res/ohos"
        ohos:height="$float:titlePartHeight"
        ohos:width="match_parent"
        ohos:background_element="$color:colorAppBackground"
        ohos:orientation="vertical">

        <DependentLayout
            xmlns:ohos="http://schemas.huawei.com/res/ohos"
            ohos:height="$float:titlePartIconDivHeight"
            ohos:width="match_parent">
            <Image
                ohos:id="$+id:item_left_icon"
                ohos:height="match_content"
                ohos:width="match_content"
                ohos:start_margin="5vp"
                ohos:align_parent_right="true"
                ohos:center_in_parent="true"
                ohos:right_margin="$float:singleCardViewRightMargin"
                ohos:image_src="$graphic:icon_more"/>
        </DependentLayout>

        <Text
            ohos:id="$+id:title_text"
            ohos:height="$float:titlePartTextAreaHeight"
            ohos:width="match_parent"
            ohos:bottom_margin="$float:titlePartTextAreaBottomMargin"
            ohos:left_margin="$float:titlePartTextAreaLeftMargin"
            ohos:right_margin="$float:titlePartTextAreaRightMargin"
            ohos:text="$string:title_text"
            ohos:text_alignment="vertical_center"
            ohos:text_color="$color:colorAppbarTitle"
            ohos:text_font="$string:text_font_medium"
            ohos:text_size="$float:textSizeHeadline6"
            ohos:top_margin="$float:titlePartTextAreaTopMargin"/>
    </DirectionalLayout>

    <ListContainer
        ohos:id="$+id:list_view"
        ohos:height="match_content"
        ohos:width="match_parent"
        ohos:bottom_padding="$float:listContainerBottomPadding"
        ohos:left_margin="$float:singleCardViewLeftMargin"
        ohos:right_margin="$float:singleCardViewRightMargin"/>
</DirectionalLayout>

2.列表项组件页面

本页面的布局包括DirectionalLayout和DependentLayout布局,
由Component、Image、Text组件共同来构成,整体水平布局,Component是1px的分割线。
::: hljs-left

HarmonyOS官方模板学习 之 Category List Ability(Java)-开源基础软件社区

:::

页面在resources\base\layout\list_item.xml 代码如下:

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

    <DependentLayout
        xmlns:ohos="http://schemas.huawei.com/res/ohos"
        ohos:height="$float:singleCardViewHeight"
        ohos:width="match_parent">

        <Image
            ohos:id="$+id:item_left_icon"
            ohos:height="40vp"
            ohos:width="40vp"
            ohos:start_margin="5vp"
            ohos:align_parent_left="true"
            ohos:center_in_parent="true"
            ohos:image_src="$graphic:wifi"/>

        <Text
            ohos:id="$+id:item_content_text"
            ohos:height="$float:singleCardViewTextHeight"
            ohos:width="match_content"
            ohos:start_margin="55vp"
            ohos:align_parent_left="true"
            ohos:center_in_parent="true"
            ohos:text_color="$color:textColorPrimary"
            ohos:text_size="$float:textSizeBody1"/>

        <Image
            ohos:id="$+id:item_right_icon"
            ohos:height="match_content"
            ohos:width="match_content"
            ohos:align_parent_right="true"
            ohos:center_in_parent="true"
            ohos:image_src="$graphic:icon_right_grey"
            ohos:right_margin="$float:singleCardViewRightMargin"/>

        <Text
            ohos:id="$+id:item_right_content_text"
            ohos:height="$float:singleCardViewRightTextHeight"
            ohos:width="match_content"
            ohos:center_in_parent="true"
            ohos:left_of="$id:item_right_icon"
            ohos:right_margin="$float:singleCardViewRightTextRightMargin"
            ohos:text_color="$color:textColorSecondary"
            ohos:text_size="$float:textSizeBody2"/>
    </DependentLayout>

    <Component
        ohos:id="$+id:item_divider"
        ohos:height="$float:listDividerHeight"
        ohos:width="match_parent"
        ohos:background_element="$color:colorListDivider"
        ohos:left_margin="$float:singleCardViewLeftMargin"
        ohos:right_margin="$float:singleCardViewRightMargin"/>
</DirectionalLayout>

3.header列表项组件页面

本页面只有一个DependentLayout布局,由一个Text组件构成。

<?xml version="1.0" encoding="utf-8"?>
<DependentLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_content"
    ohos:width="match_parent"
    ohos:background_element="$color:colorAppBackground">

    <Text
        ohos:id="$+id:header_item_content_text"
        ohos:height="match_content"
        ohos:min_height="$float:listItemHeaderMinHeight"
        ohos:width="match_content"
        ohos:align_parent_left="true"
        ohos:center_in_parent="true"
        ohos:text_color="$color:textColorPrimary"
        ohos:text_size="$float:textSizeBody0"
        />
</DependentLayout>

4.profile列表项组件页面

本页面的布局包括DirectionalLayout和DependentLayout布局,
由Image、Text组件共同来构成,整体水平布局,和上面的布局类似,是我仿照手机‘设置’页,个人头像设计的。

::: hljs-left

HarmonyOS官方模板学习 之 Category List Ability(Java)-开源基础软件社区

:::

页面在resources\base\layout\list_item_profile.xml 代码如下:

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

    <DependentLayout
        xmlns:ohos="http://schemas.huawei.com/res/ohos"
        ohos:height="$float:singleCardViewHeight"
        ohos:width="match_parent">

        <Image
            ohos:id="$+id:item_left_icon"
            ohos:height="40vp"
            ohos:width="40vp"
            ohos:start_margin="5vp"
            ohos:align_parent_left="true"
            ohos:center_in_parent="true"
            ohos:image_src="$graphic:ic_header"/>

        <DirectionalLayout
            ohos:height="match_parent"
            ohos:width="260vp"
            ohos:orientation="vertical">

            <Text
                ohos:id="$+id:item_content_text"
                ohos:height="30vp"
                ohos:width="match_content"
                ohos:start_margin="55vp"
                ohos:text_weight="800"
                ohos:text_color="$color:textColorPrimary"
                ohos:text_size="$float:textSizeBody1"
                ohos:text="张三丰"
                />
            <Text
                ohos:id="$+id:item_right_content_text"
                ohos:height="25vp"
                ohos:width="match_content"
                ohos:start_margin="55vp"
                ohos:text_color="$color:textColorSecondary"
                ohos:text_size="$float:textSizeBody2"
                ohos:text="华为账号、付款与账单、云空间等"
                />

        </DirectionalLayout>
        <Image
            ohos:id="$+id:item_right_icon"
            ohos:height="match_content"
            ohos:width="match_content"
            ohos:align_parent_right="true"
            ohos:center_in_parent="true"
            ohos:image_src="$graphic:icon_right_grey"
            ohos:right_margin="$float:singleCardViewRightMargin"/>


    </DependentLayout>
</DirectionalLayout>

5.search 列表项组件页面

本页面由DependentLayout布局,由Image、Text组件共同来构成,整体水平布局,Text模拟了文本输入框的效果。

页面在resources\base\layout\search_item.xml 代码如下:

<?xml version="1.0" encoding="utf-8"?>
<DependentLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="$float:searchBarDivHeight"
    ohos:width="match_parent">

    <DependentLayout
        xmlns:ohos="http://schemas.huawei.com/res/ohos"
        ohos:height="$float:searchBarHeight"
        ohos:width="match_parent"
        ohos:background_element="$graphic:search_box_background"
        ohos:center_in_parent="true">

        <Image
            ohos:id="$+id:search_bar_search_icon"
            ohos:height="$float:searchIconHeight"
            ohos:width="$float:searchIconWidth"
            ohos:align_parent_left="true"
            ohos:center_in_parent="true"
            ohos:image_src="$graphic:icon_search"
            ohos:left_margin="$float:searchIconLeftMargin"
            ohos:right_margin="$float:searchIconRightMargin"
            ohos:scale_mode="zoom_center"/>

        <Text
            ohos:height="match_content"
            ohos:width="match_content"
            ohos:center_in_parent="true"
            ohos:right_margin="$float:searchBarHintTextRightMargin"
            ohos:right_of="$id:search_bar_search_icon"
            ohos:text="$string:search_bar_hint_text"
            ohos:text_color="$color:textColorSecondary"
            ohos:text_font="$string:text_font_regular"
            ohos:text_size="$float:textSizeBody1"/>
    </DependentLayout>
</DependentLayout>

相关权限

不需要额外申请权限

页面容器加载数据

MainAbilitySlice.java 关键代码

/**
     * 根据layout文件构建一个‘有数据的’容器组件
     * @return
     */
    private ComponentContainer createComponent() {

        HiLog.info(LABEL,"获取布局组件");
        Component mainComponent = LayoutScatter.getInstance(this).parse(ResourceTable.Layout_main_ability, null, false);

        // ListContainer item provider and listener. You can implement your own CustomData to achieve different effects
        HiLog.info(LABEL,"获取自定义的模拟数据");
        List<Category> categoryList = CustomData.getCustomData2(this);
        HiLog.info(LABEL,"将模拟数据传递给 '属性列表项' 提供者");
        CategoryListItemProvider categoryListItemProvider = new CategoryListItemProvider(categoryList);
        HiLog.info(LABEL,"获取listContainer 组件");
        ListContainer listContainer = (ListContainer) mainComponent.findComponentById(ResourceTable.Id_list_view);
        if (listContainer != null) {
            HiLog.info(LABEL,"将构建的数据提供者 设置到 listContainer 中");
            listContainer.setItemProvider(categoryListItemProvider);
            HiLog.info(LABEL,"设置listContainer 子项的点击事件");
            listContainer.setItemClickedListener(categoryListItemProvider);
        }
        HiLog.info(LABEL,"返回构建完成的组件");
        return (ComponentContainer) mainComponent;
    }

模拟手机‘设置’界面效果

原图效果:
HarmonyOS官方模板学习 之 Category List Ability(Java)-开源基础软件社区
分析思路,原图效果是: 左侧图标+左侧文字+右侧文字+右侧图标 的格式
修改步骤:
1.修改 list_item.xml 列表项组件布局,增加左侧的图标;
2.新建带icon的类别项(SingleListIconItem.java),增加了icon的处理
3.类别项工厂(CategoryItemFactory.java)增加对新类别项的处理
4.模拟自定义数据

再来创建一个用户profile的组件
1.新建list_item_profile.xml 用于模拟头像列表项组件,文字是上下两行的和list_item.xml不同
2.新建profile的类别项(SingleListIconProfileItem.java)
3.类别项工厂(CategoryItemFactory.java) 增加对新类别项的处理
4.模拟自定义数据

 
完成后看一下运行效果:
HarmonyOS官方模板学习 之 Category List Ability(Java)-开源基础软件社区

心得体会

我们发现工厂模式非常便于后期扩展的,
后续完全可以按照 修改布局文件 -> 扩充类别项类型 -> 工厂增加类别处理 的步骤来扩展组件。

完整代码

请下载附件

©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
CategoryListAbilityJava.zip 1.36M 8次下载
已于2021-6-1 23:23:31修改
1
收藏 1
回复
举报
回复
添加资源
添加资源将有机会获得更多曝光,你也可以直接关联已上传资源 去关联
    相关推荐