文章详情

登录

短信预约-IT技能 免费直播动态提醒

选择考试省份

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团

请输入下面的图形验证码

提交验证

短信预约提醒成功

HarmonyOS官方模板学习 之 About Feature Ability(Java)

2024-12-03 04:15

关注

想了解更多内容，请访问：

51CTO和华为官方合作共建的鸿蒙技术社区

https://harmonyos.51cto.com

 About Feature Ability(Java)

介绍

使用Java语言开发，用于Phone设备的Feature Ability模板，使用XML布局。

展示了一个名片详情页的样例工程，主要由一个ScrollView嵌套的两个ListContainer组成。

搭建环境

安装DevEco Studio，详情请参考DevEco Studio下载。

设置DevEco Studio开发环境，DevEco Studio开发环境需要依赖于网络环境，需要连接上网络才能确保工具的正常使用，可以根据如下两种情况来配置开发环境：

如果可以直接访问Internet，只需进行下载HarmonyOS SDK操作。

如果网络不能直接访问Internet，需要通过代理服务器才可以访问，请参考配置开发环境。

代码结构解读

功能逻辑代码

  1. └─businesscardabilityjava 
  2.         │  MainAbility.java 
  3.         │  MyApplication.java 
  4.         │ 
  5.         ├─datamodel //数据模型 
  6.         │      DefaultDoubleLineListItemInfo.java 
  7.         │      ItemInfo.java 
  8.         │      SingleButtonDoubleLineListItemInfo.java 
  9.         │ 
  10.         ├─itemprovider //子项提供者 
  11.         │      ListItemProvider.java 
  12.         │ 
  13.         ├─slice //核心页面 
  14.         │      MainAbilitySlice.java 
  15.         │ 
  16.         ├─typefactory //列表类型工厂 
  17.         │      ListTypeFactory.java 
  18.         │      TypeFactory.java 
  19.         │ 
  20.         └─viewholder  //视图持有者 
  21.                 DefaultDoubleLineList.java 
  22.                 SingleButtonDoubleLineList.java 
  23.                 ViewHolder.java 

布局及样式代码

  1. └─resources 
  2.     ├─base 
  3.     │  ├─element 
  4.     │  │      color.json //存储了页面的一些颜色值 
  5.     │  │      float.json 
  6.     │  │      string.json 
  7.     │  │ 
  8.     │  ├─graphic 
  9.     │  │      bottom_tab_background.xml //tab栏背景样式 
  10.     │  │      card_background.xml //卡片背景样式 
  11.     │  │      divider.xml //分割线样式 
  12.     │  │      ic_about.xml 
  13.     │  │      ic_actived.xml 
  14.     │  │      ic_add.xml 
  15.     │  │      ic_back.xml 
  16.     │  │      ic_call.xml 
  17.     │  │      ic_chat.xml 
  18.     │  │      ic_edit.xml //编辑tab按钮icon 
  19.     │  │      ic_edit_actived.xml //激活状态编辑tab按钮icon 
  20.     │  │      ic_enabled.xml 
  21.     │  │      ic_favorite.xml //收藏tab按钮icon 
  22.     │  │      ic_favorite_actived.xml //激活状态收藏tab按钮icon 
  23.     │  │      ic_header.xml //联系人头像icon 
  24.     │  │      ic_more.xml 
  25.     │  │      ic_mores.xml //更多tab按钮icon 
  26.     │  │      ic_mores_actived.xml //激活状态更多tab按钮icon 
  27.     │  │      ic_next.xml 
  28.     │  │      ic_normal.xml 
  29.     │  │      ic_qrcode.xml 
  30.     │  │      ic_video.xml 
  31.     │  │ 
  32.     │  ├─layout 
  33.     │  │      ability_main.xml //名片主页面 
  34.     │  │      default_doublelinelist.xml //默认双行列表项组件页面 
  35.     │  │      singlebutton_doublelinelist.xml //单按钮双行列表项组件页面 
  36.     │  │      tab.xml //tab按钮组件页面 
  37.     │  │ 
  38.     │  ├─media 
  39.     │  │      icon.png 
  40.     │  │      ic_next.png 
  41.     │  │      ic_update.png 
  42.     │  │      like_icon.jpg 
  43.     │  │      profile.png 
  44.     │  │      profile_mask.png 
  45.     │  │      search.jpg 
  46.     │  │      share_icon.jpg 
  47.     │  │ 
  48.     │  └─profile 
  49.     └─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 代码如下:

  1. "1.0" encoding="utf-8"?> 
  3.     xmlns:ohos="http://schemas.huawei.com/res/ohos" 
  4.     ohos:id="$+id:root_layout" 
  5.     ohos:height="match_parent" 
  6.     ohos:width="match_parent" 
  7.     ohos:orientation="vertical"> 
  8.  
  9.     
  10.         ohos:id="$+id:background" 
  11.         ohos:height="match_parent" 
  12.         ohos:width="match_parent" 
  13.         ohos:align_parent_top="true" 
  14.         ohos:background_element="$color:color_background"/> 
  15.  
  16.     
  17.         ohos:id="$+id:appBar" 
  18.         ohos:height="match_content" 
  19.         ohos:width="match_parent" 
  20.         ohos:align_parent_top="true" 
  21.         ohos:end_padding="$float:max_padding_appBar" 
  22.         ohos:layout_direction="locale" 
  23.         ohos:orientation="horizontal" 
  24.         ohos:start_padding="$float:max_padding_start"> 
  25.  
  26.         
  27.             ohos:id="$+id:appBar_leftPart" 
  28.             ohos:height="$float:height_backButton_touchTarget" 
  29.             ohos:width="0vp" 
  30.             ohos:alignment="center" 
  31.             ohos:orientation="horizontal" 
  32.             ohos:weight="1"> 
  33.  
  34.             
  35.                 ohos:id="$+id:appBar_backButton" 
  36.                 ohos:height="$float:height_appBar_Buttons" 
  37.                 ohos:width="$float:width_appBar_buttons" 
  38.                 ohos:image_src="$graphic:ic_back"/> 
  39.  
  40.             
  41.                 ohos:id="$+id:appBar_userName" 
  42.                 ohos:height="match_parent" 
  43.                 ohos:width="match_parent" 
  44.                 ohos:alpha="0" 
  45.                 ohos:left_margin="$float:leftMargin_userName" 
  46.                 ohos:text="$string:title_contactsDetail" 
  47.                 ohos:text_size="$float:textSize_userName"/> 
  48.          
  49.  
  50.         
  51.             ohos:id="$+id:appBar_rightPart" 
  52.             ohos:height="match_parent" 
  53.             ohos:width="0vp" 
  54.             ohos:alignment="vertical_center|right" 
  55.             ohos:focusable_in_touch="false" 
  56.             ohos:orientation="horizontal" 
  57.             ohos:start_margin="$float:start_margin_appBar" 
  58.             ohos:weight="1"> 
  59.  
  60.             
  61.                 ohos:id="$+id:appBar_button3_touchTarget" 
  62.                 ohos:height="$float:height_touchTarget" 
  63.                 ohos:width="$float:width_touchTarget" 
  64.                 ohos:alignment="center"> 
  65.  
  66.                 
  67.                     ohos:id="$+id:appBar_button3" 
  68.                     ohos:height="$float:height_appBar_Buttons" 
  69.                     ohos:width="$float:width_appBar_buttons" 
  70.                     ohos:image_src="$graphic:ic_qrcode"/> 
  71.              
  72.          
  73.      
  74.  
  75.     
  76.         ohos:id="$+id:contacts_detail_scroll" 
  77.         ohos:height="match_parent" 
  78.         ohos:width="match_parent" 
  79.         ohos:below="$id:appBar" 
  80.         ohos:bottom_margin="$float:height_bottom_tab"> 
  81.  
  82.         
  83.             ohos:id="$+id:contacts_detail" 
  84.             ohos:height="match_content" 
  85.             ohos:width="match_parent" 
  86.             ohos:orientation="vertical"> 
  87.  
  88.             
  89.                 ohos:id="$+id:contacts_detail_upperCard" 
  90.                 ohos:height="match_content" 
  91.                 ohos:width="match_parent" 
  92.                 ohos:align_parent_top="true" 
  93.                 ohos:background_element="$graphic:card_background" 
  94.                 ohos:left_padding="$float:max_padding_start" 
  95.                 ohos:orientation="vertical" 
  96.                 ohos:right_padding="$float:max_padding_end" 
  97.                 ohos:top_margin="$float:topMargin_contactsDetail_upperCard"> 
  98.  
  99.                 
  100.                     ohos:id="$+id:contacts_detail_upperCard_list" 
  101.                     ohos:height="0vp" 
  102.                     ohos:width="match_parent" 
  103.                     ohos:below="$+id:contacts_detail_title"/> 
  104.              
  105.  
  106.             
  107.                 ohos:id="$+id:contacts_detail_profile" 
  108.                 ohos:height="$float:height_contacts_profile" 
  109.                 ohos:width="$float:width_contacts_profile" 
  110.                 ohos:align_parent_top="true" 
  111.                 ohos:alpha="1" 
  112.                 ohos:center_in_parent="true" 
  113.                 ohos:image_src="$graphic:ic_header" 
  114.                 ohos:top_margin="$float:topMargin_contacts_profile"/> 
  115.  
  116.             
  117.                 ohos:id="$+id:contacts_detail_title" 
  118.                 ohos:height="match_content" 
  119.                 ohos:width="match_parent" 
  120.                 ohos:align_parent_top="true" 
  121.                 ohos:text="$string:title_contactsDetail" 
  122.                 ohos:text_alignment="horizontal_center" 
  123.                 ohos:text_size="$float:textSize_contactsDetail_title" 
  124.                 ohos:top_margin="$float:topMargin_contactsDetail_title"/> 
  125.          
  126.      
  127.  
  128.     
  129.         ohos:id="$+id:bottom_tab" 
  130.         ohos:height="$float:height_bottom_tab" 
  131.         ohos:width="match_parent" 
  132.         ohos:align_parent_bottom="true" 
  133.         ohos:alignment="vertical_center" 
  134.         ohos:background_element="$graphic:bottom_tab_background" 
  135.         ohos:left_padding="$float:max_padding_start" 
  136.         ohos:right_padding="$float:max_padding_end"> 
  137.  
  138.         
  139.             ohos:id="$+id:bottom_tabMenu" 
  140.             ohos:height="match_content" 
  141.             ohos:width="match_parent" 
  142.             ohos:orientation="horizontal"/> 
  143.      
  144.  

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

本页面的布局包括DirectionalLayout布局，由Image、Text组件共同来构成，整体是横向布局，布局如下：

页面在resources\layout\default_doublelinelist.xml ，代码如下:

  1. "1.0" encoding="utf-8"?> 
  3.     xmlns:ohos="http://schemas.huawei.com/res/ohos" 
  4.     ohos:id="$+id:default_doubleLineList" 
  5.     ohos:height="$float:height_doubleLineList" 
  6.     ohos:width="match_parent" 
  7.     ohos:orientation="vertical"> 
  8.  
  9.     
  10.         xmlns:ohos="http://schemas.huawei.com/res/ohos" 
  11.         ohos:id="$+id:doubleLineList" 
  12.         ohos:height="$float:height_doubleLineList_text" 
  13.         ohos:width="match_parent" 
  14.         ohos:bottom_margin="$float:bottomMargin_doubleLineList" 
  15.         ohos:orientation="horizontal" 
  16.         ohos:top_margin="$float:topMargin_doubleLineList"> 
  17.  
  18.         
  19.             ohos:id="$+id:doubleLineList_text" 
  20.             ohos:height="match_parent" 
  21.             ohos:width="match_parent" 
  22.             ohos:alignment="vertical_center" 
  23.             ohos:orientation="vertical" 
  24.             ohos:weight="2"> 
  25.  
  26.             
  27.                 ohos:id="$+id:doubleLineList_text_layout" 
  28.                 ohos:height="match_parent" 
  29.                 ohos:width="match_content" 
  30.                 ohos:layout_direction="locale"> 
  31.  
  32.                 
  33.                     ohos:id="$+id:doubleLineList_text_primary" 
  34.                     ohos:height="match_content" 
  35.                     ohos:width="match_parent" 
  36.                     ohos:bottom_margin="$float:bottomMargin_doubleLineList" 
  37.                     ohos:layout_direction="locale" 
  38.                     ohos:text_color="$color:color_doubleLineList_primary_text" 
  39.                     ohos:text_size="$float:textSize_primaryText"/> 
  40.  
  41.                 
  42.                     ohos:id="$+id:doubleLineList_text_secondary" 
  43.                     ohos:height="match_content" 
  44.                     ohos:width="match_parent" 
  45.                     ohos:layout_direction="locale" 
  46.                     ohos:text_color="$color:color_doubleLineList_secondary_text" 
  47.                     ohos:text_size="$float:textSize_secondaryText"/> 
  48.              
  49.          
  50.  
  51.         
  52.             ohos:id="$+id:doubleLineList_right" 
  53.             ohos:height="match_parent" 
  54.             ohos:width="match_parent" 
  55.             ohos:alignment="vertical_center|right" 
  56.             ohos:orientation="horizontal" 
  57.             ohos:right_of="$+id:doubleLineList_text" 
  58.             ohos:weight="2"> 
  59.  
  60.             
  61.                 ohos:id="$+id:doubleLineList_right_touchTarget1" 
  62.                 ohos:height="$float:height_touchTarget" 
  63.                 ohos:width="$float:width_touchTarget" 
  64.                 ohos:alignment="center"> 
  65.  
  66.                 
  67.                     ohos:id="$+id:doubleLineList_right_img1" 
  68.                     ohos:height="$float:height_doubleLineList_button" 
  69.                     ohos:width="$float:width_doubleLineList_button"/> 
  70.              
  71.  
  72.             
  73.                 ohos:id="$+id:doubleLineList_right_touchTarget2" 
  74.                 ohos:height="$float:height_touchTarget" 
  75.                 ohos:width="$float:width_touchTarget" 
  76.                 ohos:alignment="center"> 
  77.  
  78.                 
  79.                     ohos:id="$+id:doubleLineList_right_img2" 
  80.                     ohos:height="$float:height_doubleLineList_button" 
  81.                     ohos:width="$float:width_doubleLineList_button"/> 
  82.              
  83.  
  84.             
  85.                 ohos:id="$+id:doubleLineList_right_touchTarget3" 
  86.                 ohos:height="$float:height_touchTarget" 
  87.                 ohos:width="$float:width_touchTarget" 
  88.                 ohos:alignment="center"> 
  89.  
  90.                 
  91.                     ohos:id="$+id:doubleLineList_right_img3" 
  92.                     ohos:height="$float:height_doubleLineList_button" 
  93.                     ohos:width="$float:width_doubleLineList_button"/> 
  94.              
  95.          
  96.      
  97.  
  98.     
  99.         ohos:id="$+id:divider" 
  100.         ohos:height="$float:height_divider" 
  101.         ohos:width="match_parent" 
  102.         ohos:image_src="$graphic:divider"/> 
  103.  

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

本页面和默认双行列表组件页面基本一致，只是布局中只有一个操作按钮，使用DirectionalLayout布局，由Image、Text组件共同来构成，整体是横向布局，布局如下：

页面在/resources/base/layout/singlebutton_doublelinelist.xml，代码如下：

  1. "1.0" encoding="utf-8"?> 
  3.     xmlns:ohos="http://schemas.huawei.com/res/ohos" 
  4.     ohos:id="$+id:singleButton_doubleLineList" 
  5.     ohos:height="$float:height_doubleLineList" 
  6.     ohos:width="match_parent" 
  7.     ohos:orientation="vertical"> 
  8.  
  9.     
  10.         xmlns:ohos="http://schemas.huawei.com/res/ohos" 
  11.         ohos:id="$+id:singleButtonList" 
  12.         ohos:height="$float:height_doubleLineList_text" 
  13.         ohos:width="match_parent" 
  14.         ohos:bottom_margin="$float:bottomMargin_doubleLineList" 
  15.         ohos:orientation="horizontal" 
  16.         ohos:top_margin="$float:topMargin_doubleLineList"> 
  17.  
  18.         
  19.             ohos:id="$+id:singleButtonList_text" 
  20.             ohos:height="match_parent" 
  21.             ohos:width="match_parent" 
  22.             ohos:alignment="vertical_center" 
  23.             ohos:orientation="vertical" 
  24.             ohos:weight="2"> 
  25.             
  26.                 ohos:height="match_parent" 
  27.                 ohos:width="match_content" 
  28.                 ohos:layout_direction="locale"> 
  29.                 
  30.                     ohos:id="$+id:singleButtonList_text_primary" 
  31.                     ohos:height="match_content" 
  32.                     ohos:width="match_content" 
  33.                     ohos:bottom_margin="$float:bottomMargin_doubleLineList" 
  34.                     ohos:layout_direction="locale" 
  35.                     ohos:text_color="$color:color_doubleLineList_primary_text" 
  36.                     ohos:text_size="$float:textSize_primaryText"/> 
  37.  
  38.                 
  39.                     ohos:id="$+id:singleButtonList_text_secondary" 
  40.                     ohos:height="match_content" 
  41.                     ohos:width="match_content" 
  42.                     ohos:layout_direction="locale" 
  43.                     ohos:text_color="$color:color_doubleLineList_secondary_text" 
  44.                     ohos:text_size="$float:textSize_secondaryText"/> 
  45.              
  46.          
  47.  
  48.         
  49.             ohos:id="$+id:singleButtonList_right" 
  50.             ohos:height="match_parent" 
  51.             ohos:width="match_parent" 
  52.             ohos:alignment="vertical_center|right" 
  53.             ohos:layout_direction="locale" 
  54.             ohos:weight="1"> 
  55.             
  56.                 ohos:height="match_content" 
  57.                 ohos:width="match_content" 
  58.                 ohos:layout_direction="locale"> 
  59.                 
  60.                     ohos:id="$+id:singleButtonList_right_touchTarget" 
  61.                     ohos:height="$float:height_touchTarget" 
  62.                     ohos:width="$float:width_touchTarget" 
  63.                     ohos:alignment="center"> 
  64.                     
  65.                         ohos:id="$+id:singleButtonList_right_img" 
  66.                         ohos:height="$float:height_doubleLineList_switch" 
  67.                         ohos:width="$float:width_doubleLineList_switch"/> 
  68.                  
  69.              
  70.          
  71.      
  72.  
  73.     
  74.         ohos:id="$+id:divider" 
  75.         ohos:height="$float:height_divider" 
  76.         ohos:width="match_parent" 
  77.         ohos:image_src="$graphic:divider"/> 
  78.  

4.Tab 组件页面

自定义的tab组件，用于动态渲染tab栏，使用DirectionalLayout布局，由Image、Text组件共同来构成，整体是垂直布局。

页面在resources/base/layout/tab.xml，代码如下：

  1. "1.0" encoding="utf-8"?> 
  3.     xmlns:ohos="http://schemas.huawei.com/res/ohos" 
  4.     ohos:id="$+id:tab" 
  5.     ohos:height="match_content" 
  6.     ohos:width="0vp" 
  7.     ohos:alignment="center" 
  8.     ohos:orientation="vertical" 
  9.     ohos:weight="1"> 
  10.  
  11.     
  12.         ohos:id="$+id:bottom_tab_button_image" 
  13.         ohos:height="$float:height_tab" 
  14.         ohos:width="$float:width_tab" 
  15.         /> 
  16.  
  17.     
  18.         ohos:id="$+id:bottom_tab_button_text" 
  19.         ohos:height="match_content" 
  20.         ohos:width="match_parent" 
  21.         ohos:text_alignment="top|horizontal_center" 
  22.         ohos:text_color="$color:color_tabText_normal" 
  23.         ohos:text_size="$float:textSize_tab" 
  24.         /> 
  25.  
  26.  

说明：

布局文件中使用到了一些样式和图片，在resources\base\graphic下有做定义，详情可以参考完整代码。

相关权限

不需要额外申请权限

tab 按钮切换的业务逻辑

将动态添加的tab按钮存储到List中并进行遍历，设置当前点击的tab按钮为激活样式，其它tab按钮设置为普通效果。

后台代码在 /slice/MainAbilitySlice.java 关键代码如下：

  1. tab.setClickedListener(component -> { 
  2.                 Text focusTab = (Text) component.findComponentById(ResourceTable.Id_bottom_tab_button_text); 
  3.                 //Set active tab image 
  4.                 setActiveTabImage(tabList, focusTab.getText()); 
  5.  
  6. }); 
  1.  
  2.     private void setActiveTabImage(List tabList, String focusText) { 
  3.  
  4.         Element tabNormal = null; 
  5.         Element tabActived = null; 
  6.         for (DirectionalLayout btn : tabList) { 
  7.             Text text = (Text) btn.findComponentById(ResourceTable.Id_bottom_tab_button_text); 
  8.             if ("收藏".equals(text.getText())) { 
  9.                 tabNormal = ElementScatter.getInstance(getContext()).parse(ResourceTable.Graphic_ic_favorite); 
  10.                 tabActived = ElementScatter.getInstance(getContext()).parse(ResourceTable.Graphic_ic_favorite_actived); 
  11.                 if ("收藏".equals(focusText)) { 
  12.                     ((Image) btn.findComponentById(ResourceTable.Id_bottom_tab_button_image)).setImageElement(tabActived); 
  13.                 } else { 
  14.                     ((Image) btn.findComponentById(ResourceTable.Id_bottom_tab_button_image)).setImageElement(tabNormal); 
  15.                 } 
  16.             } 
  17.             if ("编辑".equals(text.getText())) { 
  18.                 tabNormal = ElementScatter.getInstance(getContext()).parse(ResourceTable.Graphic_ic_edit); 
  19.                 tabActived = ElementScatter.getInstance(getContext()).parse(ResourceTable.Graphic_ic_edit_actived); 
  20.                 if ("编辑".equals(focusText)) { 
  21.                     ((Image) btn.findComponentById(ResourceTable.Id_bottom_tab_button_image)).setImageElement(tabActived); 
  22.                 } else { 
  23.                     ((Image) btn.findComponentById(ResourceTable.Id_bottom_tab_button_image)).setImageElement(tabNormal); 
  24.                 } 
  25.             } 
  26.             if ("更多".equals(text.getText())) { 
  27.                 tabNormal = ElementScatter.getInstance(getContext()).parse(ResourceTable.Graphic_ic_mores); 
  28.                 tabActived = ElementScatter.getInstance(getContext()).parse(ResourceTable.Graphic_ic_mores_actived); 
  29.                 if ("更多".equals(focusText)) { 
  30.                     ((Image) btn.findComponentById(ResourceTable.Id_bottom_tab_button_image)).setImageElement(tabActived); 
  31.                 } else { 
  32.                     ((Image) btn.findComponentById(ResourceTable.Id_bottom_tab_button_image)).setImageElement(tabNormal); 
  33.                 } 
  34.             } 
  35.         } 
  36.     } 

滑动效果实现的业务逻辑

向上/下滑动滚动条，显示和隐藏顶部应用栏中联系人姓名(通过设置文字透明度实现)和更改背景的效果(更改背景色)

后台代码在 /slice/MainAbilitySlice.java 关键代码如下：

  1. private void initScrollView() { 
  2.         ScrollView scrollView = (ScrollView) findComponentById(ResourceTable.Id_contacts_detail_scroll); 
  3.         int profileSizePx = AttrHelper.vp2px(COLOR_CHANGE_RANGE, this); 
  4.         if (scrollView != null) { 
  5.             scrollView.setReboundEffectParams(OVERSCROLL_PERCENT, OVERSCROLL_RATE, REMAIN_VISIBLE_PERCENT); 
  6.             scrollView.setReboundEffect(true); 
  7.             //获取appbar显示的contact name 
  8.             Text userName = (Text) findComponentById(ResourceTable.Id_appBar_userName); 
  9.  
  10.             DirectionalLayout backGround = (DirectionalLayout) findComponentById(ResourceTable.Id_background); 
  11.             ShapeElement shapeElement = new ShapeElement(); 
  12.             shapeElement.setShape(ShapeElement.RECTANGLE); 
  13.  
  14.             // Set Scrolled listener 
  15.             scrollView.getComponentTreeObserver().addScrolledListener(() -> { 
  16.  
  17.                 float curY = scrollView.getScrollValue(Component.AXIS_Y); 
  18.                 HiLog.info(LABEL, "curY:" + curY); 
  19.  
  20.                 int colorChange = (int) ((BACKGROUND_COLOR - ORIGINAL_BACKGROUND_COLOR) * curY / profileSizePx); 
  21.                 HiLog.info(LABEL, "colorChange:" + colorChange); 
  22.                 HiLog.info(LABEL, "colorValue:" + (ORIGINAL_BACKGROUND_COLOR + colorChange)); 
  23.  
  24.  
  25.                 //设置颜色的方法 
  26.                 //1.设置ability_main.xml组件中的背景色，如：240/160/110，这是一个橙色 
  27.                 //2.手动加上刚才的值，如240/160/110 
  28.  
  29.                 shapeElement.setRgbColor(new RgbColor(ORIGINAL_BACKGROUND_COLOR + colorChange+240, 
  30.                         ORIGINAL_BACKGROUND_COLOR + colorChange+160, ORIGINAL_BACKGROUND_COLOR + colorChange+110)); 
  31.                 backGround.setBackground(shapeElement); 
  32.  
  33.                 userName.setAlpha(1 * curY / profileSizePx); 
  34.             }); 
  35.         } 
  36.     } 

效果展示：

向下滚动

向上滚动

点击tab图标

文章相关附件可以点击下面的原文链接前往下载

https://harmonyos.51cto.com/posts/4776

想了解更多内容，请访问：

51CTO和华为官方合作共建的鸿蒙技术社区

https://harmonyos.51cto.com

 

来源：鸿蒙社区内容投诉

免责声明：

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题

  • 2024年上半年信息系统项目管理师第二批次真题及答案解析（完整版）

    难度     813人已做
    查看

  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看

  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看

  • 2024年上半年软考高项第一、二批次真题考点汇总（完整版）

    难度     435人已做
    查看

  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机

HarmonyOS官方模板学习 之 About Feature Ability(Java)

后端开发鸿蒙HarmonyOS2024-12-03

HarmonyOS官方模板学习之Category Ability(Java)

后端开发鸿蒙HarmonyOS2024-12-03

鸿蒙HarmonyOS官方模板学习 之 Grid Ability(Java)

后端开发鸿蒙HarmonyOS2024-12-03

鸿蒙HarmonyOS官方模板学习 之 Full Screen Ability(Java)

后端开发鸿蒙HarmonyOS2024-12-03
位置：首页-资讯-后端开发
咦！没有更多了？去看看其它编程学习网 内容吧
首页课程
资料下载问答资讯