鸿蒙系统如何设置自定义下拉刷新控件

描述

Ohos-MaterialRefreshLayout 是一个自定义 Material 风格下拉刷新控件,支持设置水波纹效果,支持下拉刷新侵入式和非侵入式,初始化自动刷新及上滑加载更多,支持刷新头部自定义图案,上拉加载更多等。

该控件一般配合 ListContainer 使用,因涉及事件分发操作,本库中使用了三方控件 NestedListContainer、事件分发等方便处理事件拦截分发事件。

自定义控件结构

MaterialRefreshLayout 控件,首先初始化设置头部、脚部布局,在手势下滑时显示头部布局,动态设置头部高度,展示下拉刷新效果,在页面底部向上滑动时显示脚部布局,展示上拉加载更多效果,松手时图形即开始旋转动画。

下拉圆形转动风格 MaterialRefreshLayout:

MaterialRefreshLayout 包含自定义头部布局 MaterialHeaderView 和脚部布局 MaterialFooterView。

头部 MaterialHeaderView 包含圆形转动条 CircleProgressBar 和下拉波纹 MaterialWaveView。

脚部布局 MaterialFooterView 同头部结构一致,包含圆形转动条 CircleProgressBar 和下拉波纹 MaterialWaveView。

CircleProgressBar 包含有自定义图形的 MaterialProgressDrawable,设置圆形的转动图案。

下拉自定义笑脸风格 MaterialRefreshLayout:

MaterialRefreshLayout 包含 SunLayout 头部布局和脚部布局 MaterialFooterView。

SunLayout 头部包含滚动短线 SunLineView 和笑脸 SunFaceView。

当有手势下滑时,自定义短线 SunLineView,开始旋转动画,监听刷新动作,在 onSizeChanged 中动态改变图形大小。

当手势向下滑动时,自定义笑脸图形 SunFaceView,监听刷新动作,在 onSizeChanged 中动态改变图形大小。

代码实现解读

首先在拦截事件中根据手指的滑动距离,设置自定义头部布局 MaterialHeaderView 可见,底部向上滑动时,当滑到页面底部,设置脚部布局 MaterialFooterView 可见。

①事件分发 onInterceptTouchEvent 中设置头、脚布局可见

在拦截事件 onInterceptTouchEvent 中,手指移动 TouchEvent.POINT_MOVE 时,根据滑动距离及是否是在头部的滑动。

设置头部自定义 headerview 是否显示,再根据向上滑动距离是否小于 0 及是否滑动到底部加载底部 footerview。

代码如下:

case TouchEvent.POINT_MOVE:

float currentY = ev.getPointerPosition(0).getY();

Float dy= new BigDecimal(currentY).subtract(new BigDecimal(mTouchY)).floatValue();

if (dy 》 0 && !canChildScrollUp()) {

if (mMaterialHeaderView != null) {

mMaterialHeaderView.setVisibility(Component.VISIBLE);

mMaterialHeaderView.onBegin(this);

} else if (mSunLayout != null) {

mSunLayout.setVisibility(Component.VISIBLE);

mSunLayout.onBegin(this);

}

return true;

} else if (dy 《 0 && !canChildScrollDown() && isLoadMore) {

if (mMaterialFooterView != null && !isLoadMoreing) {

soveLoadMoreLogic();

}

return false;

}

break;

上一步完成后,紧接着就是在触摸事件中动态设置头部布局高度,水波纹高度,滑到最大距离时,设置为控件本身高度。

②事件触摸 onTouchEvent 中设置高度

在触摸事件 onTouchEvent 中,当手指下滑,onTouchEvent 中设置头部自定义 headerview 的高度,随着下滑距离增加,动态设置水波纹高度,当头部为侵入式时,设置 component 向下平移。

代码如下:

case TouchEvent.POINT_MOVE:

mCurrentY = e.getPointerPosition(0).getY();

float dy = new BigDecimal(mCurrentY).subtract(new BigDecimal(mTouchY)).floatValue();

dy = Math.min(mWaveHeight * 2, dy);

dy = Math.max(0, dy);

if (mChildView != null) {

float offsetY = dy / 2;

float fraction = offsetY / mHeadHeight;

if (mMaterialHeaderView != null) {

mMaterialHeaderView.setHeight((int) offsetY);

mMaterialHeaderView.postLayout();

mMaterialHeaderView.onPull(this, fraction);

} else if (mSunLayout != null) {

mSunLayout.setHeight((int) offsetY);

mSunLayout.postLayout();

mSunLayout.startSunLineAnim(this);

mSunLayout.onPull(this, fraction);

}

if (!isOverlay)

mChildView.setTranslationY(offsetY);

}

在松手时,监听抬起事件 TouchEvent.PRIMARY_POINT_UP,当头部 headerview 高度大于原有高度时,将头部设置为刷新中状态。

代码如下:

if (mMaterialHeaderView.getLayoutConfig().height 》 mHeadHeight) {

updateListener();

mMaterialHeaderView.setHeight((int) mHeadHeight);

mMaterialHeaderView.postLayout();

}

再接下来就是完成自定义头部控件的布局,并在下拉接口方法中设置下拉时的缩放,透明度等状态。

③自定义头部 MaterialHeaderView

自定义 MaterialHeaderView 由 MaterialWaveView 和 CircleProgressBar 两个自定义 Component 组合成,实现 MaterialHeadListener 接口。

onBegin 方法中设置 materialWaveView 的起始状态,circleProgressBar 缩放大小,透明度等。

代码如下:

@Overridepublic void onBegin(MaterialRefreshLayout materialRefreshLayout) {

if (materialWaveView != null) {

materialWaveView.onBegin(materialRefreshLayout);

}

if (circleProgressBar != null) {

circleProgressBar.setScaleX(0.001f);

circleProgressBar.setScaleY(0.001f);

circleProgressBar.onBegin(materialRefreshLayout);

}

}

onPull 方法中设置 materialWaveView 的下拉状态,circleProgressBar 缩放大小,透明度等。

代码如下:

@Overridepublic void onPull(MaterialRefreshLayout materialRefreshLayout, float fraction) {

if (materialWaveView != null) {

materialWaveView.onPull(materialRefreshLayout, fraction);

}

if (circleProgressBar != null) {

circleProgressBar.onPull(materialRefreshLayout, fraction);

float a = Util.limitValue(1, fraction);

circleProgressBar.setScaleX(a);

circleProgressBar.setScaleY(a);

circleProgressBar.setAlpha(a);

}

}

设置刷新中 onRefreshing 状态。代码如下:

@Overridepublic void onRefreshing(MaterialRefreshLayout materialRefreshLayout) {

if (materialWaveView != null) {

materialWaveView.onRefreshing(materialRefreshLayout);

}

if (circleProgressBar != null) {

circleProgressBar.onRefreshing(materialRefreshLayout);

}

}

onComlete 刷新完成后自定义 Component 的状态初始化,代码如下:

@Override

public void onComlete(MaterialRefreshLayout materialRefreshLayout) {

if (materialWaveView != null) {

materialWaveView.onComlete(materialRefreshLayout);

}

if (circleProgressBar != null) {

circleProgressBar.onComlete(materialRefreshLayout);

circleProgressBar.setTranslationY(0);

circleProgressBar.setScaleX(0);

circleProgressBar.setScaleY(0);

}

}

头部布局完成后,接下来就是实现自定义脚部布局实现。

④自定义脚部 MaterialFooterView

自定义 MaterialFooterView 由 MaterialWaveView 和 CircleProgressBar 两个自定义 Component 组合成,实现 MaterialHeadListener 接口。基本同 MaterialHeaderView 一致,接口实现方法设置内容相同。

onBegin 方法中设置 materialWaveView 的起始状态,circleProgressBar 缩放 1,透明度等。

代码如下:

@Overridepublic void onBegin(MaterialRefreshLayout materialRefreshLayout) {

if (materialWaveView != null) {

materialWaveView.onBegin(materialRefreshLayout);

}

if (circleProgressBar != null) {

circleProgressBar.onBegin(materialRefreshLayout);

circleProgressBar.setScaleX(1);

circleProgressBar.setScaleY(1);

}

}

onPull 方法中设置 materialWaveView 的下拉状态,circleProgressBar 缩放 1,透明度等。

代码如下:

@Overridepublic void onPull(MaterialRefreshLayout materialRefreshLayout, float fraction) {

if (materialWaveView != null) {

materialWaveView.onPull(materialRefreshLayout, fraction);

}

if (circleProgressBar != null) {

circleProgressBar.onPull(materialRefreshLayout, fraction);

float a = Util.limitValue(1, fraction);

circleProgressBar.setScaleX(1);

circleProgressBar.setScaleY(1);

circleProgressBar.setAlpha(a);

}

}

设置刷新中 onRefreshing 状态。代码如下:

@Overridepublic void onRefreshing(MaterialRefreshLayout materialRefreshLayout) {

if (materialWaveView != null) {

materialWaveView.onRefreshing(materialRefreshLayout);

}

if (circleProgressBar != null) {

circleProgressBar.onRefreshing(materialRefreshLayout);

}

}

onComlete 刷新完成后自定义 Component 的状态初始化,代码如下:

@Overridepublic void onComlete(MaterialRefreshLayout materialRefreshLayout) {

if (materialWaveView != null) {

materialWaveView.onComlete(materialRefreshLayout);

}

if (circleProgressBar != null) {

circleProgressBar.onComlete(materialRefreshLayout);

circleProgressBar.setTranslationY(0);

circleProgressBar.setScaleX(0);

circleProgressBar.setScaleY(0);

}

}

头部、脚部布局都完成后,就开始要完成头部和脚部布局里面的自定义组件,首先从头部布局中的自定义组件开始。

前面讲到头部由圆形转动条 CircleProgressBar 和下拉波纹 MaterialWaveView 组成,先开始绘制波浪纹 MaterialWaveView,实现 MaterialHeadListener 接口,接口回调中设置组件的状态。

⑤自定义 MaterialWaveView

初始化画笔设置,添加 addDrawTask 任务,onDraw 方法中绘制下拉区域图形,并填充颜色。

代码如下:

@Overridepublic void onDraw(Component component, Canvas canvas) {

path.reset();

paint.setColor(new Color(color));

path.lineTo(0, headHeight);

path.quadTo(getEstimatedWidth() / (float) 2, headHeight + waveHeight, getEstimatedWidth(), headHeight);

path.lineTo(getEstimatedWidth(), 0);

canvas.drawPath(path, paint);

}

实现 MaterialHeadListener 接口,监听各下拉方法的回调,当有下拉的情形时,改变下拉区域状态。下拉时在 onPull 中,设置下拉区域 header 高度及 wave 高度。

刷新中 onRefreshing,加载数值动画并动态改变 wave 高度。结束 onComlete 中,加载数值动画动态改变 head 的高度。代码如下:

下拉时:

@Overridepublic void onPull(MaterialRefreshLayout br, float fraction) {

setHeadHeight((int) (Util.dip2px(getContext(), DefaulHeadHeight) * Util.limitValue(1, fraction)));

setWaveHeight((int) (Util.dip2px(getContext(), DefaulWaveHeight) * Math.max(0, new BigDecimal(fraction).subtract(new BigDecimal(1)).floatValue())));

invalidate();

}

刷新时:

@Override

public void onRefreshing(MaterialRefreshLayout br) {

setHeadHeight((int) (Util.dip2px(getContext(), DefaulHeadHeight)));

int waveHeight = getWaveHeight();

AnimatorValue animator = new AnimatorValue();

animator.setValueUpdateListener(new AnimatorValue.ValueUpdateListener() {

@Override

public void onUpdate(AnimatorValue animatorValue, float value) {

setWaveHeight(getIntValue((1 - (double) value) * waveHeight));

invalidate();

}

});

animator.setCurveType(Animator.CurveType.BOUNCE);

animator.setDuration(200);

animator.start();

}

结束时:

@Override

public void onComlete(MaterialRefreshLayout br) {

waveHeight = 0;

AnimatorValue animator = new AnimatorValue();

animator.setDuration(200);

animator.setValueUpdateListener(new AnimatorValue.ValueUpdateListener() {

@Override

public void onUpdate(AnimatorValue animatorValue, float value) {

headHeight = getIntValue((1 - (double) value) * headHeight);

invalidate();

}

});

animator.start();

}

上一步完成后接下来开始实现头部圆形转动的 CircleProgressBar,并设置图案的自定义 ShapeElement 图形,配合手势操作,下拉时设置图形动态大小,松手时旋转刷新。

⑥自定义 CircleProgressBar

自定义圆形转动 CircleProgressBar,设置自定义背景 MaterialProgressDrawable,实现 MaterialHeadListener 接口。

根据下拉状态设置圆形 MaterialProgressDrawable 旋转角度,释放手势时开始动画,结束后停止旋转并初始化状态等。

代码如下:

@Overridepublic void onPull(MaterialRefreshLayout materialRefreshLayout, float fraction) {

if (mProgressDrawable != null)

mProgressDrawable.setProgressRotation(fraction);

invalidate();

}

@OverridePublic void onRefreshing(MaterialRefreshLayout materialRefreshLayout) {

if (mProgressDrawable != null) {

mProgressDrawable.onStart();

}

}

@Overridepublic void onComlete(MaterialRefreshLayout materialRefreshLayout) {

if (mProgressDrawable != null) {

mProgressDrawable.onStop();

}

setVisibility(Component.INVISIBLE);

}

自定义 MaterialProgressDrawable 设置 CircleProgressBar 的背景,首先构造方法中初始化圆形 Ring 和旋转动画,设置画笔颜色,宽度,大小,在 drawToCanvas 中绘制圆形 Ring。

当有手势操作时调用 onStart 方法中的旋转动画,开始旋转。在 Ring 类 draw 方法中,根据起始旋转角度绘制圆形圈圈及三角箭头。

代码如下:

public void draw(Canvas c, Rect bounds) {

final RectFloat arcBounds = mTempBounds;

arcBounds.modify(bounds);

arcBounds.left = new BigDecimal(arcBounds.left).add(new BigDecimal(mStrokeInset)).floatValue();

arcBounds.top = new BigDecimal(arcBounds.top).add(new BigDecimal(mStrokeInset)).floatValue();

arcBounds.right = new BigDecimal(arcBounds.right).subtract(new BigDecimal(mStrokeInset)).floatValue();

arcBounds.bottom = new BigDecimal(arcBounds.bottom).subtract(new BigDecimal(mStrokeInset)).floatValue();

final float startAngle = new BigDecimal(mStartTrim).add(new BigDecimal(mRotation)).floatValue() * 360;

final float endAngle = new BigDecimal(mEndTrim).add(new BigDecimal(mRotation)).floatValue() * 360;

float sweepAngle = new BigDecimal(endAngle).subtract(new BigDecimal(startAngle)).floatValue();

mPaint.setColor(Color.RED);

c.drawArc(arcBounds, new Arc(startAngle, sweepAngle, false), mPaint);

drawTriangle(c, startAngle, sweepAngle, bounds);

if (mAlpha 《 255) {

mCirclePaint.setColor(new Color(mBackgroundColor));

mCirclePaint.setAlpha(255 - mAlpha);

c.drawCircle(bounds.getCenterX(), bounds.getCenterY(), bounds.getWidth() / (float) 2,

mCirclePaint);

}

}

上述基本上就完成了 Material 风格下拉刷新带水波纹,带转动 progressbar 的实现步骤,紧接着讲一讲下拉自定义笑脸的另外一种刷新风格,实际上就是重新定义了刷新头部的图形,在这里也可以自己尝试替换成其它不同的图形。

⑦自定义头部 SunLayout 布局

自定义头部 SunLayout 由 SunFaceView 和 SunLineView 组成,SunFaceView 为自定义笑脸,SunLineView 为自定义笑脸周围短线。

SunLayout 实现了 MaterialHeadListener 接口,开始状态 onBegin 时缩放从零到有,下拉 onPull 时,设置 SunView 和 LineView 的大小,缩放等。代码如下:

开始时:

@Override

public void onBegin(MaterialRefreshLayout materialRefreshLayout) {

setScaleX(0.001f);

setScaleY(0.001f);

}

下拉时:

@Overridepublic void onPull(MaterialRefreshLayout materialRefreshLayout, float fraction) {

float a = Util.limitValue(1, fraction);

if (a 》= 0.7) {

mLineView.setVisibility(VISIBLE);

} else {

mLineView.setVisibility(HIDE);

}

mSunView.setPerView(mSunRadius, a);

mLineView.setLineWidth(mLineWidth);

setScaleX(a);

setScaleY(a);

setAlpha(a);

}

自定义笑脸 SunFaceView,自定义短线 SunLineView。

SunLineView 继承 Component 实现 Component.DrawTask, Component.EstimateSizeListener 接口,构造方法中初始化 Paint,onEstimateSize 中测量宽高,onDraw 中绘制线条。代码如下:

测量时:

@Overridepublic boolean onEstimateSize(int widthMeasureSpec, int heightMeasureSpec) {

HiLog.info(Contants.LABEL, “onMeasure”);

int widthMode = EstimateSpec.getMode(widthMeasureSpec);

int widthSize = EstimateSpec.getSize(widthMeasureSpec);

int heightMode = EstimateSpec.getMode(heightMeasureSpec);

int heightSize = EstimateSpec.getSize(heightMeasureSpec);

int width;

int height;

if (widthMode == EstimateSpec.PRECISE) {

width = widthSize;

} else {

width = (mSunRadius + mFixLineHeight + mLineHeight) * 2 + getPaddingRight() + getPaddingLeft();

}

if (heightMode == EstimateSpec.PRECISE) {

height = heightSize;

} else {

height = (mSunRadius + mFixLineHeight + mLineHeight) * 2 + getPaddingTop() + getPaddingBottom();

}

setEstimatedSize(width, height);

mWidth = width;

mHeight = height;

return false;

}

画线条:

private void drawLines(Canvas canvas) {

for (int i = 0; i 《= 360; i++) {

if (i % mLineLevel == 0) {

mLineLeft = mWidth / 2 - mLineWidth / 2;

mLineTop = mHeight / 2 - mSunRadius - mFixLineHeight;

mLineBottom = mLineTop + mLineHeight;

}

canvas.save();

canvas.rotate(i, mWidth / (float) 2, mHeight / (float) 2);

canvas.drawLine(mLineLeft, mLineTop, mLineLeft, mLineBottom, mLinePaint);

canvas.restore();

}

}

代码参考:

https://gitee.com/chinasoft5_ohos/Ohos-MaterialRefreshLayout

作者:卢经纬

责任编辑:haq

打开APP阅读更多精彩内容
声明:本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人,不代表电子发烧友网立场。文章及其配图仅供工程师学习之用,如有内容侵权或者其他违规问题,请联系本站处理。 举报投诉

全部0条评论

快来发表一下你的评论吧 !

×
20
完善资料,
赚取积分