【软通动力】HarmonyOS三方件开发指南(13)-SwipeLayout侧滑删除 - HarmonyOS技术社区 - 电子技术论坛 - 广受欢迎的专业电子论坛
分享 收藏 返回

[文章]

【软通动力】HarmonyOS三方件开发指南(13)-SwipeLayout侧滑删除

1. SwipeLayout组件功能介绍
1.1.功能介绍:
SwipeLayout组件是一个侧滑删除组件。
1.2. 模拟器上运行效果:

2. SwipeLayout使用方法
2.1. 新建工程,增加组件Har包依赖
在应用模块中添加HAR,只需要将SwipeLayout.har复制到entrylibs目录下即可(由于build.gradle中已经依赖的libs目录下的*.har,因此不需要再做修改)。

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

  1. tionalLayout
  2.     xmlns:ohos="http://schemas.huawei.com/res/ohos"
  3.     ohos:id="$+id:total1"
  4.     ohos:height="match_parent"
  5.     ohos:width="match_parent"
  6.     ohos:background_element="gray"
  7.     ohos:orientation="vertical">
  8.    
  9.         ohos:id="$+id:sample2"
  10.         ohos:height="80vp"
  11.         ohos:width="match_parent"
  12.         ohos:orientation="horizontal">
  13.         
  14.             ohos:id="$+id:bottom_layout1"
  15.             ohos:height="match_parent"
  16.             ohos:width="match_parent"
  17.             ohos:background_element="white"
  18.             ohos:multiple_lines="true"
  19.             ohos:padding="10"
  20.             ohos:text="要有最樸素的生活和最遙遠的夢想,即使明天天寒地凍,山高水遠,路遠馬亡。"
  21.             ohos:text_alignment="left"
  22.             ohos:text_size="14fp"
  23.             ohos:visibility="visible">
  24.         
  25.         
  26.             ohos:id="$+id:bottom_wrapper1"
  27.             ohos:height="match_parent"
  28.             ohos:width="360px"
  29.             ohos:background_element="#ddff00"
  30.             ohos:orientation="horizontal"
  31.             ohos:visibility="visible">
  32.             
  33.                 ohos:id="$+id:Texts1"
  34.                 ohos:height="match_parent"
  35.                 ohos:width="180px"
  36.                 ohos:background_element="#7B1FA2"
  37.                 ohos:left_padding="25"
  38.                 ohos:right_padding="25"
  39.                 ohos:text="收藏"
  40.                 ohos:text_alignment="center"
  41.                 ohos:text_color="#DC143C"
  42.                 ohos:text_size="14fp"
  43.                 ohos:visibility="visible"
  44.                 />
  45.             
  46.                 ohos:id="$+id:texts2"
  47.                 ohos:height="match_parent"
  48.                 ohos:width="180px"
  49.                 ohos:background_element="#C7C7CC"
  50.                 ohos:left_padding="25"
  51.                 ohos:right_padding="25"
  52.                 ohos:text="删除"
  53.                 ohos:text_alignment="center"
  54.                 ohos:text_color="#DC143C"
  55.                 ohos:text_size="14fp"
  56.                 ohos:visibility="visible"
  57.                 />
  58.         
  59.         
  60.             ohos:id="$+id:images3"
  61.             ohos:height="match_parent"
  62.             ohos:width="match_parent"
  63.             ohos:background_element="gray"
  64.             ohos:image_src="$media:star"
  65.             />
  66.         
  67.             ohos:id="$+id:bottom_fronts"
  68.             ohos:height="match_parent"
  69.             ohos:width="match_content"
  70.             ohos:background_element="#ddff00"
  71.             ohos:orientation="horizontal"
  72.             ohos:visibility="visible">
  73.             
  74.                 ohos:id="$+id:images1"
  75.                 ohos:height="match_parent"
  76.                 ohos:width="180px"
  77.                 ohos:background_element="green"
  78.                 ohos:image_src="$media:star"/>
  79.             
  80.                 ohos:id="$+id:images2"
  81.                 ohos:height="match_parent"
  82.                 ohos:width="180px"
  83.                 ohos:background_element="red"
  84.                 ohos:image_src="$media:trash"/>
  85.         
  86.    
  87.    
  88.         ohos:id="$+id:images"
  89.         ohos:height="match_content"
  90.         ohos:width="match_content"
  91.         ohos:background_element="green"
  92.         ohos:image_src="$media:star"
  93.         ohos:layout_alignment="horizontal_center"
  94.         ohos:top_margin="100vp"/>
2.3. 初始化SwipeLayout
在MainAbilitySlince类的onStart函数中,增加如下代码:
  1. peLayout swipeLayout = (SwipeLayout) findComponentById(ResourceTable.Id_sample1);
  2. DirectionalLayout right = (DirectionalLayout) findComponentById(ResourceTable.Id_bottom_wrapper);
  3. //初始化
  4. swipeLayout.initializeSwipe();
  5. DirectionalLayout left = (DirectionalLayout) findComponentById(ResourceTable.Id_bottom_front);
  6. Image image3 = (Image) findComponentById(ResourceTable.Id_image3);
  7. //将各个方向拖拽时对应展示的视图添加到swipeLayout
  8. swipeLayout.addDrag(SwipeLayout.DragEdge.Left, right);
  9. swipeLayout.addDrag(SwipeLayout.DragEdge.Right, left);
  10. swipeLayout.addDrag(SwipeLayout.DragEdge.Bottom, image3);

3. SwipeLayout开发实现
3.1. 新建一个Module
新建一个Module,类型选择HarmonyOS Library,模块名为SwipeLayout,如图

3.2. 新建一个SwipeLayout类
新建一个SwipeLayout类,继承自PositionLayout类
SwipeLayout的主要流程:

1. 首先通过xml的构造方法,为SwipeLayout添加拖拽监听;
2. 将LinkedHashMap mDragEdges初始化为空,并确定主界面的显示位置;
3. 通过public void addDrag(DragEdge dragEdge, Component child) 方法将可拖拽的方向和对应展示的视图添加到mDragEdges,并设置其初始的ContentPosition;
public void addDrag(DragEdge dragEdge, Component child) {    mDragEdges.put(dragEdge, child);    switch (dragEdge) {        case Left:            child.setContentPosition(getWidth(), 0);            break;        case Right:            HiLog.info(label, "Log_addDrag" + child.getHeight());            child.setContentPosition(-child.getWidth(), 0);            break;        case Top:            child.setContentPosition(0, getHeight());            break;        case Bottom:            child.setContentPosition(0, -child.getHeight());            break;    }    child.setVisibility(INVISIBLE);    addComponent(child, 0);}
4.在拖拽动作的监听回调方法中完成对视图的更新
A.在update回调中设置打开和关闭的边界以及边界内的位置刷新
  1. if (getSurfaceView().getContentPositionY() + dragInfo.yOffset <= 0) {
  2.     close();
  3. } else if (getSurfaceView().getContentPositionY() + dragInfo.yOffset >= getHeight()) {
  4.     open();
  5. } else {
  6.     getSurfaceView().setContentPositionY(getSurfaceView().getContentPositionY() + (float) dragInfo.yOffset);
  7.     getCurrentBottomView().setContentPositionY(getCurrentBottomView().getContentPositionY() + (float) dragInfo.yOffset);
  8. }
B.在end中判断滑动的距离,如果大于设定的滑动距离则直接将控件展开或者关闭
  1. if (isCloseBeforeDrag && mDragDistanceY < 0) {
  2.     if (Math.abs(mDragDistanceY) >= mWillOpenPercentAfterClose * getBottomViewHeight()) {
  3.         open();
  4.     } else {
  5.         close();
  6.     }
  7. }
  8. if (!isCloseBeforeDrag && mDragDistanceY > 0) {
  9.     if (Math.abs(mDragDistanceY) >= mWillOpenPercentAfterClose * getBottomViewHeight()) {
  10.         close();
  11.     } else {
  12.         open();
  13.     }
  14. }
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

欢迎交流:https://harmonyos.51cto.com/column/30
©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任

更多回帖

×
发帖