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

最新推荐文章于 2024-06-04 21:46:57 发布
最新推荐文章于 2024-06-04 21:46:57 发布
阅读量681 收藏 1
点赞数 3
分类专栏： 鸿蒙Harmony 文章标签： java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u014743890/article/details/118551098
版权

目录

一、设计思路

二、动手实现

一、设计思路

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

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

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

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

二、动手实现

1、新建类RefreshListContainer继承ComponentContainer

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

<?xml version="1.0" encoding="utf-8"?>
<DependentLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:background_element="$color:dialog_btn_gray_color"
    ohos:orientation="vertical"
    >

    <DependentLayout
        ohos:id="$+id:head_layout"
        ohos:height="match_content"
        ohos:width="match_parent"
        ohos:padding="10vp"
        >

        <Text
            ohos:id="$+id:head_text"
            ohos:height="match_content"
            ohos:width="match_content"
            ohos:center_in_parent="true"
            ohos:text="下拉刷新"
            ohos:text_size="17fp"
            />

        <Image
            ohos:id="$+id:head_image"
            ohos:height="40vp"
            ohos:width="40vp"
            ohos:image_src="$media:up_image"
            ohos:left_of="$+id:head_text"
            ohos:vertical_center="true"
            />
    </DependentLayout>

    <ListContainer
        ohos:id="$+id:list_container"
        ohos:height="match_parent"
        ohos:width="match_parent"
        ohos:background_element="white"
        ohos:below="$id:head_layout"
        />

    <DependentLayout
        ohos:id="$+id:foot_layout"
        ohos:height="70vp"
        ohos:width="match_parent"
        ohos:align_parent_bottom="true"
        ohos:padding="10vp"
        >

        <Text
            ohos:id="$+id:foot_text"
            ohos:height="match_content"
            ohos:width="match_content"
            ohos:center_in_parent="true"
            ohos:text="下拉刷新"
            ohos:text_size="17fp"
            />

        <Image
            ohos:id="$+id:foot_image"
            ohos:height="40vp"
            ohos:width="40vp"
            ohos:image_src="$media:up_image"
            ohos:left_of="$+id:foot_text"
            ohos:vertical_center="true"
            />
    </DependentLayout>
</DependentLayout>

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

private void init() {
    mRootLayout = (DependentLayout) LayoutScatter.getInstance(mContext)
            .parse(ResourceTable.Layout_refresh_layout, null, true);

    HiLog.error(LABEL, "init,rootLayout:%{public}s", mRootLayout);
    mHeadLayout = (DependentLayout) mRootLayout.findComponentById(ResourceTable.Id_head_layout);
    mFootLayout = (DependentLayout) mRootLayout.findComponentById(ResourceTable.Id_foot_layout);
    mListContainer = (ListContainer) mRootLayout.findComponentById(ResourceTable.Id_list_container);

    mHeadImage = (Image) mRootLayout.findComponentById(ResourceTable.Id_head_image);
    mHeadText = (Text) mRootLayout.findComponentById(ResourceTable.Id_head_text);
    mFootImage = (Image) mRootLayout.findComponentById(ResourceTable.Id_foot_image);
    mFootText = (Text) mRootLayout.findComponentById(ResourceTable.Id_foot_text);

    addComponent(mRootLayout);
}

4、设置监听事件

mRootLayout.setTouchEventListener(this::onTouchEvent);
@Override
public boolean onTouchEvent(Component component, TouchEvent touchEvent) {
    int action = touchEvent.getAction();
    MmiPoint point = touchEvent.getPointerPosition(touchEvent.getIndex());
    HiLog.error(LABEL, "action:%{public}s", action);
    switch (action) {
        case TouchEvent.PRIMARY_POINT_DOWN:
            HiLog.error(LABEL, "onTouchEvent:%{public}s", "PRIMARY_POINT_DOWN");

            mStartY = point.getY();
            break;
        case TouchEvent.PRIMARY_POINT_UP:
            HiLog.error(LABEL, "onTouchEvent:%{public}s", "PRIMARY_POINT_UP");
            HiLog.error(LABEL, "isPull:%{public}s", isPull);
            if (isPull) {
                int dis = (int) (mEndY - mStartY);
                HiLog.error(LABEL, "dis:%{public}s", dis);
                mHeadLayout.setMarginTop(0);
                pullLoadingStatus();
                isPull = false;
                if (this.mRefreshListener != null) {
                    this.mRefreshListener.pullRefresh();
                }
                mListContainer.setEnabled(true);
                // isLoading = true;
            }

            if (isUp) {
                int dis = (int) (mStartY - mEndY);
                HiLog.error(LABEL, "dis:%{public}s", dis);
                mFootLayout.setMarginBottom(0);
                HiLog.error(LABEL, "mFootLayoutHeight:%{public}s", mFootLayoutHeight);
                mListContainer.setMarginBottom(mFootLayoutHeight);
                this.mBaseItemProvider.notifyDataSetItemInserted(mBaseItemProvider.getCount()-1);
                upLoadingStatus();
                isUp = false;
                if (this.mRefreshListener != null) {
                    this.mRefreshListener.upLoadingMore();
                }
                mListContainer.setEnabled(true);
            }
            break;
        case TouchEvent.POINT_MOVE:
            HiLog.error(LABEL, "onTouchEvent:%{public}s", "HOVER_POINTER_MOVE");
            mEndY = point.getY();
            HiLog.error(LABEL, "onTouchEvent,mEndY:%{public}s,mStartY:%{public}s", mEndY, mStartY);
            HiLog.error(LABEL, "mListContainer.canScroll(DRAG_UP):%{public}s", mListContainer.canScroll(DRAG_UP));

            HiLog.error(LABEL, "isSocllTop:%{public}s", isSocllTop);
            if (!isLoading) {
                if (isSocllTop && !isUp) {
                    if (mEndY - mStartY > 50) {
                        isPull = true;
                        if (pullAnimator != null) {
                            pullAnimator.stop();
                            mHeadImage.setRotation(0);
                        }
                        mHeadLayout.setVisibility(VISIBLE);
                        mHeadLayout.setMarginTop((int) (mEndY - mStartY) - 50);
                        if (mEndY - mStartY > 50 && mEndY - mStartY < 150) {
                            pullDefault();
                        } else {
                            pullStatus();
                        }
                        mListContainer.setEnabled(false);
                    }
                }
                if (!mListContainer.canScroll(DRAG_UP) && !isPull) {
                    if (mStartY - mEndY > 50) {
                        isUp = true;
                        if (upAnimator != null) {
                            upAnimator.stop();
                            mFootImage.setRotation(0);
                        }

                        HiLog.error(LABEL, "mStartY - mEndY:%{public}s", mStartY - mEndY);
                        mFootLayout.setVisibility(VISIBLE);
                        int des = (int) (mStartY - mEndY) - 50;
                        mListContainer.setMarginBottom(mFootLayoutHeight + des);
                        mFootLayout.setMarginBottom(des);
                        HiLog.error(LABEL, "mFootLayoutHeight:%{public}s", mFootLayoutHeight);
                        this.mBaseItemProvider.notifyDataSetItemInserted(mBaseItemProvider.getCount()-1);
                        if (mStartY - mEndY > 50 && mStartY - mEndY < 150) {
                            upDefault();
                        } else {
                            upStatus();
                        }
                      //  mListContainer.setEnabled(true);
                    }
                }
            }

            break;
        default:
    }
    return true;
}

5、新建回调事件

package com.yan.refreshlistcontainer.listener;

public interface RefreshListener {

    public void pullRefresh();

    public void upLoadingMore();
}

6.提供方法供外部调用

//下拉刷新和上啦加载更多完成时调用
public void completeLoading() {
    if (pullAnimator != null) {
        pullAnimator.stop();

    }
    mHeadLayout.setVisibility(HIDE);
    pullDefault();

    if (upAnimator != null) {
        upAnimator.stop();
    }
    mFootLayout.setVisibility(HIDE);
    mListContainer.setMarginBottom(0);
    upDefault();
}

//给ListContainer设置适配器
public void setItemProvider(BaseItemProvider baseItemProvider) {
    this.mBaseItemProvider = baseItemProvider;
    mListContainer.setItemProvider(this.mBaseItemProvider);

}
//设置上啦和下拉的监听事件
public void setRefreshListener(RefreshListener refreshListener) {
    this.mRefreshListener = refreshListener;
}

7、ability使用

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:alignment="center"
    ohos:orientation="vertical">

   <com.yan.refreshlistcontainer.component.RefreshListContainer
       ohos:id="$+id:refresh_list"
       ohos:height="match_parent"
       ohos:width="match_parent"/>

</DirectionalLayout>
package com.yan.refreshlistcontainer.slice;

import com.yan.refreshlistcontainer.ResourceTable;
import com.yan.refreshlistcontainer.bean.ListBean;
import com.yan.refreshlistcontainer.component.RefreshListContainer;
import com.yan.refreshlistcontainer.listener.RefreshListener;
import com.yan.refreshlistcontainer.provider.RefreshListProvider;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.eventhandler.EventHandler;
import ohos.eventhandler.EventRunner;
import ohos.eventhandler.InnerEvent;

import java.util.ArrayList;
import java.util.List;

public class MainAbilitySlice extends AbilitySlice {
    private RefreshListContainer mRefreshList;
    private List<ListBean> mData = new ArrayList<>();
    private MyEventHandler myHandler;
    private RefreshListProvider refreshListProvider;

    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_ability_main);
        mRefreshList = (RefreshListContainer) findComponentById(ResourceTable.Id_refresh_list);

        initList();
        EventRunner runner = EventRunner.create(true);
        myHandler = new MyEventHandler(runner);

        refreshListProvider = new RefreshListProvider(MainAbilitySlice.this, mData);
        mRefreshList.setItemProvider(refreshListProvider);
        mRefreshList.setRefreshListener(new RefreshListener() {
            @Override
            public void pullRefresh() {
                ListBean mListBean = new ListBean();
                mListBean.setAge(999);
                mListBean.setName("刷新新增Item");
                mData.add(0, mListBean);
                myHandler.sendEvent(1000, 3000);
            }

            @Override
            public void upLoadingMore() {
                ListBean mListBean = new ListBean();
                mListBean.setAge(999);
                mListBean.setName("加载更多新增Item");
                mData.add(mListBean);
                myHandler.sendEvent(1000, 3000);
            }
        });
    }

    private class MyEventHandler extends EventHandler {
        private MyEventHandler(EventRunner runner) {
            super(runner);
        }

        // 重写实现processEvent方法
        @Override
        public void processEvent(InnerEvent event) {
            super.processEvent(event);
            if (event == null) {
                return;
            }
            int eventId = event.eventId;

            switch (eventId) {
                case 1000:
                    getUITaskDispatcher().syncDispatch(new Runnable() {
                        @Override
                        public void run() {
                            refreshListProvider.notifyDataChanged();
                            mRefreshList.completeLoading();
                        }
                    });

                    break;

                default:
                    break;
            }
        }
    }

    private void initList() {
        for (int i = 0; i < 100; i++) {
            ListBean mListBean = new ListBean();
            mListBean.setAge(i);
            mListBean.setName("测试" + i);
            mData.add(mListBean);
        }
    }

    @Override
    public void onActive() {
        super.onActive();
    }

    @Override
    public void onForeground(Intent intent) {
        super.onForeground(intent);
    }
}

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

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

Wang丶Yan
关注
  • 3
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
【Flutter】Flutter 使用 pull_to_refresh 实现下拉刷新和上拉加载
Code Metaverse
09-11 1772
`pull_to_refresh` 是一个为 Flutter 滚动组件提供的下拉刷新和上拉加载的小部件。它支持 Android 和 iOS 平台。这个包提供了几乎所有的滚动小部件，如 GridView、ListView 等。它还提供了默认的指示器和属性的全局设置，支持 Android 和 iOS 默认的 ScrollPhysics，可以控制 overScroll 距离，自定义弹簧动画、阻尼、速度等。
如何安装鸿蒙Harmony 低版API 9 三方库
欢迎加入Android老司机学院 482266514（技术交流群）密码CSDN
11-30 1190
然后查看pulltorefresh 最新版对应Harmony API10,然而我的手机是API9,所以必须找到API9的库，然后查看2.0.1是还是API9。执行后发现无需卸载新版，直接覆盖，运行项目没问题了。然后运行报错,说没有isAtEnd方法。比如我要用下拉刷新三方库。
鸿蒙开发 - ohpm安装第三方库
SSY_1992的博客
12-12 5616
前端开发难免使用第三方库，鸿蒙亦是如此，在使用 DevEco Studio 开发工具时，如何引入第三方库呢？
纯血鸿蒙实战开发—如何添加下拉刷新组件PullToRefresh
最新发布
m0_70749039的博客
06-04 646
【OpenHarmony多媒体技术、Stage模型、ArkUI多端部署、分布式应用开发、音频、视频、WebGL、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战】等技术知识点。
HarmonyOS 实现上拉加载下拉刷新 使用插件 PullToRefresh 引用报错 ERROR: The compatibleSdkVersion 9 cannot be smaller 已解决
qq_30675311的博客
04-18 935
@ohos/pulltorefresh > hvigor ERROR: Failed :entry:default@MergeProfile... > hvigor ERROR: The compatibleSdkVersion 9 cannot be smaller than version 10 declared in library [:library] as the library might be using APIS not available in 9
OpenHarmony环境下可用的下拉刷新、上拉加载组件【PullToRefresh】
m0_71263309的博客
04-18 1212
PullToRefresh是一款OpenHarmony环境下可用的下拉刷新、上拉加载组件。支持设置内置动画的各种属性，支持设置自定义动画，支持lazyForEarch的数据作为数据源。
HarmonyOS NEXT下拉刷新与上滑加载案例_鸿蒙系统怎么制作下拉页面等待加载(1)
2301_79054215的博客
04-09 860
有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，最终浪费大量时间。所以有一份实用的鸿蒙（HarmonyOS NEXT）资料用来跟着学习是非常有必要的。这份鸿蒙（HarmonyOS NEXT）资料包含了鸿蒙开发必掌握的核心知识要点，内容包含了。
鸿蒙api11 下拉刷新和加载更多demo
02-29
在鸿蒙OS开发中，API 11引入了许多新特性，其中包括对下拉刷新和加载更多的支持。这对于构建用户友好的界面至关重要，因为这样的交互模式让用户可以轻松地获取新的数据或更新现有内容。本示例"鸿蒙api11 下拉刷新和...
HarmonyOsRefresh是一个鸿蒙版的刷新组件，超简单使用，支持下拉刷新和上拉加载.zip
02-07
HarmonyOsRefresh是专为鸿蒙系统设计的一个刷新组件，它使得在鸿蒙应用中实现下拉刷新和上拉加载功能变得极其简单。本文将深入探讨HarmonyOsRefresh的核心特点、使用方法以及它如何助力鸿蒙应用开发。 1. **...
HarmonyOS应用开发-下拉刷新实现.docx
04-22
HarmonyOS 应用开发 - 下拉刷新实现 HarmonyOS 是华为自研的操作系统，具有轻便、灵活、安全的特点。下拉刷新是移动应用程序中常用的交互方式，本文将介绍 HarmonyOS 应用开发中下拉刷新的实现。 创建项目 要实现...
HarmonyOS平台上一些好看的加载动画集合
01-02
在 HarmonyOS 平台上，开发应用时为了提升用户体验，加载动画是不可或缺的一部分。"HarmonyOS平台上一些好看的加载动画集合" 提供了丰富的加载动画资源，适用于各种场景，旨在为用户展示美观、流畅的等待界面，同时...
HarmonyOS基础组件使用
11-02
HarmonyOS基础组件使用
开源项目PullToRefresh详解（一）——PullToRefreshListView
weixin_34007291的博客
10-14 389
   开源项地址：https://github.com/chrisbanes/Android-PullToRefresh 下拉刷新这个功能我们都比较常见了，今天介绍的就是这个功能的实现。我将按照这个开源库的范例来一点一点介绍，今天是介绍比较常见的PullToRefreshListView，是让listView有下拉刷新功能。 1.下载项目包，将library包导入即可，其他的包暂时不用 2...
鸿蒙实战开发教程-如何实现上拉加载和下拉刷新
m0_70749039的博客
05-08 1194
本文介绍的是一个优秀的第三方库PullToRefresh，并使用它实现列表的上拉加载和下拉刷新。
安卓开发笔记——关于开源组件PullToRefresh实现下拉刷新和上拉加载（一分钟搞定，超级简单）...
weixin_34323858的博客
04-24 117
前言 　　以前在实现ListView下拉刷新和上拉加载数据的时候都是去继承原生的ListView重写它的一些方法，实现起来非常繁杂，需要我们自己去给ListView定制下拉刷新和上拉加载的布局文件，然后添加ScrollView和OnTouch监听，设置回调接口获取数据，为了更好的交互体验，我们还不能直接利用setVisibility隐藏显示布局等等一大堆的操作，累都累死了。（题外话：关于下拉刷新...
鸿蒙OS下拉刷新及上拉加载harmonyos-refreshlayout
zz410674802的博客
07-06 1598
鸿蒙os2发布后，为了跟上节奏，对鸿蒙java-sdk进行了初步的学习。并尝试用鸿蒙os-sdk进行公司app的开发，但是发现鸿蒙组件库及开源组件库还是在初步开发阶段。很多组件可能需要自己进行开发。 附上鸿蒙开源库地址：https://gitee.com/openharmony-tpc 在这里找到了一些下拉刷新的组件，但是经过测试都有一些bug，或者是不满足自己的需求。于是参考了一下他们的代码进行了修改。 最后附上gitee地址 上代码： package com.honglu.refresh
学习鸿蒙api9 grid需要实现上拉加载更多功能
u011345545的专栏
11-29 242
这样就可以使用 list 的 onReachEnd 或者 onScrollIndex 这俩其中一个监听就可以。抛弃grid，使用list的。属性 实现grid效果。
HarmonyOS NEXT应用开发之下拉刷新与上滑加载案例_harmonyos arkts pull-to-refresh
2401_83946826的博客
04-09 1045
本示例介绍使用第三方库的PullToRefresh组件实现列表的下拉刷新数据和上滑加载后续数据。
HarmonyOS应用开发模拟测验：基础知识与组件理解
本资源是一份针对HCIA-HarmonyOS应用开发工程师V2.0的...这些题目涵盖了HarmonyOS的页面管理、组件用法、分布式通信、权限管理、用户交互、开发工具和系统特性等多个方面，对理解和应用HarmonyOS技术有较高的参考价值。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值