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

鸿蒙OS下拉刷新及上拉加载harmonyos-refreshlayout_鸿蒙 list 下拉加载

作者：AllinToyou | 2024-03-13 11:21:26

赞

踩

鸿蒙 list 下拉加载

鸿蒙os2发布后，为了跟上节奏，对鸿蒙java-sdk进行了初步的学习。并尝试用鸿蒙os-sdk进行公司app的开发，但是发现鸿蒙组件库及开源组件库还是在初步开发阶段。很多组件可能需要自己进行开发。

附上鸿蒙开源库地址：https://gitee.com/openharmony-tpc

在这里找到了一些下拉刷新的组件，但是经过测试都有一些bug，或者是不满足自己的需求。于是参考了一下他们的代码进行了修改。

最后附上gitee地址

上代码：

  1. package com.honglu.refreshlayout;
  2.  
  3.  
  4. import ohos.agp.animation.Animator;
  5. import ohos.agp.animation.AnimatorValue;
  6. import ohos.agp.colors.RgbColor;
  7. import ohos.agp.components.*;
  8. import ohos.agp.components.element.Element;
  9. import ohos.agp.components.element.ShapeElement;
  10. import ohos.agp.utils.Color;
  11. import ohos.agp.utils.Point;
  12. import ohos.app.Context;
  13.  
  14. import static ohos.agp.components.ComponentContainer.LayoutConfig.MATCH_PARENT;
  15. import static ohos.agp.utils.LayoutAlignment.BOTTOM;
  16. import static ohos.agp.utils.LayoutAlignment.TOP;
  17.  
  18. /**
  19.  * create by ly
  20.  */
  21. public class RefreshLayout extends StackLayout implements Component.DraggedListener {
  22.  
  23.  
  24.     private Context mContext;
  25.  
  26.     private float mPullHeight;
  27.     private float mHeaderHeight;
  28.     private Component mContentView;
  29.     private Component footer;
  30.     private Component header;
  31.  
  32.  
  33.     private static final String EnableLoadMore = "EnableLoadMore";
  34.     private static final String EnableRefresh = "EnableRefresh";
  35.     private static final String RefreshBg = "RefreshBg";
  36.     private static final String RotateIconId = "RotateIconId";
  37.  
  38.     private boolean enableLoadMore = false;
  39.     private boolean enableRefresh = false;
  40.     private int refreshBgColor;
  41.     private Element rotateIcon = null;
  42.  
  43.     private int startY;
  44.     private Image refreshImage;
  45.     private Image loadImage;
  46.  
  47.     public RefreshLayout(Context context) {
  48.         this(context, null, null);
  49.     }
  50.  
  51.     public RefreshLayout(Context context, AttrSet attrs) {
  52.         this(context, attrs, null);
  53.     }
  54.  
  55.     public RefreshLayout(Context context, AttrSet attrs, String defStyleAttr) {
  56.         super(context, attrs, defStyleAttr);
  57.         mContext = context;
  58.         init(context, attrs);
  59.     }
  60.  
  61.     private void init(Context context, AttrSet attrs) {
  62.         mContext = context;
  63.         if (getChildCount() > 1) {
  64.             throw new RuntimeException("you can only attach one child");
  65.         }
  66.         setAttrs(attrs);
  67.         mPullHeight = 220;
  68.         mHeaderHeight = 160;
  69.         setLayoutRefreshedListener(component -> {
  70.             if (header == null) {
  71.                 addHeaderView();
  72.                 addFooter();
  73.                 mContentView = getComponentAt(0);
  74.             }
  75.         });
  76.         setDraggedListener(DRAG_VERTICAL, this);
  77.     }
  78.  
  79.     private void setAttrs(AttrSet attrs) {
  80.  
  81.         boolean enableLoadMore = attrs.getAttr(EnableLoadMore).isPresent();
  82.         if (enableLoadMore) {
  83.             this.enableLoadMore = attrs.getAttr(EnableLoadMore).get().getBoolValue();
  84.         }
  85.         boolean enableRefresh = attrs.getAttr(EnableRefresh).isPresent();
  86.         if (enableRefresh) {
  87.             this.enableRefresh = attrs.getAttr(EnableRefresh).get().getBoolValue();
  88.         }
  89.         boolean refreshBg = attrs.getAttr(RefreshBg).isPresent();
  90.         if (refreshBg) {
  91.             this.refreshBgColor = attrs.getAttr(RefreshBg).get().getColorValue().getValue();
  92.         }else{
  93.             this.refreshBgColor = Color.getIntColor("#22000000");
  94.         }
  95.         boolean rotateIconId = attrs.getAttr(RotateIconId).isPresent();
  96.         if (rotateIconId) {
  97.             rotateIcon = attrs.getAttr(RotateIconId).get().getElement();
  98.         }
  99.     }
  100.  
  101.     private boolean isRefresh = false;
  102.     private boolean isLoad = false;
  103.  
  104.     private void onDrugUpdate(DragInfo dragInfo) {
  105.         int upY = Math.round(dragInfo.updatePoint.position[1]);
  106.         float dy = upY - startY;
  107.         if (Math.abs(dy) > 20) {
  108.             if (!Constant.IS_REFRESH_ING) {
  109.                 if (dy > 0 && enableRefresh) {
  110.                     isRefresh = true;
  111.                     isLoad = false;
  112.                     dy = Math.min(mPullHeight * 2, dy);
  113.                     dy = Math.max(0, dy);
  114.                     translateHeader(dy);
  115.                 } else if (dy < 0 && enableLoadMore) {
  116.                     dy = Math.abs(dy);
  117.                     dy = Math.min(mPullHeight * 2, dy);
  118.                     dy = Math.max(0, dy);
  119.                     isRefresh = false;
  120.                     isLoad = true;
  121.                     translateFooter(dy);
  122.                 }
  123.             }
  124.         }
  125.     }
  126.  
  127.     private void onDrugEnd(DragInfo dragInfo) {
  128.         Point mPoint = dragInfo.updatePoint;
  129.         int endY = Math.round(mPoint.position[1]);
  130.         int dy = Math.abs(endY - startY);
  131.         if (dy > mPullHeight * 2) {
  132.             if (onCircleRefreshListener != null) {
  133.                 if (isRefresh && enableRefresh) {
  134.                     startRefresh();
  135.                     onCircleRefreshListener.refreshing();
  136.                 } else if (isLoad && enableLoadMore) {
  137.                     startLoad();
  138.                     onCircleRefreshListener.loading();
  139.                 }
  140.             }
  141.         } else {
  142.             if(endY > startY) {
  143.                 refreshComplete();
  144.             }else {
  145.                 loadComplete();
  146.             }
  147.         }
  148.     }
  149.  
  150.     private void startRefresh() {
  151.         LayoutConfig layoutConfig =
  152.                 (LayoutConfig) header.getLayoutConfig();
  153.         layoutConfig.height = (int) mHeaderHeight;
  154.         header.setLayoutConfig(layoutConfig);
  155.         header.invalidate();
  156.         mContentView.setTranslationY(mHeaderHeight);
  157.  
  158.         refreshAnim.start();
  159.         Constant.IS_REFRESH_ING = true;
  160.         Constant.IS_FINISH_REFRESH = false;
  161.     }
  162.  
  163.     private void startLoad() {
  164.         LayoutConfig layoutConfig =
  165.                 (LayoutConfig) footer.getLayoutConfig();
  166.         layoutConfig.height = (int) mHeaderHeight;
  167.         footer.setLayoutConfig(layoutConfig);
  168.         footer.invalidate();
  169.         mContentView.setTranslationY(-mHeaderHeight);
  170.  
  171.         loadAnim.start();
  172.         Constant.IS_REFRESH_ING = true;
  173.         Constant.IS_FINISH_REFRESH = false;
  174.     }
  175.  
  176.     public void refreshComplete() {
  177.         LogUtil.error("-----refreshComplete-----");
  178.         Constant.IS_REFRESH_ING = false;
  179.         Constant.IS_FINISH_REFRESH = true;
  180.         refreshAnim.stop();
  181.  
  182.         isRefresh = false;
  183.         isLoad = false;
  184.  
  185.         refreshClose.start();
  186.     }
  187.  
  188.     public void loadComplete() {
  189.         LogUtil.error("-----loadComplete-----");
  190.         Constant.IS_REFRESH_ING = false;
  191.         Constant.IS_FINISH_REFRESH = true;
  192.         loadAnim.stop();
  193.  
  194.         isRefresh = false;
  195.         isLoad = false;
  196.  
  197.         loadClose.start();
  198.     }
  199.  
  200.     private void addHeaderView() {
  201.         LogUtil.error("--------addHeaderView-----------");
  202.         header = LayoutScatter.getInstance(mContext)
  203.                 .parse(ResourceTable.Layout_refresh, null, false);
  204.         if(refreshBgColor!=0) {
  205.             ShapeElement element = new ShapeElement();
  206.             element.setRgbColor(RgbColor.fromArgbInt(refreshBgColor));
  207.             header.setBackground(element);
  208.         }
  209.         refreshImage = (Image) header.findComponentById(ResourceTable.Id_refresh);
  210.         if(rotateIcon != null) {
  211.             refreshImage.setImageElement(rotateIcon);
  212.         }else{
  213.             refreshImage.setImageAndDecodeBounds(ResourceTable.Media_refresh);
  214.         }
  215.         LayoutConfig config = new LayoutConfig();
  216.         config.width = MATCH_PARENT;
  217.         config.height = 0;
  218.         config.alignment = TOP;
  219.         super.addComponent(header, 1, config);
  220.         initHeadAmin();
  221.     }
  222.  
  223.     private void addFooter() {
  224.         LogUtil.error("--------addBottom-----------");
  225.         footer = LayoutScatter.getInstance(mContext)
  226.                 .parse(ResourceTable.Layout_load_more, null, false);
  227.  
  228.         if(refreshBgColor!=0) {
  229.             ShapeElement element = new ShapeElement();
  230.             element.setRgbColor(RgbColor.fromArgbInt(refreshBgColor));
  231.             footer.setBackground(element);
  232.         }
  233.         loadImage = (Image) footer.findComponentById(ResourceTable.Id_load);
  234.         if(rotateIcon != null) {
  235.             loadImage.setImageElement(rotateIcon);
  236.         }else{
  237.             loadImage.setImageAndDecodeBounds(ResourceTable.Media_refresh);
  238.         }
  239.         LayoutConfig config = new LayoutConfig();
  240.         config.alignment = BOTTOM;
  241.         config.width = MATCH_PARENT;
  242.         config.height = 0;
  243.         super.addComponent(footer, 2, config);
  244.         initLoadAmin();
  245.     }
  246.  
  247.     private AnimatorValue refreshAnim;
  248.     private AnimatorValue loadAnim;
  249.  
  250.     private AnimatorValue refreshClose;
  251.     private AnimatorValue loadClose;
  252.  
  253.     private void initHeadAmin() {
  254.         refreshAnim = new AnimatorValue();
  255.         refreshAnim.setDuration(1000);
  256.         refreshAnim.setLoopedCount(Animator.INFINITE);
  257.         refreshAnim.setCurveType(Animator.CurveType.LINEAR);
  258.         refreshAnim.setValueUpdateListener((animatorValue, v) -> {
  259.             refreshImage.setRotation(v * 360);
  260.         });
  261.  
  262.         refreshClose = new AnimatorValue();
  263.         refreshClose.setDuration(500);
  264.         refreshClose.setLoopedCount(0);
  265.         refreshClose.setCurveType(Animator.CurveType.LINEAR);
  266.         refreshClose.setValueUpdateListener(new AnimatorValue.ValueUpdateListener() {
  267.             @Override
  268.             public void onUpdate(AnimatorValue animatorValue, float v) {
  269. //                refreshImage.setRotation(v * 360);
  270.                 LayoutConfig layoutConfig =
  271.                         (LayoutConfig) header.getLayoutConfig();
  272.                 int height = layoutConfig.height;
  273.                 float rate = 1.0f - v;
  274.                 if (rate < 0.1) {
  275.                     rate = 0;
  276.                     refreshClose.stop();
  277.                 }
  278.                 int rateHeight = (int) (height * rate);
  279.                 layoutConfig.height = rateHeight;
  280.                 header.setLayoutConfig(layoutConfig);
  281.                 header.invalidate();
  282.                 mContentView.setTranslationY(rateHeight);
  283.             }
  284.  
  285.  
  286.         });
  287.  
  288.     }
  289.  
  290.     private void initLoadAmin() {
  291.         loadAnim = new AnimatorValue();
  292.         loadAnim.setDuration(1000);
  293.         loadAnim.setLoopedCount(Animator.INFINITE);
  294.         loadAnim.setCurveType(Animator.CurveType.LINEAR);
  295.         loadAnim.setValueUpdateListener(new AnimatorValue.ValueUpdateListener() {
  296.             @Override
  297.             public void onUpdate(AnimatorValue animatorValue, float v) {
  298.                 loadImage.setRotation(v * 360);
  299.             }
  300.         });
  301.  
  302.         loadClose = new AnimatorValue();
  303.         loadClose.setDuration(500);
  304.         loadClose.setLoopedCount(0);
  305.         loadClose.setCurveType(Animator.CurveType.LINEAR);
  306.         loadClose.setValueUpdateListener((animatorValue, v) -> {
  307. //                refreshImage.setRotation(v * 360);
  308.             LayoutConfig layoutConfig =
  309.                     (LayoutConfig) footer.getLayoutConfig();
  310.             int height = layoutConfig.height;
  311.             float rate = 1.0f - v;
  312.             if (rate < 0.1) {
  313.                 rate = 0;
  314.                 loadClose.stop();
  315.             }
  316.             int rateHeight = (int) (height * rate);
  317.             layoutConfig.height = rateHeight;
  318.             footer.setLayoutConfig(layoutConfig);
  319.             footer.invalidate();
  320.             mContentView.setTranslationY(-rateHeight);
  321.         });
  322.     }
  323.  
  324.     private void translateHeader(float dy) {
  325.         float offsetY = (dy / 2 / mPullHeight) * dy / 2;
  326.  
  327.         float rate = offsetY / mPullHeight;
  328.  
  329.         refreshImage.setRotation(rate * 360);
  330.  
  331.         LayoutConfig layoutConfig =
  332.                 (LayoutConfig) header.getLayoutConfig();
  333.         layoutConfig.height = (int) offsetY;
  334.  
  335. //        LogUtil.error("-------translateHeader------------>  " + offsetY);
  336. //        header.setHeight((int) offsetY);
  337.         header.setLayoutConfig(layoutConfig);
  338.         header.invalidate();
  339.  
  340.         mContentView.setTranslationY(offsetY);
  341.     }
  342.  
  343.     private void translateFooter(float dy) {
  344.  
  345. //        setTranslationY((dy / 2 / mPullHeight) * dy / 2);
  346.         float offsetY = (dy / 2 / mPullHeight) * dy / 2;
  347.  
  348.  
  349.         float rate = offsetY / mPullHeight;
  350.  
  351.         loadImage.setRotation(rate * 360);
  352.  
  353. //        LogUtil.error("-------translateFooter-------->  " + offsetY);
  354.         LayoutConfig layoutConfig =
  355.                 (LayoutConfig) footer.getLayoutConfig();
  356.         layoutConfig.height = (int) offsetY;
  357. //        header.setHeight((int) offsetY);
  358.         footer.setLayoutConfig(layoutConfig);
  359.         footer.invalidate();
  360.  
  361.         mContentView.setTranslationY(-offsetY);
  362.     }
  363.  
  364.     private OnRefreshListener onCircleRefreshListener;
  365.  
  366.     public void setOnRefreshListener(OnRefreshListener onCircleRefreshListener) {
  367.         this.onCircleRefreshListener = onCircleRefreshListener;
  368.     }
  369.  
  370.     @Override
  371.     public void onDragDown(Component component, DragInfo dragInfo) {
  372.         LogUtil.error("-----onDragDown-----");
  373.         startY = Math.round(dragInfo.downPoint.position[1]);
  374.     }
  375.  
  376.     @Override
  377.     public void onDragStart(Component component, DragInfo dragInfo) {
  378.         LogUtil.error("-----onDragStart-----");
  379.     }
  380.  
  381.     @Override
  382.     public void onDragUpdate(Component component, DragInfo dragInfo) {
  383.         onDrugUpdate(dragInfo);
  384.     }
  385.  
  386.     @Override
  387.     public void onDragEnd(Component component, DragInfo dragInfo) {
  388.         onDrugEnd(dragInfo);
  389.     }
  390.  
  391.     @Override
  392.     public void onDragCancel(Component component, DragInfo dragInfo) {
  393.         LogUtil.error("-----onDragCancel-----");
  394.     }
  395.  
  396.     public interface OnRefreshListener {
  397.         void loading();
  398.  
  399.         void refreshing();
  400.     }
  401.  
  402.  
  403.     public void setRefreshEnabled(boolean enabled){
  404.         this.enableRefresh = enabled;
  405.     }
  406.  
  407.     public void setLoadMoreEnabled(boolean enabled){
  408.         this.enableLoadMore = enabled;
  409.     }
  410.  
  411. }

Constant:

  1. package com.honglu.refreshlayout;
  2.  
  3. public class Constant {
  4.  
  5.     /**
  6.      * 是否正在刷新中
  7.      */
  8.     public static boolean IS_REFRESH_ING;
  9.  
  10.     /**
  11.      * 是否结束刷新
  12.      */
  13.     public static boolean IS_FINISH_REFRESH;
  14.  
  15.  
  16.  
  17. }

gitee地址：https://gitee.com/lylave/harmonyos-refreshlayout

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

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

  

闽ICP备14008679号