devbox
空白诗007
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

harmony下拉刷新，上啦加载更多组件_harmonyos pulltorefresh

作者：空白诗007 | 2024-08-21 00:05:02

赞

踩

harmonyos pulltorefresh

目录

一、设计思路

二、动手实现

一、设计思路

①、自定义一个组件，加载一个内含Head、ListContainer、Foot的布局文件。

②、监听此布局的触摸事件

③、监听ListContainer是否滑动到顶部或者底部。

④、根据②和③监听事件做相应的显示和隐藏（head、foot）布局即可。

二、动手实现

1、新建类RefreshListContainer继承ComponentContainer

2、新建包含Head、ListContainer、Foot布局文件，refresh_layout.xml：

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <DependentLayout
  3.     xmlns:ohos="http://schemas.huawei.com/res/ohos"
  4.     ohos:height="match_parent"
  5.     ohos:width="match_parent"
  6.     ohos:background_element="$color:dialog_btn_gray_color"
  7.     ohos:orientation="vertical"
  8.     >
  9.  
  10.     <DependentLayout
  11.         ohos:id="$+id:head_layout"
  12.         ohos:height="match_content"
  13.         ohos:width="match_parent"
  14.         ohos:padding="10vp"
  15.         >
  16.  
  17.         <Text
  18.             ohos:id="$+id:head_text"
  19.             ohos:height="match_content"
  20.             ohos:width="match_content"
  21.             ohos:center_in_parent="true"
  22.             ohos:text="下拉刷新"
  23.             ohos:text_size="17fp"
  24.             />
  25.  
  26.         <Image
  27.             ohos:id="$+id:head_image"
  28.             ohos:height="40vp"
  29.             ohos:width="40vp"
  30.             ohos:image_src="$media:up_image"
  31.             ohos:left_of="$+id:head_text"
  32.             ohos:vertical_center="true"
  33.             />
  34.     </DependentLayout>
  35.  
  36.     <ListContainer
  37.         ohos:id="$+id:list_container"
  38.         ohos:height="match_parent"
  39.         ohos:width="match_parent"
  40.         ohos:background_element="white"
  41.         ohos:below="$id:head_layout"
  42.         />
  43.  
  44.     <DependentLayout
  45.         ohos:id="$+id:foot_layout"
  46.         ohos:height="70vp"
  47.         ohos:width="match_parent"
  48.         ohos:align_parent_bottom="true"
  49.         ohos:padding="10vp"
  50.         >
  51.  
  52.         <Text
  53.             ohos:id="$+id:foot_text"
  54.             ohos:height="match_content"
  55.             ohos:width="match_content"
  56.             ohos:center_in_parent="true"
  57.             ohos:text="下拉刷新"
  58.             ohos:text_size="17fp"
  59.             />
  60.  
  61.         <Image
  62.             ohos:id="$+id:foot_image"
  63.             ohos:height="40vp"
  64.             ohos:width="40vp"
  65.             ohos:image_src="$media:up_image"
  66.             ohos:left_of="$+id:foot_text"
  67.             ohos:vertical_center="true"
  68.             />
  69.     </DependentLayout>
  70. </DependentLayout>

3、在自定义的类中加载布局，初始化各个组件

  1. private void init() {
  2.     mRootLayout = (DependentLayout) LayoutScatter.getInstance(mContext)
  3.             .parse(ResourceTable.Layout_refresh_layout, null, true);
  4.  
  5.     HiLog.error(LABEL, "init,rootLayout:%{public}s", mRootLayout);
  6.     mHeadLayout = (DependentLayout) mRootLayout.findComponentById(ResourceTable.Id_head_layout);
  7.     mFootLayout = (DependentLayout) mRootLayout.findComponentById(ResourceTable.Id_foot_layout);
  8.     mListContainer = (ListContainer) mRootLayout.findComponentById(ResourceTable.Id_list_container);
  9.  
  10.     mHeadImage = (Image) mRootLayout.findComponentById(ResourceTable.Id_head_image);
  11.     mHeadText = (Text) mRootLayout.findComponentById(ResourceTable.Id_head_text);
  12.     mFootImage = (Image) mRootLayout.findComponentById(ResourceTable.Id_foot_image);
  13.     mFootText = (Text) mRootLayout.findComponentById(ResourceTable.Id_foot_text);
  14.  
  15.     addComponent(mRootLayout);
  16. }

4、设置监听事件

mRootLayout.setTouchEventListener(this::onTouchEvent);
  1. @Override
  2. public boolean onTouchEvent(Component component, TouchEvent touchEvent) {
  3.     int action = touchEvent.getAction();
  4.     MmiPoint point = touchEvent.getPointerPosition(touchEvent.getIndex());
  5.     HiLog.error(LABEL, "action:%{public}s", action);
  6.     switch (action) {
  7.         case TouchEvent.PRIMARY_POINT_DOWN:
  8.             HiLog.error(LABEL, "onTouchEvent:%{public}s", "PRIMARY_POINT_DOWN");
  9.  
  10.             mStartY = point.getY();
  11.             break;
  12.         case TouchEvent.PRIMARY_POINT_UP:
  13.             HiLog.error(LABEL, "onTouchEvent:%{public}s", "PRIMARY_POINT_UP");
  14.             HiLog.error(LABEL, "isPull:%{public}s", isPull);
  15.             if (isPull) {
  16.                 int dis = (int) (mEndY - mStartY);
  17.                 HiLog.error(LABEL, "dis:%{public}s", dis);
  18.                 mHeadLayout.setMarginTop(0);
  19.                 pullLoadingStatus();
  20.                 isPull = false;
  21.                 if (this.mRefreshListener != null) {
  22.                     this.mRefreshListener.pullRefresh();
  23.                 }
  24.                 mListContainer.setEnabled(true);
  25.                 // isLoading = true;
  26.             }
  27.  
  28.             if (isUp) {
  29.                 int dis = (int) (mStartY - mEndY);
  30.                 HiLog.error(LABEL, "dis:%{public}s", dis);
  31.                 mFootLayout.setMarginBottom(0);
  32.                 HiLog.error(LABEL, "mFootLayoutHeight:%{public}s", mFootLayoutHeight);
  33.                 mListContainer.setMarginBottom(mFootLayoutHeight);
  34.                 this.mBaseItemProvider.notifyDataSetItemInserted(mBaseItemProvider.getCount()-1);
  35.                 upLoadingStatus();
  36.                 isUp = false;
  37.                 if (this.mRefreshListener != null) {
  38.                     this.mRefreshListener.upLoadingMore();
  39.                 }
  40.                 mListContainer.setEnabled(true);
  41.             }
  42.             break;
  43.         case TouchEvent.POINT_MOVE:
  44.             HiLog.error(LABEL, "onTouchEvent:%{public}s", "HOVER_POINTER_MOVE");
  45.             mEndY = point.getY();
  46.             HiLog.error(LABEL, "onTouchEvent,mEndY:%{public}s,mStartY:%{public}s", mEndY, mStartY);
  47.             HiLog.error(LABEL, "mListContainer.canScroll(DRAG_UP):%{public}s", mListContainer.canScroll(DRAG_UP));
  48.  
  49.             HiLog.error(LABEL, "isSocllTop:%{public}s", isSocllTop);
  50.             if (!isLoading) {
  51.                 if (isSocllTop && !isUp) {
  52.                     if (mEndY - mStartY > 50) {
  53.                         isPull = true;
  54.                         if (pullAnimator != null) {
  55.                             pullAnimator.stop();
  56.                             mHeadImage.setRotation(0);
  57.                         }
  58.                         mHeadLayout.setVisibility(VISIBLE);
  59.                         mHeadLayout.setMarginTop((int) (mEndY - mStartY) - 50);
  60.                         if (mEndY - mStartY > 50 && mEndY - mStartY < 150) {
  61.                             pullDefault();
  62.                         } else {
  63.                             pullStatus();
  64.                         }
  65.                         mListContainer.setEnabled(false);
  66.                     }
  67.                 }
  68.                 if (!mListContainer.canScroll(DRAG_UP) && !isPull) {
  69.                     if (mStartY - mEndY > 50) {
  70.                         isUp = true;
  71.                         if (upAnimator != null) {
  72.                             upAnimator.stop();
  73.                             mFootImage.setRotation(0);
  74.                         }
  75.  
  76.                         HiLog.error(LABEL, "mStartY - mEndY:%{public}s", mStartY - mEndY);
  77.                         mFootLayout.setVisibility(VISIBLE);
  78.                         int des = (int) (mStartY - mEndY) - 50;
  79.                         mListContainer.setMarginBottom(mFootLayoutHeight + des);
  80.                         mFootLayout.setMarginBottom(des);
  81.                         HiLog.error(LABEL, "mFootLayoutHeight:%{public}s", mFootLayoutHeight);
  82.                         this.mBaseItemProvider.notifyDataSetItemInserted(mBaseItemProvider.getCount()-1);
  83.                         if (mStartY - mEndY > 50 && mStartY - mEndY < 150) {
  84.                             upDefault();
  85.                         } else {
  86.                             upStatus();
  87.                         }
  88.                       //  mListContainer.setEnabled(true);
  89.                     }
  90.                 }
  91.             }
  92.  
  93.             break;
  94.         default:
  95.     }
  96.     return true;
  97. }

5、新建回调事件

  1. package com.yan.refreshlistcontainer.listener;
  2.  
  3. public interface RefreshListener {
  4.  
  5.     public void pullRefresh();
  6.  
  7.     public void upLoadingMore();
  8. }

6.提供方法供外部调用

  1. //下拉刷新和上啦加载更多完成时调用
  2. public void completeLoading() {
  3.     if (pullAnimator != null) {
  4.         pullAnimator.stop();
  5.  
  6.     }
  7.     mHeadLayout.setVisibility(HIDE);
  8.     pullDefault();
  9.  
  10.     if (upAnimator != null) {
  11.         upAnimator.stop();
  12.     }
  13.     mFootLayout.setVisibility(HIDE);
  14.     mListContainer.setMarginBottom(0);
  15.     upDefault();
  16. }
  17.  
  18. //给ListContainer设置适配器
  19. public void setItemProvider(BaseItemProvider baseItemProvider) {
  20.     this.mBaseItemProvider = baseItemProvider;
  21.     mListContainer.setItemProvider(this.mBaseItemProvider);
  22.  
  23. }
  24. //设置上啦和下拉的监听事件
  25. public void setRefreshListener(RefreshListener refreshListener) {
  26.     this.mRefreshListener = refreshListener;
  27. }

7、ability使用

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <DirectionalLayout
  3.     xmlns:ohos="http://schemas.huawei.com/res/ohos"
  4.     ohos:height="match_parent"
  5.     ohos:width="match_parent"
  6.     ohos:alignment="center"
  7.     ohos:orientation="vertical">
  8.  
  9.    <com.yan.refreshlistcontainer.component.RefreshListContainer
  10.        ohos:id="$+id:refresh_list"
  11.        ohos:height="match_parent"
  12.        ohos:width="match_parent"/>
  13.  
  14. </DirectionalLayout>
  1. package com.yan.refreshlistcontainer.slice;
  2.  
  3. import com.yan.refreshlistcontainer.ResourceTable;
  4. import com.yan.refreshlistcontainer.bean.ListBean;
  5. import com.yan.refreshlistcontainer.component.RefreshListContainer;
  6. import com.yan.refreshlistcontainer.listener.RefreshListener;
  7. import com.yan.refreshlistcontainer.provider.RefreshListProvider;
  8. import ohos.aafwk.ability.AbilitySlice;
  9. import ohos.aafwk.content.Intent;
  10. import ohos.eventhandler.EventHandler;
  11. import ohos.eventhandler.EventRunner;
  12. import ohos.eventhandler.InnerEvent;
  13.  
  14. import java.util.ArrayList;
  15. import java.util.List;
  16.  
  17. public class MainAbilitySlice extends AbilitySlice {
  18.     private RefreshListContainer mRefreshList;
  19.     private List<ListBean> mData = new ArrayList<>();
  20.     private MyEventHandler myHandler;
  21.     private RefreshListProvider refreshListProvider;
  22.  
  23.     @Override
  24.     public void onStart(Intent intent) {
  25.         super.onStart(intent);
  26.         super.setUIContent(ResourceTable.Layout_ability_main);
  27.         mRefreshList = (RefreshListContainer) findComponentById(ResourceTable.Id_refresh_list);
  28.  
  29.         initList();
  30.         EventRunner runner = EventRunner.create(true);
  31.         myHandler = new MyEventHandler(runner);
  32.  
  33.         refreshListProvider = new RefreshListProvider(MainAbilitySlice.this, mData);
  34.         mRefreshList.setItemProvider(refreshListProvider);
  35.         mRefreshList.setRefreshListener(new RefreshListener() {
  36.             @Override
  37.             public void pullRefresh() {
  38.                 ListBean mListBean = new ListBean();
  39.                 mListBean.setAge(999);
  40.                 mListBean.setName("刷新新增Item");
  41.                 mData.add(0, mListBean);
  42.                 myHandler.sendEvent(1000, 3000);
  43.             }
  44.  
  45.             @Override
  46.             public void upLoadingMore() {
  47.                 ListBean mListBean = new ListBean();
  48.                 mListBean.setAge(999);
  49.                 mListBean.setName("加载更多新增Item");
  50.                 mData.add(mListBean);
  51.                 myHandler.sendEvent(1000, 3000);
  52.             }
  53.         });
  54.     }
  55.  
  56.     private class MyEventHandler extends EventHandler {
  57.         private MyEventHandler(EventRunner runner) {
  58.             super(runner);
  59.         }
  60.  
  61.         // 重写实现processEvent方法
  62.         @Override
  63.         public void processEvent(InnerEvent event) {
  64.             super.processEvent(event);
  65.             if (event == null) {
  66.                 return;
  67.             }
  68.             int eventId = event.eventId;
  69.  
  70.             switch (eventId) {
  71.                 case 1000:
  72.                     getUITaskDispatcher().syncDispatch(new Runnable() {
  73.                         @Override
  74.                         public void run() {
  75.                             refreshListProvider.notifyDataChanged();
  76.                             mRefreshList.completeLoading();
  77.                         }
  78.                     });
  79.  
  80.                     break;
  81.  
  82.                 default:
  83.                     break;
  84.             }
  85.         }
  86.     }
  87.  
  88.     private void initList() {
  89.         for (int i = 0; i < 100; i++) {
  90.             ListBean mListBean = new ListBean();
  91.             mListBean.setAge(i);
  92.             mListBean.setName("测试" + i);
  93.             mData.add(mListBean);
  94.         }
  95.     }
  96.  
  97.     @Override
  98.     public void onActive() {
  99.         super.onActive();
  100.     }
  101.  
  102.     @Override
  103.     public void onForeground(Intent intent) {
  104.         super.onForeground(intent);
  105.     }
  106. }

至此大概的流程已经完成。

Screenshot_20210707_162751_com.yan.demo.jpg

Screenshot_20210707_162759_com.yan.demo.jpg

Screenshot_20210707_162803_com.yan.demo.jpg

Screenshot_20210707_162821_com.yan.demo.jpg

项目地址：https://gitee.com/WangYan2017/refresh-list-container

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/空白诗007/article/detail/1008987
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号