HarmonyOS官方模板学习 之 Business Card Ability(Java) 原创 精华
Buty9147
发布于 2021-5-26 18:08
浏览
5收藏
@toc
Business Card Ability(Java)
介绍
使用Java语言开发，用于Phone设备的Feature Ability模板，使用XML布局。
展示了一个名片详情页的样例工程，主要由一个ScrollView嵌套的两个ListContainer组成。
搭建环境
安装DevEco Studio，详情请参考DevEco Studio下载。
设置DevEco Studio开发环境，DevEco Studio开发环境需要依赖于网络环境，需要连接上网络才能确保工具的正常使用，可以根据如下两种情况来配置开发环境：
如果可以直接访问Internet，只需进行下载HarmonyOS SDK操作。
如果网络不能直接访问Internet，需要通过代理服务器才可以访问，请参考配置开发环境。
代码结构解读
功能逻辑代码
└─businesscardabilityjava
│ MainAbility.java
│ MyApplication.java
│
├─datamodel //数据模型
│ DefaultDoubleLineListItemInfo.java
│ ItemInfo.java
│ SingleButtonDoubleLineListItemInfo.java
│
├─itemprovider //子项提供者
│ ListItemProvider.java
│
├─slice //核心页面
│ MainAbilitySlice.java
│
├─typefactory //列表类型工厂
│ ListTypeFactory.java
│ TypeFactory.java
│
└─viewholder //视图持有者
DefaultDoubleLineList.java
SingleButtonDoubleLineList.java
ViewHolder.java
布局及样式代码
└─resources
├─base
│ ├─element
│ │ color.json //存储了页面的一些颜色值
│ │ float.json
│ │ string.json
│ │
│ ├─graphic
│ │ bottom_tab_background.xml //tab栏背景样式
│ │ card_background.xml //卡片背景样式
│ │ divider.xml //分割线样式
│ │ ic_about.xml
│ │ ic_actived.xml
│ │ ic_add.xml
│ │ ic_back.xml
│ │ ic_call.xml
│ │ ic_chat.xml
│ │ ic_edit.xml //编辑tab按钮icon
│ │ ic_edit_actived.xml //激活状态编辑tab按钮icon
│ │ ic_enabled.xml
│ │ ic_favorite.xml //收藏tab按钮icon
│ │ ic_favorite_actived.xml //激活状态收藏tab按钮icon
│ │ ic_header.xml //联系人头像icon
│ │ ic_more.xml
│ │ ic_mores.xml //更多tab按钮icon
│ │ ic_mores_actived.xml //激活状态更多tab按钮icon
│ │ ic_next.xml
│ │ ic_normal.xml
│ │ ic_qrcode.xml
│ │ ic_video.xml
│ │
│ ├─layout
│ │ ability_main.xml //名片主页面
│ │ default_doublelinelist.xml //默认双行列表项组件页面
│ │ singlebutton_doublelinelist.xml //单按钮双行列表项组件页面
│ │ tab.xml //tab按钮组件页面
│ │
│ ├─media
│ │ icon.png
│ │ ic_next.png
│ │ ic_update.png
│ │ like_icon.jpg
│ │ profile.png
│ │ profile_mask.png
│ │ search.jpg
│ │ share_icon.jpg
│ │
│ └─profile
└─rawfile
页面布局
1.主页面
本页面的布局包括DependentLayout和DirectionalLayout布局，
由ScrollView、ListContainer、Image、Text组件共同来构成，整体分为上中下布局。
上方是应用工具栏，使用了DirectionalLayout嵌套横向布局，布局中用Image组件提供了返回和二维码的功能，2个布局权重是1:1
中间是联系人的头像和姓名以及联系人其它信息列表，由于列表长度不固定采用了ScrollView组件，内部使用DependentLayout布局嵌套的方式，用DependentLayout包裹ListContainer组件用于列表的展示，其中列表项是由后台通过自定义的2行列表组件动态创建。
底部是联系人可操作的功能区，包括收藏、编辑、更多，采用了DirectionalLayout 嵌套布局，外层DirectionalLayout 用户背景显示，内层DirectionalLayout 用户内容的显示，其中内容的显示是通过自定义tab组件由后台动态创建实现的。
页面在resources\base\layout\ability_main.xml 代码如下:
<?xml version="1.0" encoding="utf-8"?>
<DependentLayout
xmlns:ohos="http://schemas.huawei.com/res/ohos"
ohos:id="$+id:root_layout"
ohos:height="match_parent"
ohos:width="match_parent"
ohos:orientation="vertical">
<DirectionalLayout
ohos:id="$+id:background"
ohos:height="match_parent"
ohos:width="match_parent"
ohos:align_parent_top="true"
ohos:background_element="$color:color_background"/>
<DirectionalLayout
ohos:id="$+id:appBar"
ohos:height="match_content"
ohos:width="match_parent"
ohos:align_parent_top="true"
ohos:end_padding="$float:max_padding_appBar"
ohos:layout_direction="locale"
ohos:orientation="horizontal"
ohos:start_padding="$float:max_padding_start">
<DirectionalLayout
ohos:id="$+id:appBar_leftPart"
ohos:height="$float:height_backButton_touchTarget"
ohos:width="0vp"
ohos:alignment="center"
ohos:orientation="horizontal"
ohos:weight="1">
<Image
ohos:id="$+id:appBar_backButton"
ohos:height="$float:height_appBar_Buttons"
ohos:width="$float:width_appBar_buttons"
ohos:image_src="$graphic:ic_back"/>
<Text
ohos:id="$+id:appBar_userName"
ohos:height="match_parent"
ohos:width="match_parent"
ohos:alpha="0"
ohos:left_margin="$float:leftMargin_userName"
ohos:text="$string:title_contactsDetail"
ohos:text_size="$float:textSize_userName"/>
</DirectionalLayout>
<DirectionalLayout
ohos:id="$+id:appBar_rightPart"
ohos:height="match_parent"
ohos:width="0vp"
ohos:alignment="vertical_center|right"
ohos:focusable_in_touch="false"
ohos:orientation="horizontal"
ohos:start_margin="$float:start_margin_appBar"
ohos:weight="1">
<DirectionalLayout
ohos:id="$+id:appBar_button3_touchTarget"
ohos:height="$float:height_touchTarget"
ohos:width="$float:width_touchTarget"
ohos:alignment="center">
<Image
ohos:id="$+id:appBar_button3"
ohos:height="$float:height_appBar_Buttons"
ohos:width="$float:width_appBar_buttons"
ohos:image_src="$graphic:ic_qrcode"/>
</DirectionalLayout>
</DirectionalLayout>
</DirectionalLayout>
<ScrollView
ohos:id="$+id:contacts_detail_scroll"
ohos:height="match_parent"
ohos:width="match_parent"
ohos:below="$id:appBar"
ohos:bottom_margin="$float:height_bottom_tab">
<DependentLayout
ohos:id="$+id:contacts_detail"
ohos:height="match_content"
ohos:width="match_parent"
ohos:orientation="vertical">
<DependentLayout
ohos:id="$+id:contacts_detail_upperCard"
ohos:height="match_content"
ohos:width="match_parent"
ohos:align_parent_top="true"
ohos:background_element="$graphic:card_background"
ohos:left_padding="$float:max_padding_start"
ohos:orientation="vertical"
ohos:right_padding="$float:max_padding_end"
ohos:top_margin="$float:topMargin_contactsDetail_upperCard">
<ListContainer
ohos:id="$+id:contacts_detail_upperCard_list"
ohos:height="0vp"
ohos:width="match_parent"
ohos:below="$+id:contacts_detail_title"/>
</DependentLayout>
<Image
ohos:id="$+id:contacts_detail_profile"
ohos:height="$float:height_contacts_profile"
ohos:width="$float:width_contacts_profile"
ohos:align_parent_top="true"
ohos:alpha="1"
ohos:center_in_parent="true"
ohos:image_src="$graphic:ic_header"
ohos:top_margin="$float:topMargin_contacts_profile"/>
<Text
ohos:id="$+id:contacts_detail_title"
ohos:height="match_content"
ohos:width="match_parent"
ohos:align_parent_top="true"
ohos:text="$string:title_contactsDetail"
ohos:text_alignment="horizontal_center"
ohos:text_size="$float:textSize_contactsDetail_title"
ohos:top_margin="$float:topMargin_contactsDetail_title"/>
</DependentLayout>
</ScrollView>
<DirectionalLayout
ohos:id="$+id:bottom_tab"
ohos:height="$float:height_bottom_tab"
ohos:width="match_parent"
ohos:align_parent_bottom="true"
ohos:alignment="vertical_center"
ohos:background_element="$graphic:bottom_tab_background"
ohos:left_padding="$float:max_padding_start"
ohos:right_padding="$float:max_padding_end">
<DirectionalLayout
ohos:id="$+id:bottom_tabMenu"
ohos:height="match_content"
ohos:width="match_parent"
ohos:orientation="horizontal"/>
</DirectionalLayout>
</DependentLayout>
2.默认双行列表项组件页面
本页面的布局包括DirectionalLayout布局，
由Image、Text组件共同来构成，整体是横向布局,布局如下：
页面在resources\layout\default_doublelinelist.xml ，代码如下:
<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
xmlns:ohos="http://schemas.huawei.com/res/ohos"
ohos:id="$+id:default_doubleLineList"
ohos:height="$float:height_doubleLineList"
ohos:width="match_parent"
ohos:orientation="vertical">
<DirectionalLayout
xmlns:ohos="http://schemas.huawei.com/res/ohos"
ohos:id="$+id:doubleLineList"
ohos:height="$float:height_doubleLineList_text"
ohos:width="match_parent"
ohos:bottom_margin="$float:bottomMargin_doubleLineList"
ohos:orientation="horizontal"
ohos:top_margin="$float:topMargin_doubleLineList">
<DirectionalLayout
ohos:id="$+id:doubleLineList_text"
ohos:height="match_parent"
ohos:width="match_parent"
ohos:alignment="vertical_center"
ohos:orientation="vertical"
ohos:weight="2">
<DirectionalLayout
ohos:id="$+id:doubleLineList_text_layout"
ohos:height="match_parent"
ohos:width="match_content"
ohos:layout_direction="locale">
<Text
ohos:id="$+id:doubleLineList_text_primary"
ohos:height="match_content"
ohos:width="match_parent"
ohos:bottom_margin="$float:bottomMargin_doubleLineList"
ohos:layout_direction="locale"
ohos:text_color="$color:color_doubleLineList_primary_text"
ohos:text_size="$float:textSize_primaryText"/>
<Text
ohos:id="$+id:doubleLineList_text_secondary"
ohos:height="match_content"
ohos:width="match_parent"
ohos:layout_direction="locale"
ohos:text_color="$color:color_doubleLineList_secondary_text"
ohos:text_size="$float:textSize_secondaryText"/>
</DirectionalLayout>
</DirectionalLayout>
<DirectionalLayout
ohos:id="$+id:doubleLineList_right"
ohos:height="match_parent"
ohos:width="match_parent"
ohos:alignment="vertical_center|right"
ohos:orientation="horizontal"
ohos:right_of="$+id:doubleLineList_text"
ohos:weight="2">
<DirectionalLayout
ohos:id="$+id:doubleLineList_right_touchTarget1"
ohos:height="$float:height_touchTarget"
ohos:width="$float:width_touchTarget"
ohos:alignment="center">
<Image
ohos:id="$+id:doubleLineList_right_img1"
ohos:height="$float:height_doubleLineList_button"
ohos:width="$float:width_doubleLineList_button"/>
</DirectionalLayout>
<DirectionalLayout
ohos:id="$+id:doubleLineList_right_touchTarget2"
ohos:height="$float:height_touchTarget"
ohos:width="$float:width_touchTarget"
ohos:alignment="center">
<Image
ohos:id="$+id:doubleLineList_right_img2"
ohos:height="$float:height_doubleLineList_button"
ohos:width="$float:width_doubleLineList_button"/>
</DirectionalLayout>
<DirectionalLayout
ohos:id="$+id:doubleLineList_right_touchTarget3"
ohos:height="$float:height_touchTarget"
ohos:width="$float:width_touchTarget"
ohos:alignment="center">
<Image
ohos:id="$+id:doubleLineList_right_img3"
ohos:height="$float:height_doubleLineList_button"
ohos:width="$float:width_doubleLineList_button"/>
</DirectionalLayout>
</DirectionalLayout>
</DirectionalLayout>
<Image
ohos:id="$+id:divider"
ohos:height="$float:height_divider"
ohos:width="match_parent"
ohos:image_src="$graphic:divider"/>
</DirectionalLayout>
3.单按钮双行列表项组件页面
本页面和默认双行列表组件页面基本一致，只是布局中只有一个操作按钮，使用DirectionalLayout布局，
由Image、Text组件共同来构成，整体是横向布局，布局如下：
页面在/resources/base/layout/singlebutton_doublelinelist.xml，代码如下：
<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
xmlns:ohos="http://schemas.huawei.com/res/ohos"
ohos:id="$+id:singleButton_doubleLineList"
ohos:height="$float:height_doubleLineList"
ohos:width="match_parent"
ohos:orientation="vertical">
<DirectionalLayout
xmlns:ohos="http://schemas.huawei.com/res/ohos"
ohos:id="$+id:singleButtonList"
ohos:height="$float:height_doubleLineList_text"
ohos:width="match_parent"
ohos:bottom_margin="$float:bottomMargin_doubleLineList"
ohos:orientation="horizontal"
ohos:top_margin="$float:topMargin_doubleLineList">
<DirectionalLayout
ohos:id="$+id:singleButtonList_text"
ohos:height="match_parent"
ohos:width="match_parent"
ohos:alignment="vertical_center"
ohos:orientation="vertical"
ohos:weight="2">
<DirectionalLayout
ohos:height="match_parent"
ohos:width="match_content"
ohos:layout_direction="locale">
<Text
ohos:id="$+id:singleButtonList_text_primary"
ohos:height="match_content"
ohos:width="match_content"
ohos:bottom_margin="$float:bottomMargin_doubleLineList"
ohos:layout_direction="locale"
ohos:text_color="$color:color_doubleLineList_primary_text"
ohos:text_size="$float:textSize_primaryText"/>
<Text
ohos:id="$+id:singleButtonList_text_secondary"
ohos:height="match_content"
ohos:width="match_content"
ohos:layout_direction="locale"
ohos:text_color="$color:color_doubleLineList_secondary_text"
ohos:text_size="$float:textSize_secondaryText"/>
</DirectionalLayout>
</DirectionalLayout>
<DirectionalLayout
ohos:id="$+id:singleButtonList_right"
ohos:height="match_parent"
ohos:width="match_parent"
ohos:alignment="vertical_center|right"
ohos:layout_direction="locale"
ohos:weight="1">
<DirectionalLayout
ohos:height="match_content"
ohos:width="match_content"
ohos:layout_direction="locale">
<DirectionalLayout
ohos:id="$+id:singleButtonList_right_touchTarget"
ohos:height="$float:height_touchTarget"
ohos:width="$float:width_touchTarget"
ohos:alignment="center">
<Image
ohos:id="$+id:singleButtonList_right_img"
ohos:height="$float:height_doubleLineList_switch"
ohos:width="$float:width_doubleLineList_switch"/>
</DirectionalLayout>
</DirectionalLayout>
</DirectionalLayout>
</DirectionalLayout>
<Image
ohos:id="$+id:divider"
ohos:height="$float:height_divider"
ohos:width="match_parent"
ohos:image_src="$graphic:divider"/>
</DirectionalLayout>
4.Tab 组件页面
自定义的tab组件，用于动态渲染tab栏，使用DirectionalLayout布局，
由Image、Text组件共同来构成，整体是垂直布局。
页面在resources/base/layout/tab.xml，代码如下：
<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
xmlns:ohos="http://schemas.huawei.com/res/ohos"
ohos:id="$+id:tab"
ohos:height="match_content"
ohos:width="0vp"
ohos:alignment="center"
ohos:orientation="vertical"
ohos:weight="1">
<Image
ohos:id="$+id:bottom_tab_button_image"
ohos:height="$float:height_tab"
ohos:width="$float:width_tab"
/>
<Text
ohos:id="$+id:bottom_tab_button_text"
ohos:height="match_content"
ohos:width="match_parent"
ohos:text_alignment="top|horizontal_center"
ohos:text_color="$color:color_tabText_normal"
ohos:text_size="$float:textSize_tab"
/>
</DirectionalLayout>
说明：
布局文件中使用到了一些样式和图片，在resources\base\graphic下有做定义，详情可以参考完整代码。
相关权限
不需要额外申请权限
tab 按钮切换的业务逻辑
将动态添加的tab按钮存储到List中并进行遍历，设置当前点击的tab按钮为激活样式，其它tab按钮设置为普通效果。
后台代码在 /slice/MainAbilitySlice.java 关键代码如下：
tab.setClickedListener(component -> {
Text focusTab = (Text) component.findComponentById(ResourceTable.Id_bottom_tab_button_text);
//Set active tab image
setActiveTabImage(tabList, focusTab.getText());
});
/**
*
* @param tabList tab按钮列表
* @param focusText 需要激活的tab名称
*/
private void setActiveTabImage(List<DirectionalLayout> tabList, String focusText) {
Element tabNormal = null;
Element tabActived = null;
for (DirectionalLayout btn : tabList) {
Text text = (Text) btn.findComponentById(ResourceTable.Id_bottom_tab_button_text);
if ("收藏".equals(text.getText())) {
tabNormal = ElementScatter.getInstance(getContext()).parse(ResourceTable.Graphic_ic_favorite);
tabActived = ElementScatter.getInstance(getContext()).parse(ResourceTable.Graphic_ic_favorite_actived);
if ("收藏".equals(focusText)) {
((Image) btn.findComponentById(ResourceTable.Id_bottom_tab_button_image)).setImageElement(tabActived);
} else {
((Image) btn.findComponentById(ResourceTable.Id_bottom_tab_button_image)).setImageElement(tabNormal);
}
}
if ("编辑".equals(text.getText())) {
tabNormal = ElementScatter.getInstance(getContext()).parse(ResourceTable.Graphic_ic_edit);
tabActived = ElementScatter.getInstance(getContext()).parse(ResourceTable.Graphic_ic_edit_actived);
if ("编辑".equals(focusText)) {
((Image) btn.findComponentById(ResourceTable.Id_bottom_tab_button_image)).setImageElement(tabActived);
} else {
((Image) btn.findComponentById(ResourceTable.Id_bottom_tab_button_image)).setImageElement(tabNormal);
}
}
if ("更多".equals(text.getText())) {
tabNormal = ElementScatter.getInstance(getContext()).parse(ResourceTable.Graphic_ic_mores);
tabActived = ElementScatter.getInstance(getContext()).parse(ResourceTable.Graphic_ic_mores_actived);
if ("更多".equals(focusText)) {
((Image) btn.findComponentById(ResourceTable.Id_bottom_tab_button_image)).setImageElement(tabActived);
} else {
((Image) btn.findComponentById(ResourceTable.Id_bottom_tab_button_image)).setImageElement(tabNormal);
}
}
}
}
滑动效果实现的业务逻辑
向上/下滑动滚动条，显示和隐藏顶部应用栏中联系人姓名（通过设置文字透明度实现）和更改背景的效果（更改背景色）
后台代码在 /slice/MainAbilitySlice.java 关键代码如下：
private void initScrollView() {
ScrollView scrollView = (ScrollView) findComponentById(ResourceTable.Id_contacts_detail_scroll);
int profileSizePx = AttrHelper.vp2px(COLOR_CHANGE_RANGE, this);
if (scrollView != null) {
scrollView.setReboundEffectParams(OVERSCROLL_PERCENT, OVERSCROLL_RATE, REMAIN_VISIBLE_PERCENT);
scrollView.setReboundEffect(true);
//获取appbar显示的contact name
Text userName = (Text) findComponentById(ResourceTable.Id_appBar_userName);
DirectionalLayout backGround = (DirectionalLayout) findComponentById(ResourceTable.Id_background);
ShapeElement shapeElement = new ShapeElement();
shapeElement.setShape(ShapeElement.RECTANGLE);
// Set Scrolled listener
scrollView.getComponentTreeObserver().addScrolledListener(() -> {
float curY = scrollView.getScrollValue(Component.AXIS_Y);
HiLog.info(LABEL, "curY:" + curY);
int colorChange = (int) ((BACKGROUND_COLOR - ORIGINAL_BACKGROUND_COLOR) * curY / profileSizePx);
HiLog.info(LABEL, "colorChange:" + colorChange);
HiLog.info(LABEL, "colorValue:" + (ORIGINAL_BACKGROUND_COLOR + colorChange));
//设置颜色的方法
//1.设置ability_main.xml组件中的背景色，如：240/160/110，这是一个橙色
//2.手动加上刚才的值，如240/160/110
shapeElement.setRgbColor(new RgbColor(ORIGINAL_BACKGROUND_COLOR + colorChange+240,
ORIGINAL_BACKGROUND_COLOR + colorChange+160, ORIGINAL_BACKGROUND_COLOR + colorChange+110));
backGround.setBackground(shapeElement);
userName.setAlpha(1 * curY / profileSizePx);
});
}
}
效果展示
向下滚动
向上滚动
点击tab图标
完整代码
©著作权归作者所有，如需转载，请注明出处，否则将追究法律责任
分类
标签
BusinessCardAbilityJava.zip 1.5M 129次下载
已于2021-7-6 21:05:38修改
赞
7
收藏 5
回复
相关推荐
新的大佬来社区了，欢迎欢迎
赞赞赞！
欢迎大佬，分享关注
共同学习
共同学习
感谢老师的捧场