blow your mind

The BYM series aims to share not only technology but also ideas, not just being a porter of code.

1. Background

The company’s business needs to make a search function imitated baidu, Baidu map’s search results list sliding effect is quite smooth, so I also want one. Then this article/funny

2

A. onTouchEvent and MotionEvent

OnTouchEvent is a familiar event that handles all gestures received by the View, along with dispatchTouchEvent and onInterceptTouchEvent.

  @Override
    public boolean onTouchEvent(MotionEvent ev) {
        return super.onTouchEvent(ev);
    }
Copy the code

A MotionEvent is an event object generated when we click on the screen (with mouse, hand, pen, trackball) that contains absolute or relative motion. Common MovtionEvent actions are shown in the following table

b. setTranslationY

Set the vertical position of this view relative to its {@link#getTop () top} position. This effectively locates the late layout of the object, as well as where the object’s layout is placed.

I mean, actually set the relative distance of the view on the y axis.

public void setTranslationY(float translationY) {
        if(translationY ! = getTranslationY()) {// Check whether the setting is the same as the current position
            invalidateViewProperty(true.false);
            //RenderNode contains View properties
            mRenderNode.setTranslationY(translationY);
            invalidateViewProperty(false.true); invalidateParentIfNeededAndWasQuickRejected(); notifySubtreeAccessibilityStateChangedIfNeeded(); }}/** * Fast invalidation of view property changes (alpha, translationXY, etc.). * We don't want to set any flags or handle all cases handled by the default invalidation method > * Instead, we just want to arrange a traversal in the ViewRootImpl with the appropriate dirty Rect. * This method calls the quick-fail methods in the ViewGroup, which iterate through the hierarchy and convert the Dirty Rect as needed. * * This method also handles normal invalid logic if the display list property is not used in this view. * This backup method uses the invalidateParent and forceRedraw flags to handle these situations used in various property setting methods@paramInvalidateParent Force a call to invalidateParentCaches () * if the display list attribute is not used in this view@paramForceRedraw If the display list property is not used in this view, mark the view as drawn to force propagation of invalid */
    @UnsupportedAppUsage
    void invalidateViewProperty(boolean invalidateParent, boolean forceRedraw) {
        if(! isHardwareAccelerated()// Whether hardware acceleration is supported| |! mRenderNode.hasDisplayList()// Whether there is buffered data to draw|| (mPrivateFlags & PFLAG_DRAW_ANIMATION) ! =0) {// Whether the view is drawing
            if (invalidateParent) {// Whether to refresh the parent controlinvalidateParentCaches(); Know the parent view cache, do not call the parent control's invalidate method}if (forceRedraw) {
                mPrivateFlags |= PFLAG_DRAWN; // force another invalidation with the new orientation
            }
            invalidate(false);//invalidate(Boolean invalidateCache)
        } else {
            damageInParent();// Tell the superview to break the View boundary.}}Copy the code

• Display List is a Buffer that caches drawing commands. The essence of Display List is a Buffer that records the sequence of drawing commands to be executed.

• Display List is the basic drawing element of the view. It contains the primitive attributes of the element (position, size, Angle, transparency, etc.) corresponding to the drawXxx() method of the Canvas.

• View information transfer process: Canvas(Java API) – > OpenGL(C/C++ Lib) – > Driver – > GPU

C. getY () and getRawY ()

• GetRawX () and getRawY() return the position of the touch point relative to the screen,
• GetX () and getY() return the position of the touch point relative to the View.

3. The train of thought

• Detour 1: Try to set layoutparams.margintop to change position, but view refresh won’t work
• Detour 2: Use ValueAnimation to modify translateY but find deraution.
• Blind cat meets dead mouse: directly use the setTranslateY method, change the position of the view, record the point position when down, judge whether the position exceeds the upper limit and lower limit when moving, judge the direction of gesture when up, and automatically setTranslateY to the next position specified.

4. The source code

/ * * *@authoer create by markfrain
 * @githubhttps://github.com/furuiCQ * Gao Huai see physical and naive * time: 5/8/21 * description: BaiduRecyclView * /
public class BaiduRecycleView extends RecyclerView {
    float lastY;
    float translateY;
    float lastDiff = 0f;
    float minVerticalY = 20;
    int topTranslateY = 10, centerTranslateY = 300, bottomTranslateY = 540;

    public BaiduRecycleView(@NonNull Context context) {
        super(context);
        init();
    }

    public BaiduRecycleView(@NonNull Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    public BaiduRecycleView(@NonNull Context context, @Nullable AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        init();
    }

    private void init(a) {
        translateY = DpUtils.dp2px(getContext(), centerTranslateY);
    }

    @Override
    public boolean onTouchEvent(MotionEvent e) {
        switch (e.getAction()) {
            case MotionEvent.ACTION_DOWN:
                lastY = e.getRawY();
                return true;
            case MotionEvent.ACTION_UP:
                float rawY = lastY - e.getRawY();
                if (translateY < DpUtils.dp2px(getContext(), centerTranslateY)) {
                    translateY = DpUtils.dp2px(getContext(), rawY > 0 ? topTranslateY : centerTranslateY);
                    setTranslationY(translateY);
                } else if (translateY < DpUtils.dp2px(getContext(), bottomTranslateY)) {
                    translateY = DpUtils.dp2px(getContext(), rawY > 0 ? centerTranslateY : bottomTranslateY);
                    setTranslationY(translateY);
                }
                return true;
            case MotionEvent.ACTION_MOVE:
                rawY = lastY - e.getRawY();
                float distance = lastDiff == 0f ? lastDiff : rawY - lastDiff;
                lastDiff = rawY;
                if (rawY > minVerticalY || rawY < -minVerticalY) {
                    if (translateY - distance < DpUtils.dp2px(getContext(), topTranslateY)) {
                        translateY = DpUtils.dp2px(getContext(), topTranslateY);
                        setTranslationY(DpUtils.dp2px(getContext(), topTranslateY));
                    } else if (translateY - distance > DpUtils.dp2px(getContext(), bottomTranslateY)) {
                        translateY = DpUtils.dp2px(getContext(), bottomTranslateY);
                        setTranslationY(DpUtils.dp2px(getContext(), bottomTranslateY));
                    } else{ translateY -= distance; setTranslationY(translateY); }}return false;
        }
        return super.onTouchEvent(e); }}Copy the code

5. Effect display

6. AnyWay

If you have a better, cooler, leaner implementation code, you are welcome to implement it in your spare time, and I’m sure you can gain some knowledge of your own. If you are blue, you can change your mind. If you are blue, you can change your mind.

7. References

• The Android source code
• Android rendering — Display List