关于PtrFrameLayout自定义header的一些探索

最新推荐文章于 2022-06-12 22:35:26 发布

置顶 javaer19891230

最新推荐文章于 2022-06-12 22:35:26 发布

阅读量5k

点赞数 2

分类专栏： android View 文章标签： Android 自定义View 下拉刷新自定义header

本文链接：https://blog.csdn.net/yankebin/article/details/53782457

版权

android View 专栏收录该内容

12 篇文章 1 订阅

订阅专栏

先上效果图吧，项目需求是这样一个效果，类似uc浏览器的下拉刷新，当然，我这个要差得多。。。

这里写图片描述

大概的效果就是：

1.下拉的时候画一个带点的圆弧，根据下拉距离渐进闭合；
2.当拉倒可以刷新的距离后，放手刷新，再画一个带点的圆弧旋转；
3.刷新完成后，画一个渐进闭合的圆；
4.最后，画一个钩，然后关闭header。

在实现的过程中有两个地方比较难办，一个是打钩的过程，另一个是header驻留一下才收起。

对于打钩的过程，我试过贝塞尔曲线，但是三阶的我没尝试过，二阶贝塞尔画出来的钩是带弧度的，就不是直角，我也尝试过path，可能是由于打钩的拐点没计算好，导致钩不是很平滑，后来才选择了用直线拐点的方式，这是借用的这个项目 android打钩画叉，非常感谢。有需要的童鞋请自行传送过去看看。

对于header驻留在关闭的问题，令我一度陷入僵局，因为我翻看了PtrFrameLayout的源码，发现即使自定义PtrHandler，PtrHandler收到onUIRefreshComplete的时候是在PtrFrameLayout已经调onRefreshComplete用后再notify的，所以要实现header关闭的动作在我打完钩之后在执行，就找不到入口了。看下PtrFrameLayout refreshComplete的代码

   /**
     * Call this when data is loaded.
     * The UI will perform complete at once or after a delay, depends on the time    
     * elapsed is greater then {@link #mLoadingMinTime} or not.                        
     */
    final public void refreshComplete() {
        if (DEBUG) {
            PtrCLog.i(LOG_TAG, "refreshComplete");
        }

        if (mRefreshCompleteHook != null) {
            mRefreshCompleteHook.reset();
        }

        int delay = (int) (mLoadingMinTime - (System.currentTimeMillis() - mLoadingStartTime));
        if (delay <= 0) {
            if (DEBUG) {
                PtrCLog.d(LOG_TAG, "performRefreshComplete at once");
            }
            performRefreshComplete();
        } else {
            postDelayed(mPerformRefreshCompleteDelay, delay);
            if (DEBUG) {
                PtrCLog.d(LOG_TAG, "performRefreshComplete after delay: %s", delay);
            }
        }
    }

当我们数据加载完成后，大家都应该会调用这个方法吧，注释的很清楚，这里说到可能会延迟关闭，那取决于我们设置的 ptrRefresh.setLoadingMinTime(long delayTime),但是，我们怎么能保证数据加载的时间不会大于这个时间呢？所以想通过设置这个时间来延迟关闭header在打钩之后是不行的。

我们接着看performRefreshComplete()方法

   /**
     * Do refresh complete work when time elapsed is greater than{@link#mLoadingMinTime} 
     */
    private void performRefreshComplete() {
        mStatus = PTR_STATUS_COMPLETE;

        // if is auto refresh do nothing, wait scroller stop
        if (mScrollChecker.mIsRunning && isAutoRefresh()) {
            // do nothing
            if (DEBUG) {
                PtrCLog.d(LOG_TAG, "performRefreshComplete do nothing, scrolling: %s, auto refresh: %s",
                        mScrollChecker.mIsRunning, mFlag);
            }
            return;
        }

        notifyUIRefreshComplete(false);
    }

这个时候， mStatus = PTR_STATUS_COMPLETE，PtrFrameLayout已经设为刷新完成的状态了，开始通知PtrHandler onUIRefreshComplete了，这也是我解决问题的转折点，我们看notifyUIRefreshComplete(boolean ignoreHook)方法

   /**
     * Do real refresh work. If there is a hook, execute the hook first.
     * @param ignoreHook
     */
    private void notifyUIRefreshComplete(boolean ignoreHook) {
        /**
         * After hook operation is done, {@link #notifyUIRefreshComplete} will be call 
         * in resume action to ignore hook.
         */
        if (mPtrIndicator.hasLeftStartPosition() && !ignoreHook && mRefreshCompleteHook != null) {
            if (DEBUG) {
                PtrCLog.d(LOG_TAG, "notifyUIRefreshComplete mRefreshCompleteHook run.");
            }

            mRefreshCompleteHook.takeOver();
            return;
        }
        if (mPtrUIHandlerHolder.hasHandler()) {
            if (DEBUG) {
                PtrCLog.i(LOG_TAG, "PtrUIHandler: onUIRefreshComplete");
            }
            mPtrUIHandlerHolder.onUIRefreshComplete(this);
        }
        mPtrIndicator.onUIRefreshComplete();
        tryScrollBackToTopAfterComplete();
        tryToNotifyReset();
    }

看到mPtrUIHandlerHolder.onUIRefreshComplete(this)，这个时候我们的PtrHandler就已经收到刷新完成的通知了，正常流程的话，header就开始关闭了。但是大家请看这句注释，After hook operation is done, {@link #notifyUIRefreshComplete} will be call in resume action to ignore hook，这里有一个关键的东西mRefreshCompleteHook，就是PtrUIHandlerHook，看这个名字你就知道他大概是干吗用的了，他就是截断header关闭的关键。他继承自Runnable 接口，我们看看他的代码

/**
 * Run a hook runnable, the runnable will run only once.
 * After the runnable is done, call resume to resume.
 * Once run, call takeover will directory call the resume action
 */
public abstract class PtrUIHandlerHook implements Runnable {

    private Runnable mResumeAction;
    private static final byte STATUS_PREPARE = 0;
    private static final byte STATUS_IN_HOOK = 1;
    private static final byte STATUS_RESUMED = 2;
    private byte mStatus = STATUS_PREPARE;

    public void takeOver() {
        takeOver(null);
    }

    public void takeOver(Runnable resumeAction) {
        if (resumeAction != null) {
            mResumeAction = resumeAction;
        }
        switch (mStatus) {
            case STATUS_PREPARE:
                mStatus = STATUS_IN_HOOK;
                run();
                break;
            case STATUS_IN_HOOK:
                break;
            case STATUS_RESUMED:
                resume();
                break;
        }
    }

    public void reset() {
        mStatus = STATUS_PREPARE;
    }

    public void resume() {
        if (mResumeAction != null) {
            mResumeAction.run();
        }
        mStatus = STATUS_RESUMED;
    }

    /**
     * Hook should always have a resume action, which is hooked by this hook.
     *
     * @param runnable
     */
    public void setResumeAction(Runnable runnable) {
        mResumeAction = runnable;
    }
}

PtrUIHandlerHook允许外界设置一个Runnable在resume的时候执行，这就意味着我们可以在截断PtrFrameLayout关闭header后做一些自己的事情，这些事情可以放到PtrUIHandlerHook的run方法里，因为notifyUIRefreshComplete(boolean ignoreHook)有这样一句代码 –>mRefreshCompleteHook.takeOver(),这会触发PtrUIHandlerHook的run方法，比如我们把通知加载完成的事情放在这个润方法里。当我们的事情执行完了，再去调用PtrUIHandlerHook的resume方法，通知PtrFrameLayout关闭header。为什么可以通知PtrFrameLayout关闭header呢？因为在PtrFrameLayout里被有这样一个方法

 /**
     * please DO REMEMBER resume the hook
     *
     * @param hook
     */

    public void setRefreshCompleteHook(PtrUIHandlerHook hook) {
        mRefreshCompleteHook = hook;
        hook.setResumeAction(new Runnable() {
            @Override
            public void run() {
                if (DEBUG) {
                    PtrCLog.d(LOG_TAG, "mRefreshCompleteHook resume.");
                }
                notifyUIRefreshComplete(true);
            }
        });
    }

我们把自定义的PtrUIHandlerHook放进去，PtrFrameLayout默认设置的ResumeAction的run方法执行的是啥？就是notifyUIRefreshComplete(boolean ignoreHook)方法！！！大家再回去看看notifyUIRefreshComplete(boolean ignoreHook)方法，这个时候传入的ignoreHook是true，那么会发生什么呢？对，就是PtrFrameLayout正常关闭header的流程，而这个流程发生在哪里？就是在我们手动调用PtrUIHandlerHook的resume方法的时候，至于大脚要在哪里去调PtrUIHandlerHook的resume方法，大家尽情发挥想象吧。

到了这个时候，整个流程就变得清晰了：

1.我们自定义一个PtrUIHandlerHook，在run方法里通知刷新完成，但这时候PtrFrameLayout还未执行关闭header等动作；
2.收到刷新的组件该干嘛干嘛，干完事情后，通知PtrUIHandlerHook，你可以resume了，这时候PtrUIHandlerHook执行PtrFrameLayout事先设入的Runnable的run方法，再次调用notifyUIRefreshComplete(boolean ignoreHook)方法，这个时候传入的ignoreHook是true，notifyUIRefreshComplete(boolean ignoreHook)方法就会正常执行关闭header等动作，刷新完成。

至此，延迟关闭header的原理就清楚了，剩下的就是代码实现的事情了，我是通过定义接口的方式来降低刷新组件、PtrUIHandler、PtrUIHandlerHook的耦合的，大家卡伊参考一下

自定义PtrUIHandler

package com.ykbjson.demo.customview.ptrheader;

import android.content.Context;
import android.util.AttributeSet;
import android.widget.FrameLayout;

import com.ykbjson.demo.R;

import in.srain.cube.views.ptr.PtrFrameLayout;
import in.srain.cube.views.ptr.PtrUIHandler;
import in.srain.cube.views.ptr.indicator.PtrIndicator;

/**
 * 包名：com.ykbjson.demo.customview.ptrheader
 * 描述：自定义下拉刷新头部
 * 创建者：yankebin
 * 日期：2016/12/7
 */
public class CustomerPtrHandler extends FrameLayout implements PtrUIHandler,
        CustomerPtrUIHandlerHook.OnPtrUIHandlerHookCallback, PullLoadingView.OnRefreshCompleteCallback {
    // 下拉图标
    private PullLoadingView pullLoadingView;
    private CustomerPtrUIHandlerHook handlerHook;

    public CustomerPtrHandler(Context context) {
        this(context, null);
    }

    public CustomerPtrHandler(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public CustomerPtrHandler(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init(context);
    }

    /**
     * 初始化
     *
     * @param context
     */
    private void init(Context context) {
        inflate(context, R.layout.item_refresh_header, this);
        pullLoadingView = (PullLoadingView) findViewById(R.id.iv_rotate);
        pullLoadingView.setCompleteCallback(this);
    }

    public void setLoadingColor(int loadingColor) {
        if (checkNotNull(pullLoadingView)) {
            pullLoadingView.setLoadingColor(loadingColor);
        }
    }

    private boolean checkNotNull(Object o) {
        return null != o;
    }

    @Override
    public void onUIReset(PtrFrameLayout ptrFrameLayout) {
        if (checkNotNull(pullLoadingView)) {
            pullLoadingView.setMode(PullLoadingView.MODE_INIT);
        }
    }

    @Override
    public void onUIRefreshPrepare(PtrFrameLayout ptrFrameLayout) {
        if (!checkNotNull(handlerHook)) {
            handlerHook = new CustomerPtrUIHandlerHook(this);
            ptrFrameLayout.setRefreshCompleteHook(handlerHook);
            if (checkNotNull(pullLoadingView)) {
                pullLoadingView.setMaxPullY(ptrFrameLayout.getOffsetToRefresh());
            }
            //修改loading最少驻留时间，不要一闪而过
            ptrFrameLayout.setLoadingMinTime(2000);
            //header关闭时间
            ptrFrameLayout.setDurationToCloseHeader(1500);
        }
    }

    @Override
    public void onUIRefreshBegin(PtrFrameLayout ptrFrameLayout) {
        if (checkNotNull(pullLoadingView)) {
            pullLoadingView.setMode(PullLoadingView.MODE_LOADING);
        }
    }

    @Override
    public void onUIRefreshComplete(final PtrFrameLayout ptrFrameLayout) {
    }

    @Override
    public void onUIPositionChange(PtrFrameLayout frame, boolean isUnderTouch, byte status, PtrIndicator ptrIndicator) {
        if (!isUnderTouch || status == PtrFrameLayout.PTR_STATUS_LOADING || status == PtrFrameLayout.PTR_STATUS_COMPLETE) {
            return;
        }
        final int currentPos = ptrIndicator.getCurrentPosY();
        if (checkNotNull(pullLoadingView)) {
            pullLoadingView.onUIPositionChange(currentPos);
        }
    }

    @Override
    public void onPtrUIHandlerHookStart() {
        if (checkNotNull(pullLoadingView)) {
            pullLoadingView.setMode(PullLoadingView.MODE_LOADING_COMPLETE);
        }
        //如果没有pullLoadingView，强制hook resume，不然会导致刷新视图无法还原
        else {
            onRefreshComplete();
        }
    }

    @Override
    public void onRefreshComplete() {
        if (checkNotNull(handlerHook)) {
            handlerHook.resume();
        }
    }
}

自定义PtrUIHandlerHook

package com.ykbjson.demo.customview.ptrheader;

import in.srain.cube.views.ptr.PtrUIHandlerHook;

/**
 * 包名：com.ykbjson.demo.customview.ptrheader
 * 描述：下拉刷新关闭header的hook，可以再这里处理关闭header之前的事情
 * 创建者：yankebin
 * 日期：2016/12/7
 */

public class CustomerPtrUIHandlerHook extends PtrUIHandlerHook {

    public interface OnPtrUIHandlerHookCallback{
        void onPtrUIHandlerHookStart();
    }

    private OnPtrUIHandlerHookCallback handlerHookCallback;

    public CustomerPtrUIHandlerHook(OnPtrUIHandlerHookCallback handlerHookCallback) {
        this.handlerHookCallback = handlerHookCallback;
    }

    @Override
    public void run() {
        if (null != handlerHookCallback) {
            handlerHookCallback.onPtrUIHandlerHookStart();
        }
    }
}

自定义PullLoadingView

package com.ykbjson.demo.customview.ptrheader;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.widget.ImageView;


/**
 * 包名：com.ykbjson.demo.customview.ptrheader
 * 描述：下拉刷新加载视图
 * 创建者：yankebin
 * 日期：2016/12/7
 */

public class PullLoadingView extends ImageView {
    public static final int MODE_INIT = -1;
    public static final int MODE_PULLING = MODE_INIT + 1;
    public static final int MODE_LOADING = MODE_INIT + 2;
    public static final int MODE_LOADING_COMPLETE = MODE_INIT + 3;
    public static final int MODE_ALL_COMPLETE = MODE_INIT + 4;


    private static final int CIRCLE_DEGREE = 360;
    private static final String LOADING_TEXT = "loading...";

    private int delayToCloseHeader = 1000;
    private float maxPullY;
    private float width;
    private float height;
    private Paint arcPaint;
    private Paint textPaint;
    private RectF rectF;
    private int degree;
    private int mode = MODE_INIT;
    private float currentPosition;
    private long invalidDelayTime = 30L;
    private float loadingTextWidth;
    private float line1X;
    private float line1Y;
    private float line2X;
    private float line2Y;
    private float radius;
    private float center;
    private float checkStartX;
    private float step;
    private float lineThick;
    private boolean isNeedDrawSecondLine;
    private OnRefreshCompleteCallback completeCallback;
    private final Canvas mCanvas;//当布局本身或父布局被隐藏后，不会回调onDraw方法，此时手动传入此参数强制驱动onDraw方法执行，保证绘画不被阻断

    public interface OnRefreshCompleteCallback {
        void onRefreshComplete();
    }

    public PullLoadingView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public PullLoadingView(Context context) {
        this(context, null);
    }

    public PullLoadingView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        mCanvas = new Canvas();

        final float density = getResources().getDisplayMetrics().density;
        step = density * 2;
        lineThick = density * 2;

        arcPaint = new Paint();
        arcPaint.setColor(Color.RED);
        arcPaint.setAntiAlias(true);
        arcPaint.setStrokeWidth(lineThick);
        arcPaint.setStyle(Paint.Style.STROKE);

        textPaint = new Paint();
        textPaint.setColor(Color.RED);
        textPaint.setAntiAlias(true);
        textPaint.setStyle(Paint.Style.FILL);
        textPaint.setTextSize(6 * density);

        loadingTextWidth = textPaint.measureText(LOADING_TEXT);
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        width = w;
        height = h;
        center = width / 2;
        radius = width / 2 - lineThick;
        checkStartX = center - width / 5;
        rectF = new RectF(lineThick, lineThick, width - lineThick, height - lineThick);
    }

    @Override
    public void draw(Canvas canvas) {
        super.draw(canvas);
        //打钩
        if (mode == MODE_ALL_COMPLETE) {
            //画圆
            canvas.drawArc(rectF, 0, CIRCLE_DEGREE, false, arcPaint);
            if (line1X < radius / 3) {
                line1X += step;
                line1Y += step;
            }
            //画第一根线
            canvas.drawLine(checkStartX, center, checkStartX + line1X, center + line1Y, arcPaint);

            if (line1X >= radius / 3) {

                if (!isNeedDrawSecondLine) {
                    line2X = line1X;
                    line2Y = line1Y;
                    isNeedDrawSecondLine = true;
                }
                line2X += step;
                line2Y -= step;
                //画第二根线
                canvas.drawLine(checkStartX + line1X - lineThick / 2,
                        center + line1Y, checkStartX + line2X, center + line2Y, arcPaint);
            }
            if (line2X > radius) {
                line1X = line1Y = line2X = line2Y = 0;
                isNeedDrawSecondLine = false;
                refreshComplete();
                return;
            }
            uiChange();
        }
        //画圆
        else if (mode == MODE_LOADING_COMPLETE) {
            //画圆弧
            canvas.drawArc(rectF, -CIRCLE_DEGREE / 4, degree, false, arcPaint);
            //画圆和勾的过程做完后停止刷新界面
            if (degree == CIRCLE_DEGREE) {
                setMode(MODE_ALL_COMPLETE);
                return;
            }
            //继续画圆
            checkDegree();
            uiChange();
        }
        //渐进闭合圆
        else if (mode == MODE_PULLING) {
            float sweepAngle = currentPosition / maxPullY * CIRCLE_DEGREE;
            canvas.drawArc(rectF, -CIRCLE_DEGREE / 4, sweepAngle, false, arcPaint);
            canvas.drawArc(rectF, sweepAngle - (CIRCLE_DEGREE / 4 - 5), 5, false, arcPaint);
        }
        //旋转圆弧
        else if (mode == MODE_LOADING) {
            canvas.drawText(LOADING_TEXT, (width - loadingTextWidth) / 2, height / 2, textPaint);
            canvas.drawArc(rectF, degree, CIRCLE_DEGREE / 8, false, arcPaint);
            canvas.drawArc(rectF, degree + CIRCLE_DEGREE / 8 + 2, 5, false, arcPaint);
            degree += 10;
            if (degree == CIRCLE_DEGREE) {
                degree = 0;
            }
            uiChange();
        }
        //初始化
        else {
            super.draw(canvas);
        }
    }

    public void setCompleteCallback(OnRefreshCompleteCallback completeCallback) {
        this.completeCallback = completeCallback;
    }

    public void setDelayToCloseHeader(int delayToCloseHeader) {
        this.delayToCloseHeader = delayToCloseHeader;
    }

    public void setMaxPullY(float maxPullY) {
        this.maxPullY = maxPullY;
    }

    /**
     * 设置动画的颜色，包括文字和圆圈以及打钩的线
     *
     * @param loadingColor
     */
    public void setLoadingColor(int loadingColor) {
        arcPaint.setColor(loadingColor);
        textPaint.setColor(loadingColor);
    }

    public void setStep(float step) {
        this.step = step;
    }

    /**
     * 设置当前模式
     *
     * @param mode
     */
    public void setMode(int mode) {
        degree = 0;
        if (mode == MODE_PULLING) {
            this.mode = mode;
            dispatchInvalidate();
        } else {
            if (this.mode != mode) {
                this.mode = mode;
                if (mode == MODE_LOADING_COMPLETE) {
                    invalidDelayTime = 50L;
                } else if (mode == MODE_LOADING) {
                    invalidDelayTime = 15L;
                } else if (mode == MODE_ALL_COMPLETE) {
                    invalidDelayTime = 5L;
                } else {
                    invalidDelayTime = 30L;
                }
                uiChange();
            }
        }
    }

    /**
     * 检测角度
     */
    private void checkDegree() {
        if (degree < CIRCLE_DEGREE) {
            degree += 45;
            if (degree > CIRCLE_DEGREE) {
                degree = CIRCLE_DEGREE;
            }
        }
    }

    /**
     * ui变化
     */
    private synchronized void uiChange() {
        removeCallbacks(invalidateRunner);
        postDelayed(invalidateRunner, invalidDelayTime);
    }

    /**
     * 刷新完成
     */
    private synchronized void refreshComplete() {
        removeCallbacks(closeHeaderRunner);
        postDelayed(closeHeaderRunner, delayToCloseHeader);
    }


    /**
     * 下拉距离变化
     *
     * @param currentPos
     */
    public void onUIPositionChange(int currentPos) {
        currentPosition = currentPos;
        setMode(MODE_PULLING);
    }

    /**
     * 根据view的可见性决定调postInvalidate方法或传入空canvas去驱动onDraw方法继续执行，保证绘画不被阻断
     */
    private void dispatchInvalidate() {
        if (isShown()) {
            postInvalidate();
        } else {
            draw(mCanvas);
        }
    }

    private Runnable invalidateRunner = new Runnable() {
        @Override
        public void run() {
            dispatchInvalidate();
        }
    };

    private Runnable closeHeaderRunner = new Runnable() {
        @Override
        public void run() {
            if (null != completeCallback) {
                completeCallback.onRefreshComplete();
            }
        }
    };
}

再啰嗦几句，在实现这个效果的过程中还遇到了一个问题，当某个界面绘制还未完成时，打开了新页面，正在绘制的界面stop了，这个时候应该是android系统因为优化内存的原因，不可见的视图不会再调用draw相关方法的，即使你手动调用postInvalidate或是invalidate或是requestLayout方法，当我们的新页面关闭后，原来的页面resume了，view就会执行draw相关的方法，因为我的这个效果是纯绘制的，所有靠的是在draw方法里循环调用postInvalidate来驱动绘制，当界面stop后，收到了刷新结束的通知，但是因为draw方法没法继续驱动，所以状态就一直停留在了刷新结束的状态，还未闭合圆和打钩，当界面可见后，按照正常时间推算，这个界面的刷新早已结束，应该是看不见header的，但是由于刚才的那个原因，这个时候还会从界面刚刷新结束时的状态开始继续执行。所以这里才有dispatchInvalidate这个方法。

为了解决这个问题，我尝试了SurfaceView，子线程绘制，不受界面影响，但是最后放弃的原因是那个黑块块没办法去掉。唯一能去掉的办法就是每个有下拉刷新的页面都要给自定义PullLoadingView设置一个背景颜色，但是我们目前涉及的界面较多，色值严重不统一，所以我最后放弃了。最后还是继续用view来实现，只不过根据isShown方法来判断当前界面是否可见，不可见的时候给一个空画布手动驱动draw方法执行，驱动状态正常执行，由于是靠状态来绘制的，所以即使你很快的来回切页面也不会出现绘制错乱的问题。

最后就是要说一下isShown这个方法，大家可以去看看他的源码和注释，这和getVisibility方法还是有很大区别的，他的返回值是遍历整个view的树的可见性得到的结果，所以他的返回值是比较可靠的，这也是我解决我所遇到的问题的一个关键点。