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

Buty9147

发布于 2021-5-26 18:08

浏览

5收藏

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
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.

布局及样式代码

└─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.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.

页面布局

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>
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.
113.
114.
115.
116.
117.
118.
119.
120.
121.
122.
123.
124.
125.
126.
127.
128.
129.
130.
131.
132.
133.
134.
135.
136.
137.
138.
139.
140.
141.
142.
143.
144.

2.默认双行列表项组件页面

本页面的布局包括DirectionalLayout布局，
由Image、Text组件共同来构成，整体是横向布局,布局如下：
HarmonyOS官方模板学习之 Business Card Ability(Java)-鸿蒙开发者社区
页面在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>
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.

3.单按钮双行列表项组件页面

本页面和默认双行列表组件页面基本一致，只是布局中只有一个操作按钮，使用DirectionalLayout布局，
由Image、Text组件共同来构成，整体是横向布局，布局如下：
HarmonyOS官方模板学习之 Business Card Ability(Java)-鸿蒙开发者社区
页面在/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>
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.

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>
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.

说明：
布局文件中使用到了一些样式和图片，在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());

});
1.
2.
3.
4.
5.
6.

/**
     * 
     * @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);
                }
            }
        }
    }
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.

滑动效果实现的业务逻辑

向上/下滑动滚动条，显示和隐藏顶部应用栏中联系人姓名（通过设置文字透明度实现）和更改背景的效果（更改背景色）
后台代码在 /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);
            });
        }
    }
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.

效果展示

HarmonyOS官方模板学习之 Business Card Ability(Java)-鸿蒙开发者社区

向下滚动
HarmonyOS官方模板学习之 Business Card Ability(Java)-鸿蒙开发者社区
向上滚动

点击tab图标

完整代码

©著作权归作者所有，如需转载，请注明出处，否则将追究法律责任

分类

HarmonyOS

标签

模板学习计划

BusinessCardAbilityJava.zip 1.5M 129次下载

已于2021-7-6 21:05:38修改

6条回复

按时间正序

按时间倒序

红叶亦知秋

新的大佬来社区了，欢迎欢迎

2021-5-27 10:01:55

张荣超_九丘教育

赞赞赞！

2021-5-28 07:51:25

AnBetter2021

欢迎大佬，分享关注

2021-5-28 09:11:32

Buty9147 回复了红叶亦知秋

新的大佬来社区了，欢迎欢迎

共同学习

2021-5-28 09:37:20

Buty9147 回复了 AnBetter2021

欢迎大佬，分享关注

共同学习

2021-5-28 09:37:28

Buty9147 回复了张荣超_九丘教育

赞赞赞！

感谢老师的捧场

2021-5-28 09:37:44

51CTO

51CTO博客

51CTO学堂

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

目录

Business Card Ability(Java)

介绍

搭建环境

代码结构解读

页面布局

1.主页面

2.默认双行列表项组件页面

3.单按钮双行列表项组件页面

4.Tab 组件页面

相关权限

tab 按钮切换的业务逻辑

滑动效果实现的业务逻辑

效果展示

完整代码

目录

订阅鸿蒙技术特刊，精选内容抢先看

51CTO

51CTO博客

51CTO学堂

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

目录

Business Card Ability(Java)

介绍

搭建环境

代码结构解读

页面布局

1.主页面

2.默认双行列表项组件页面

3.单按钮双行列表项组件页面

4.Tab 组件页面

相关权限

tab 按钮切换的业务逻辑

滑动效果实现的业务逻辑

效果展示

完整代码

目录

订阅鸿蒙技术特刊，精选内容抢先看

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