簡介

　　鴻蒙OS 開發SDK中對於長列表的實現ListContainer的實現較為簡單，沒法想RecyclerView一樣透過使用不同的LayoutManager來實現複雜佈局因此沒法快速實現瀑布流效果。
　　但鴻蒙OS也都支援控制元件的Measure（onEstimateSize），layout（onArrange) 和事件的處理。完全可以在鴻蒙OS中自定義一個佈局來實現RecyclerView+LayoutManager的效果，以此來實現瀑布流等複雜效果。

自定義佈局

　　對於鴻蒙OS自定義佈局在官網上有介紹，主要實現onEstimateSize來測量控制元件大小和onArrange實現佈局，這裡我們將子控制元件的確定和測量擺放完全交LayoutManager來實現。同時我們要支援滑動，這裡用Component.DraggedListener實現。因此我們的佈局容器十分簡單，呼叫LayoutManager進行測量佈局，同時對於滑動事件，確定滑動後的視窗，呼叫LayoutManager的fill函式確定填滿視窗的子容器集合，然後觸發重新繪製。核心程式碼如下

public class SpanLayout extends ComponentContainer implements ComponentContainer.EstimateSizeListener,
        ComponentContainer.ArrangeListener, Component.CanAcceptScrollListener, Component.ScrolledListener, Component.TouchEventListener, Component.DraggedListener {
   
    private BaseItemProvider mProvider;
    public SpanLayout(Context context) {
        super(context);
        setEstimateSizeListener(this);
        setArrangeListener(this);
        setDraggedListener(DRAG_VERTICAL,this);
        
    }
    @Override
    public boolean onEstimateSize(int widthEstimatedConfig, int heightEstimatedConfig) {
        int width = Component.EstimateSpec.getSize(widthEstimatedConfig);
        int height = Component.EstimateSpec.getSize(heightEstimatedConfig);
        setEstimatedSize(
                Component.EstimateSpec.getChildSizeWithMode(width, widthEstimatedConfig, EstimateSpec.UNCONSTRAINT),
                Component.EstimateSpec.getChildSizeWithMode(height, heightEstimatedConfig, EstimateSpec.UNCONSTRAINT));
        mLayoutManager.setEstimateSize(widthEstimatedConfig,heightEstimatedConfig);
//        measureChild(widthEstimatedConfig,heightEstimatedConfig);
        return true;
    }
    @Override
    public boolean onArrange(int left, int top, int width, int height) {
        //第一次fill，從item0開始一直到leftHeight和rightHeight都大於height為止。
        if(mRecycler.getAttachedScrap().isEmpty()){
           mLayoutManager.fill(left,top,left+width,top+height,DIRECTION_UP);
        }
//        removeAllComponents(); //呼叫removeAllComponents的話會一直出發重新繪製。
        for(RecyclerItem item:mRecycler.getAttachedScrap()){
            item.child.arrange(item.positionX+item.marginLeft,scrollY+item.positionY+item.marginTop,item.width,item.height);
        }
        return true;
    }
    @Override
    public void onDragStart(Component component, DragInfo dragInfo) {
        startY = dragInfo.startPoint.getPointYToInt();
    }
    @Override
    public void onDragUpdate(Component component, DragInfo dragInfo) {
        int dt = dragInfo.updatePoint.getPointYToInt() - startY;
        int tryScrollY = dt + scrollY;
        startY = dragInfo.updatePoint.getPointYToInt();
        mDirection = dt<0?DIRECTION_UP:DIRECTION_DOWN;
        mChange = mLayoutManager.fill(0, -tryScrollY,getEstimatedWidth(),-tryScrollY+getEstimatedHeight(),mDirection);
        if(mChange){
            scrollY = tryScrollY;
            postLayout();
        }
    }
}

瀑布流LayoutManager

LayoutManager主要是用來確定子控制元件的佈局，重點是要實現fill函式，用於確認對於一個視窗內的子控制元件。

我們定義一個Span類，來記錄某一列瀑布當前startLine和endLine情況，對於spanNum列的瀑布流，我們建立Span陣列來記錄情況。

例如向上滾動，當一個子控制元件滿足bottom小於視窗top時需要回收，當一個子控制元件的bottom小於視窗的bottom是說明其下方需有子控制元件填充。由於瀑布流是多列的且每個子控制元件高度不同，因此我們不能簡單的判斷當前顯示的第一個子控制元件是否要回收，最後一個子控制元件下方是否需要填充來完成充滿視窗的工作。我們用while迴圈+雙端佇列，透過保證所有的Span其startLine都小於視窗top，endLine都大於視窗bottom來完成充滿視窗的工作。核心fill函式實現如下：

public synchronized boolean fill(float left,float top,float right,float bottom,int direction){
    int spanWidth = mWidthSize/mSpanNum;
    if(mSpans == null){
        mSpans = new Span[mSpanNum];
        for(int i=0;i<mSpanNum;i++){
            Span span = new Span();
            span.index = i;
            mSpans[i] = span;
            span.left = (int) (left + i*spanWidth);
        }
    }
    LinkedList<RecyclerItem> attached = mRecycler.getAttachedScrap();
    if(attached.isEmpty()){
        mRecycler.getAllScrap().clear();
        int count = mProvider.getCount();
        int okSpan = 0;
        for (int i=0;i<count;i++){
            Span span = getMinSpanWithEndLine();
            RecyclerItem item = fillChild(span.left,span.endLine,i);
            item.span = span;
            if(item.positionY>=top && item.positionY<=bottom+item.height){//在顯示區域
                mRecycler.addItem(i,item);
                mRecycler.attachItemToEnd(item);
            }else{
                mRecycler.recycle(item);
            }
            span.endLine += item.height+item.marginTop+item.marginBottom;
            if(span.endLine>bottom){
                okSpan++;
            }
            if(okSpan>=mSpanNum){
                break;
            }
        }
        return true;
    }else{
        if(direction == DIRECTION_UP){
            RecyclerItem last = attached.peekLast();
            int count = mProvider.getCount();
            if(last.index == count-1 && last.getBottom()<=bottom){//已經到底
                return false;
            }else{
                //先回收
                RecyclerItem first = attached.peekFirst();
                while(first != null && first.getBottom()<top){
                    mRecycler.recycle(first);//recycle本身會remove
                    first.span.startLine += first.getVSpace();
                    first = attached.peekFirst();
                }
                Span minEndLineSpan = getMinSpanWithEndLine();
                int index = last.index+1;
                while(index<count && minEndLineSpan.endLine<=bottom){//需要填充
                    RecyclerItem item;
                    if(mRecycler.getAllScrap().size()>index){
                        item = mRecycler.getAllScrap().get(index);
                        mRecycler.recoverToEnd(item);
                    }else{
                        item = fillChild(minEndLineSpan.left,minEndLineSpan.endLine,index);
                        item.span = minEndLineSpan;
                        mRecycler.attachItemToEnd(item);
                        mRecycler.addItem(index,item);
                    }
                    item.span.endLine += item.getVSpace();
                    minEndLineSpan = getMinSpanWithEndLine();
                    index++;
                }
                return true;
            }
        }else if(direction == DIRECTION_DOWN){
            RecyclerItem first = attached.peekFirst();
            int count = mProvider.getCount();
            if(first.index == 0 && first.getTop()>=top){//已經到頂
                return false;
            }else{
                //先回收
                RecyclerItem last = attached.peekLast();
                while(last != null && last.getTop()>bottom){
                    mRecycler.recycle(last);//recycle本身會remove
                    last.span.endLine -= last.getVSpace();
                    last = attached.peekFirst();
                }
                Span maxStartLineSpan = getMaxSpanWithStartLine();
                int index = first.index-1;
                while(index>=0 && maxStartLineSpan.startLine>=top){//需要填充
                    RecyclerItem item = mRecycler.getAllScrap().get(index);
                    if(item != null){
                        mRecycler.recoverToStart(item);
                        item.span.startLine -= item.getVSpace();
                    }else{
                        //理論上不存在
                    }
                    maxStartLineSpan = getMaxSpanWithStartLine();
                    index--;
                }
                return true;
            }
        }
    }
    return true;
}

Item回收

對於長列表，肯定要有類似於RecyclerView的回收機制。item的回收和復原在LayoutManager的fill函式中觸發，透過Reycler實現。

簡單的使用了mAttacthedScrap來儲存當前視窗上顯示的Item和mCacheScrap來儲存被回收的控制元件。這裡的設計就是對RecyclerView的回收機制的簡化。

不同的是參考Flutter中三棵樹的概念，定義了RecycleItem類，用來記錄每個Item的左上角座標和寬高值，只有在視窗上顯示的Item會繫結元件。由於未繫結元件時的RecycleItem是十分輕量級的，因此記憶體的損耗基本可以忽略。我們用mAllScrap來按順序儲存所有的RecycleItem物件，用來複用。當恢復一個mAllScrap中存在的Item時，其座標和寬高都已經確定。

Recycler的實現核心程式碼如下：

public class Recycler {
    public static final int DIRECTION_UP = 0;
    public static final int DIRECTION_DOWN = 2;
    private ArrayList<RecyclerItem> mAllScrap = new ArrayList<>();
    private LinkedList<RecyclerItem> mAttachedScrap = new LinkedList<>();
    private LinkedList<Component> mCacheScrap = new LinkedList<Component>();
    private BaseItemProvider mProvider;
    private SpanLayout mSpanLayout;
    private int direction = 0;
    public Recycler(SpanLayout layout, BaseItemProvider provider) {
        this.mSpanLayout = layout;
        this.mProvider = provider;
    }
    public ArrayList<RecyclerItem> getAllScrap() {
        return mAllScrap;
    }
    public LinkedList<RecyclerItem> getAttachedScrap() {
        return mAttachedScrap;
    }
    public void cacheItem(int index, RecyclerItem item) {
        mAllScrap.add(index, item);
    }
    public void attachComponent(RecyclerItem item) {
        mAttachedScrap.add(item);
    }
    public Component getView(int index, ComponentContainer container) {
        Component cache = mCacheScrap.poll();
        return mProvider.getComponent(index, cache, container);
    }
    public void addItem(int index,RecyclerItem item) {
        mAllScrap.add(index,item);
    }
    public void attachItemToEnd(RecyclerItem item) {
        mAttachedScrap.add(item);
    }
    public void attachItemToStart(RecyclerItem item) {
        mAttachedScrap.add(0,item);
    }
    public void recycle(RecyclerItem item) {
        mSpanLayout.removeComponent(item.child);
        mAttachedScrap.remove(item);
        mCacheScrap.push(item.child);
        item.child = null;
    }
    public void recoverToEnd(RecyclerItem item) {
        Component child = mProvider.getComponent(item.index, mCacheScrap.poll(), mSpanLayout);
        child.estimateSize(
                Component.EstimateSpec.getSizeWithMode(item.width, Component.EstimateSpec.PRECISE),
                Component.EstimateSpec.getSizeWithMode(item.height, Component.EstimateSpec.PRECISE)
        );
        item.child = child;
        mAttachedScrap.add(item);
        mSpanLayout.addComponent(child);
    }
    public void recoverToStart(RecyclerItem item) {
        Component child = mProvider.getComponent(item.index, mCacheScrap.poll(), mSpanLayout);
        child.estimateSize(
                Component.EstimateSpec.getSizeWithMode(item.width, Component.EstimateSpec.PRECISE),
                Component.EstimateSpec.getSizeWithMode(item.height, Component.EstimateSpec.PRECISE)
        );
        item.child = child;
        mAttachedScrap.add(0,item);
        mSpanLayout.addComponent(child);
    }
}

總結

鴻蒙OS的開發SDK中基礎能力都已經提供全面了，完全可以用來實現一些複雜效果。這裡實現的SpanLayout+LayoutManager+Recycler的基本是一個完整的複雜列表實現，其他佈局效果也可以透過實現不同的LayoutManager來實現。

完整程式碼在本人的碼雲專案上 ,在com.profound.notes.component包下，路過的請幫忙點個star。

原文連結： https://developer.huawei.com/consumer/cn/forum/topic/0202558139689270488?fid=0101303901040230869

原作者： zjwujlei

在鴻蒙中實現類似瀑布流效果

簡介

瀑布流LayoutManager

Item回收

總結

相關文章