Evolution and Architecture of Taobao Search Scroll Containers (XSearch)

This article presents the technical evolution of Taobao's search scrolling container (XSearch), describing the transition from the 1.0 era to the 2.0 era and the architectural redesign for better reuse and extensibility.

XSearch is the foundational framework for the search client, supporting multiple business scenarios (main search, photo search, cloud topics, in‑store search). It follows a Native + dynamic approach, defining slots on the client side while the server supplies data and slot definitions.

In the 1.0 era the container consisted of SRP and XSearchList, with a fixed header handling mechanism and limited code reuse. The article details the layout logic, including the SearchAppBarLayout and its layout_level and layout_position attributes, and shows how child views are sorted and offset during scrolling.

protected void layoutChildViews(int left, int top, int right, int bottom) {
    final int parentLeft = 0;
    final int parentRight = right - left;
    final int parentTop = 0;
    int nextTop = parentTop;
    int size = mSortedViews.size();
    for (int i = 0; i < size; i++) {
        ViewTuple viewTuple = mSortedViews.get(i);
        View child = viewTuple.view;
        final LayoutParams lp = (LayoutParams) child.getLayoutParams();
        child.layout(parentLeft + lp.leftMargin,
                    nextTop + lp.topMargin,
                    parentRight - lp.rightMargin,
                    nextTop + child.getMeasuredHeight());
        viewTuple.start = nextTop;
        viewTuple.height = child.getMeasuredHeight();
        viewTuple.level = lp.level;
        viewTuple.offset = 0;
        nextTop += child.getMeasuredHeight() + lp.bottomMargin;
    }
}

The 2.0 era introduces a new container built on the NestedScroll API, allowing fully customizable headers, arbitrary header ordering, and seamless linkage between header and list regions. Header priority is split into scroll priority and draw priority, enabling fine‑grained control over sticky behavior.

The new architecture unifies data structures across SRP, XSearchList and the new search, abstracting them into a common Result/Combo model, and consolidates rendering through a MetaLayout‑based framework. This reduces redundancy, improves code reuse, and separates business logic from rendering.

The article also provides concrete implementations for common features such as scene‑layer scrolling, sticky filters, and multi‑section elevators, accompanied by several Java code excerpts.

Finally, the authors summarize the benefits of the unified architecture—higher reuse, consistent rendering features, clearer layering, and easier extension—while showcasing demo animations of the new framework.