鸿蒙HarmonyOS三方件开发指南-SwipeLayout侧滑删除

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

创新互联主要从事网站制作、成都网站建设、网页设计、企业做网站、公司建网站等业务。立足成都服务巴楚,十余年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:13518219792

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

https://harmonyos.

1. SwipeLayout组件功能介绍

1.1.功能介绍：

SwipeLayout组件是一个侧滑删除组件。

1.2. 模拟器上运行效果：

2. SwipeLayout使用方法

2.1. 新建工程，增加组件Har包依赖

在应用模块中添加HAR，只需要将SwipeLayout.har复制到entry\libs目录下即可(由于build.gradle中已经依赖的libs目录下的*.har，因此不需要再做修改)。

2.2. 修改主页面的布局文件

修改主页面的布局文件ability_main.xml，将自定义的SwipeLayout添加到xml中，将初始状态下展示的视图添加到SwipeLayout作为index为0的子视图：

 
 
 
 
      
  
  
  
  1.  
    2.   
  
  
  
  2.   
  
  
  
  3.     xmlns:ohos="http://schemas.huawei.com/res/ohos" 
    4.   
  
  
  
  4.     ohos:id="$+id:total1" 
    5.   
  
  
  
  5.     ohos:height="match_parent" 
    6.   
  
  
  
  6.     ohos:width="match_parent" 
    7.   
  
  
  
  7.     ohos:background_element="gray" 
    8.   
  
  
  
  8.     ohos:orientation="vertical"> 
    9.   
  
  
  
  9.       
  
  
  
  10.         ohos:id="$+id:sample2" 
    11.   
  
  
  
  11.         ohos:height="80vp" 
    12.   
  
  
  
  12.         ohos:width="match_parent" 
    13.   
  
  
  
  13.         ohos:orientation="horizontal"> 
    14.   
  
  
  
  14.           
  
  
  
  15.             ohos:id="$+id:bottom_layout1" 
    16.   
  
  
  
  16.             ohos:height="match_parent" 
    17.   
  
  
  
  17.             ohos:width="match_parent" 
    18.   
  
  
  
  18.             ohos:background_element="white" 
    19.   
  
  
  
  19.             ohos:multiple_lines="true" 
    20.   
  
  
  
  20.             ohos:padding="10" 
    21.   
  
  
  
  21.             ohos:text="要有最樸素的生活和最遙遠的夢想，即使明天天寒地凍，山高水遠，路遠馬亡。" 
    22.   
  
  
  
  22.             ohos:text_alignment="left" 
    23.   
  
  
  
  23.             ohos:text_size="14fp" 
    24.   
  
  
  
  24.             ohos:visibility="visible"> 
    25.   
  
  
  
  25.          
    26.   
  
  
  
  26.           
  
  
  
  27.             ohos:id="$+id:bottom_wrapper1" 
    28.   
  
  
  
  28.             ohos:height="match_parent" 
    29.   
  
  
  
  29.             ohos:width="360px" 
    30.   
  
  
  
  30.             ohos:background_element="#ddff00" 
    31.   
  
  
  
  31.             ohos:orientation="horizontal" 
    32.   
  
  
  
  32.             ohos:visibility="visible"> 
    33.   
  
  
  
  33.               
  
  
  
  34.                 ohos:id="$+id:Texts1" 
    35.   
  
  
  
  35.                 ohos:height="match_parent" 
    36.   
  
  
  
  36.                 ohos:width="180px" 
    37.   
  
  
  
  37.                 ohos:background_element="#7B1FA2" 
    38.   
  
  
  
  38.                 ohos:left_padding="25" 
    39.   
  
  
  
  39.                 ohos:right_padding="25" 
    40.   
  
  
  
  40.                 ohos:text="收藏" 
    41.   
  
  
  
  41.                 ohos:text_alignment="center" 
    42.   
  
  
  
  42.                 ohos:text_color="#DC143C" 
    43.   
  
  
  
  43.                 ohos:text_size="14fp" 
    44.   
  
  
  
  44.                 ohos:visibility="visible" 
    45.   
  
  
  
  45.                 /> 
    46.   
  
  
  
  46.               
  
  
  
  47.                 ohos:id="$+id:texts2" 
    48.   
  
  
  
  48.                 ohos:height="match_parent" 
    49.   
  
  
  
  49.                 ohos:width="180px" 
    50.   
  
  
  
  50.                 ohos:background_element="#C7C7CC" 
    51.   
  
  
  
  51.                 ohos:left_padding="25" 
    52.   
  
  
  
  52.                 ohos:right_padding="25" 
    53.   
  
  
  
  53.                 ohos:text="删除" 
    54.   
  
  
  
  54.                 ohos:text_alignment="center" 
    55.   
  
  
  
  55.                 ohos:text_color="#DC143C" 
    56.   
  
  
  
  56.                 ohos:text_size="14fp" 
    57.   
  
  
  
  57.                 ohos:visibility="visible" 
    58.   
  
  
  
  58.                 /> 
    59.   
  
  
  
  59.          
    60.   
  
  
  
  60.           
  
  
  
  61.             ohos:id="$+id:images3" 
    62.   
  
  
  
  62.             ohos:height="match_parent" 
    63.   
  
  
  
  63.             ohos:width="match_parent" 
    64.   
  
  
  
  64.             ohos:background_element="gray" 
    65.   
  
  
  
  65.             ohos:image_src="$media:star" 
    66.   
  
  
  
  66.             /> 
    67.   
  
  
  
  67.           
  
  
  
  68.             ohos:id="$+id:bottom_fronts" 
    69.   
  
  
  
  69.             ohos:height="match_parent" 
    70.   
  
  
  
  70.             ohos:width="match_content" 
    71.   
  
  
  
  71.             ohos:background_element="#ddff00" 
    72.   
  
  
  
  72.             ohos:orientation="horizontal" 
    73.   
  
  
  
  73.             ohos:visibility="visible"> 
    74.   
  
  
  
  74.               
  
  
  
  75.                 ohos:id="$+id:images1" 
    76.   
  
  
  
  76.                 ohos:height="match_parent" 
    77.   
  
  
  
  77.                 ohos:width="180px" 
    78.   
  
  
  
  78.                 ohos:background_element="green" 
    79.   
  
  
  
  79.                 ohos:image_src="$media:star"/> 
    80.   
  
  
  
  80.               
  
  
  
  81.                 ohos:id="$+id:images2" 
    82.   
  
  
  
  82.                 ohos:height="match_parent" 
    83.   
  
  
  
  83.                 ohos:width="180px" 
    84.   
  
  
  
  84.                 ohos:background_element="red" 
    85.   
  
  
  
  85.                 ohos:image_src="$media:trash"/> 
    86.   
  
  
  
  86.          
    87.   
  
  
  
  87.      
    88.   
  
  
  
  88.       
  
  
  
  89.         ohos:id="$+id:images" 
    90.   
  
  
  
  90.         ohos:height="match_content" 
    91.   
  
  
  
  91.         ohos:width="match_content" 
    92.   
  
  
  
  92.         ohos:background_element="green" 
    93.   
  
  
  
  93.         ohos:image_src="$media:star" 
    94.   
  
  
  
  94.         ohos:layout_alignment="horizontal_center" 
    95.   
  
  
  
  95.         ohos:top_margin="100vp"/> 
    96.   
  
  
  
  96.  
    97.

2.3. 初始化SwipeLayout

在MainAbilitySlince类的onStart函数中，增加如下代码。

 
 
 
 
      
  
  
  
  1. SwipeLayout swipeLayout = (SwipeLayout) findComponentById(ResourceTable.Id_sample1); 
    2.   
  
  
  
  2. DirectionalLayout right = (DirectionalLayout) findComponentById(ResourceTable.Id_bottom_wrapper); 
    3.   
  
  
  
  3. //初始化 
    4.   
  
  
  
  4. swipeLayout.initializeSwipe(); 
    5.   
  
  
  
  5. DirectionalLayout left = (DirectionalLayout) findComponentById(ResourceTable.Id_bottom_front); 
    6.   
  
  
  
  6. Image image3 = (Image) findComponentById(ResourceTable.Id_image3); 
    7.   
  
  
  
  7. //将各个方向拖拽时对应展示的视图添加到swipeLayout 
    8.   
  
  
  
  8. swipeLayout.addDrag(SwipeLayout.DragEdge.Left, right); 
    9.   
  
  
  
  9. swipeLayout.addDrag(SwipeLayout.DragEdge.Right, left); 
    10.   
  
  
  
  10. swipeLayout.addDrag(SwipeLayout.DragEdge.Bottom, image3); 
    11.

3. SwipeLayout开发实现

3.1. 新建一个Module

新建一个Module，类型选择HarmonyOS Library，模块名为SwipeLayout，如图

3.2. 新建一个SwipeLayout类

新建一个SwipeLayout类，继承自PositionLayout类

SwipeLayout的主要流程：

1. 首先通过xml的构造方法，为SwipeLayout添加拖拽监听;

2. 将LinkedHashMap

3. 通过public void addDrag(DragEdge dragEdge, Component child) 方法将可拖拽的方向和对应展示的视图添加到mDragEdges，并设置其初始的ContentPosition;

 
 
 
 
      
  
  
  
  1. public void addDrag(DragEdge dragEdge, Component child) { 
    2.   
  
  
  
  2.     mDragEdges.put(dragEdge, child); 
    3.   
  
  
  
  3.     switch (dragEdge) { 
    4.   
  
  
  
  4.         case Left: 
    5.   
  
  
  
  5.             child.setContentPosition(getWidth(), 0); 
    6.   
  
  
  
  6.             break; 
    7.   
  
  
  
  7.         case Right: 
    8.   
  
  
  
  8.             HiLog.info(label, "Log_addDrag" + child.getHeight()); 
    9.   
  
  
  
  9.             child.setContentPosition(-child.getWidth(), 0); 
    10.   
  
  
  
  10.             break; 
    11.   
  
  
  
  11.         case Top: 
    12.   
  
  
  
  12.             child.setContentPosition(0, getHeight()); 
    13.   
  
  
  
  13.             break; 
    14.   
  
  
  
  14.         case Bottom: 
    15.   
  
  
  
  15.             child.setContentPosition(0, -child.getHeight()); 
    16.   
  
  
  
  16.             break; 
    17.   
  
  
  
  17.     } 
    18.   
  
  
  
  18.     child.setVisibility(INVISIBLE); 
    19.   
  
  
  
  19.     addComponent(child, 0); 
    20.   
  
  
  
  20. } 
    21.

4.在拖拽动作的监听回调方法中完成对视图的更新

A.在update回调中设置打开和关闭的边界以及边界内的位置刷新

 
 
 
 
      
  
  
  
  1. if (getSurfaceView().getContentPositionY() + dragInfo.yOffset <= 0) { 
    2.   
  
  
  
  2.     close(); 
    3.   
  
  
  
  3. } else if (getSurfaceView().getContentPositionY() + dragInfo.yOffset >= getHeight()) { 
    4.   
  
  
  
  4.     open(); 
    5.   
  
  
  
  5. } else { 
    6.   
  
  
  
  6.     getSurfaceView().setContentPositionY(getSurfaceView().getContentPositionY() + (float) dragInfo.yOffset); 
    7.   
  
  
  
  7.     getCurrentBottomView().setContentPositionY(getCurrentBottomView().getContentPositionY() + (float) dragInfo.yOffset); 
    8.   
  
  
  
  8. } 
    9.

B.在end中判断滑动的距离，如果大于设定的滑动距离则直接将控件展开或者关闭

 
 
 
 
      
  
  
  
  1. if (isCloseBeforeDrag && mDragDistanceY < 0) { 
    2.   
  
  
  
  2.     if (Math.abs(mDragDistanceY) >= mWillOpenPercentAfterClose * getBottomViewHeight()) { 
    3.   
  
  
  
  3.         open(); 
    4.   
  
  
  
  4.     } else { 
    5.   
  
  
  
  5.         close(); 
    6.   
  
  
  
  6.     } 
    7.   
  
  
  
  7. } 
    8.   
  
  
  
  8. if (!isCloseBeforeDrag && mDragDistanceY > 0) { 
    9.   
  
  
  
  9.     if (Math.abs(mDragDistanceY) >= mWillOpenPercentAfterClose * getBottomViewHeight()) { 
    10.   
  
  
  
  10.         close(); 
    11.   
  
  
  
  11.     } else { 
    12.   
  
  
  
  12.         open(); 
    13.   
  
  
  
  13.     } 
    14.   
  
  
  
  14. } 
    15.

3.3. 编译HAR包

利用Gradle可以将HarmonyOS Library库模块构建为HAR包，构建HAR包的方法如下：

在Gradle构建任务中，双击PackageDebugHar或PackageReleaseHar任务，构建Debug类型或Release类型的HAR。

待构建任务完成后，可以loadingview> bulid > outputs > har目录中，获取生成的HAR包。

项目源代码地址：https://github.com/isoftstone-dev/SwipeBackLayout

欢迎交流：HWIS-HOS@isoftstone.com

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

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

https://harmonyos.

文章标题：鸿蒙HarmonyOS三方件开发指南-SwipeLayout侧滑删除
网址分享：http://www.csdahua.cn/qtweb/news20/535870.html

网站建设、网络推广公司-快上网，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 快上网

成都快上网为您推荐相关内容

标签优化知识

同城分类信息

鑫友邦火锅桌　　 　定制网站　　 　和正源建设　　 　主机托管　　 　崇州威斯达宇　　 　成都定制网站建设　　 　温江服务器托管　　 　正泰动物制药　　 　网页设计　　 　盐亭网站制作公司　　 　乐山服务器托管　　 　四川佑馨产后护理　　 　成都西信机房托管　　 　成都网站排名　　 　沃尔沃发电机出租　　 　顺泽窗帘　　 　德阳服务器托管　　 　成都塑料加工　　 　企业营销型网站　　 　定制网站建设