HarmonyOS官方模板学习 之 Category List Ability(Java) 原创 精华
Buty9147
发布于 2021-6-1 22:14
浏览
1收藏
Category List Ability(Java)
介绍
使用Java语言开发，用于Phone设备的Feature Ability模板，使用XML布局，该模板由标题栏和单行列表组成，其中单行列表被分为多个分组，单行列表中的每一项由左侧文本和右侧文本组成。该模板还提供了ListContainer和BaseItemProvider的接口使用方法示例。
搭建环境
安装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
:::
页面在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
:::
页面在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
:::
页面在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;
}
模拟手机‘设置’界面效果
原图效果：
分析思路，原图效果是： 左侧图标+左侧文字+右侧文字+右侧图标 的格式
修改步骤：
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.模拟自定义数据
完成后看一下运行效果：
心得体会
我们发现工厂模式非常便于后期扩展的，
后续完全可以按照 修改布局文件 -> 扩充类别项类型 -> 工厂增加类别处理 的步骤来扩展组件。
完整代码
请下载附件
©著作权归作者所有，如需转载，请注明出处，否则将追究法律责任
分类
标签
CategoryListAbilityJava.zip 1.36M 17次下载
已于2021-6-1 23:23:31修改
赞
1
收藏 1
回复
相关推荐
很有用的分享，学习了！