蘋果核 - vlayout使用說明（二）

 

前言

vlayout 的設計思路請參考Tangram 的基礎 —— vlayout（Android）。框架已經開源，歡迎移步到 github上指教。本文介紹 vlayout 的基本佈局樣式上的屬性說明。

margin, padding

Margin, padding就是外邊距、內邊距，概念與Android系統的margin, padding一樣，但也有不同的地方：

• 它不是整個RecyclerView頁面的margin和padding，它是每一塊LayoutHelper所負責的區域的margin和padding。
• 一個頁面裏可以有多個LayoutHelper，意味着不同LayoutHelper可以設置不同的margin和padding。
• LayoutHelper的margin和padding與頁面RecyclerView的margin和padding可以共存。
• 目前主要針對非fix類型的LayoutHelper實現了margin和padding，fix類型LayoutHelper內部沒有相對位置關係，不處理邊距。

 

接口

對於LayoutHelper，調用

public void setPadding(int leftPadding, int topPadding, int rightPadding, int bottomPadding)

public void setMargin(int leftMargin, int topMargin, int rightMargin, int bottomMargin)

bgColor, bgImg

背景顏色或者背景圖，這其實不是佈局屬性，但是由於在vlayout對視圖進行了直接佈局，不同區域的視圖的父節點都是RecyclerView，如果想要針對某一塊區域單獨繪製背景，就很難做到了。vlayout框架對此做了特殊處理，對於非fix、非float類型的LayoutHelper，支持配置背景色或背景圖。同樣目前主要針對非fix類型的LayoutHelper實現這個特性。

轉存失敗重新上傳取消

接口

使用背景色

public void setBgColor(int bgColor)

使用背景圖

首先爲LayoutManager提供一個ImageView簡單工廠

this.mLayoutManager.setLayoutViewFactory(new LayoutViewFactory() {
            @Override
            public opinion generateLayoutView(@NonNull Context context) {
                return new XXImageView(context);
            }
        });

再爲LayoutHelper提設置圖片加載的Listener

baseHelper.setLayoutViewBindListener(new BindListener(imgUrl));
baseHelper.setLayoutViewUnBindListener(new UnbindListener(imgUrl));


private static class BindListener implements BaseLayoutHelper.LayoutViewBindListener {
        private String imgUrl;

        public BindListener(String imgUrl) {
            this.imgUrl = imgUrl;
        }

        @Override
        public void onBind(View layoutView, BaseLayoutHelper baseLayoutHelper) {
            //loading image
        }
    }

    private static class UnbindListener implements BaseLayoutHelper.LayoutViewUnBindListener {
        private String imgUrl;

        public UnbindListener(String imgUrl) {
            this. imgUrl = imgUrl;
        }

        @Override
        public void onUnbind(View layoutView, BaseLayoutHelper baseLayoutHelper) {
        		//cancel loading image
        }
    }

aspectRatio

爲了保證佈局過程中視圖的高度一致，我們設計了aspectRatio屬性，它是寬與高的比例，LayoutHelper裏有aspectRatio屬性，通過vlayout添加的視圖的LayoutParams也有aspectRatio屬性，後者的優先級比前者高，但含義不一樣。

• LayoutHelper定義的aspectRatio，指的是一行視圖整體的寬度與高度之比，當然整體的寬度是減去了RecyclerView和對應的LayoutHelper的margin, padding。
• 視圖的LayoutParams定義的aspectRatio，指的是在LayoutHelper計算出視圖寬度之後，用來確定視圖高度時使用的，它會覆蓋通過LayoutHelper的aspectRatio計算出來的視圖高度，因此具備更高優先級。

轉存失敗重新上傳取消

接口

對於LayoutHelper，調用

public void setAspectRatio(float aspectRatio)

對於LayoutParams，調用

((VirutalLayoutManager.LayoutParams) layoutParams).mAspectRatio

dividerHeight

LinearLayoutHelper的屬性，LinearLayoutHelper是像ListView一樣的線性佈局，dividerHeight就是每個組件之間的間距。

轉存失敗重新上傳取消

接口

對於LinearLayoutHelper，調用

public void setDividerHeight(int dividerHeight)

weights

ColumnLayoutHelper, GridLayoutHelper的屬性，它們都是提供網格狀的佈局能力，建議使用GridLayoutHelper，它的能力更加強大，參考下文介紹。默認情況下，每個網格中每一列的寬度是一樣的，通過weights屬性，可以指定讓每一列的寬度成比例分配，就像LinearLayout的weight屬性一樣。 weights屬性是一個float數組，每一項代表某一列佔父容器寬度的百分比，總和建議是100，否則佈局會超出容器寬度；如果佈局中有4列，那麼weights的長度也應該是4；長度大於4，多出的部分不參與寬度計算；如果小於4，不足的部分默認平分剩餘的空間。

轉存失敗重新上傳取消

接口

對於ColumnLayoutHelper, GridLayoutHelper，調用

public void setWeights(float[] weights)

vGap, hGap

GridLayoutHelper與StaggeredGridLayoutHelper都有這兩個屬性，分別控制視圖之間的垂直間距和水平間距。

轉存失敗重新上傳取消

接口

對於GridLayoutHelper, StaggeredGridLayoutHelper，調用

public void setHGap(int hGap)

public void setVGap(int vGap)

spanCount, spanSizeLookup

GridLayoutHelper的屬性，參考於系統的GridLayoutManager，spanCount表示網格的列數，默認情況下每一個視圖都佔用一個網格區域，但通過提供自定義的spanSizeLookUp，可以指定某個位置的視圖佔用多個網格區域。

接口

使用spanCount調用

public void setSpanCount(int spanCount)

使用spanSizeLookup

public void setSpanSizeLookup(SpanSizeLookup spanSizeLookup)

autoExpand

GridLayoutHelper的屬性，當一行裏視圖的個數少於spanCount值的時候，如果autoExpand爲true，視圖的總寬度會填滿可用區域；否則會在屏幕上留空白區域。

 

轉存失敗重新上傳取消

接口

調用

public void setAutoExpand(boolean isAutoExpand)

lane

StaggeredGridLayoutHelper中有這個屬性，與GridLayoutHelper裏的spanCount類似，控制瀑布流的列數。

接口

調用

public void setLane(int lane)

fixAreaAdjuster

fix類型的LayoutHelper，在可能需要設置一個相對父容器四個邊的偏移量，比如整個頁面裏有一個固定的標題欄添加在vlayout容器上，vlayout內部的fix類型視圖不希望與外部的標題有所重疊，那麼就可以設置一個fixAreaAdjuster來做偏移。

接口

調用

public void setAdjuster(FixAreaAdjuster adjuster)

alignType, x, y

FixLayoutHelper, ScrollFixLayoutHelper, FloatLayoutHelper的屬性，表示吸邊時的基準位置，有四個取值，分別是TOP_LEFT, TOP_RIGHT, BOTTOM_LEFT, BOTTOM_RIGHT。x和y是相對這四個位置的偏移量，最終的偏移量還要受上述的fixAreaAdjuster影響。

• TOP_LEFT：基準位置是左上角，x是視圖左邊相對父容器的左邊距偏移量，y是視圖頂邊相對父容器的上邊距偏移量；
• TOP_RIGHT：基準位置是右上角，x是視圖右邊相對父容器的右邊距偏移量，y是視圖頂邊相對父容器的上邊距偏移量；
• BOTTOM_LEFT：基準位置是左下角，x是視圖左邊相對父容器的左邊距偏移量，y是視圖底邊相對父容器的下邊距偏移量；
• BOTTOM_RIGHT：基準位置是右下角，x是視圖右邊相對父容器的右邊距偏移量，y是視圖底邊相對父容器的下邊距偏移量；

接口

設置基準調用

public void setAlignType(int alignType)

設置偏移量調用

public void setX(int x)

public void setY(int y)

showType

ScrollFixLayoutHelper的屬性，取值有SHOW_ALWAYS, SHOW_ON_ENTER, SHOW_ON_LEAVE。

• SHOW_ALWAYS：與FixLayoutHelper的行爲一致，固定在某個位置；
• SHOW_ON_ENTER：默認不顯示視圖，當頁面滾動到這個視圖的位置的時候，才顯示；
• SHOW_ON_LEAVE：默認不顯示視圖，當頁面滾出這個視圖的位置的時候顯示；

調用

public void setShowType(int showType)

stickyStart, offset

StickyLayoutHelper的屬性，當視圖的位置在屏幕範圍內時，視圖會隨頁面滾動而滾動；當視圖的位置滑出屏幕時，StickyLayoutHelper會將視圖固定在頂部（stickyStart = true）或者底部（stickyStart = false），固定的位置支持設置偏移量offset。

轉存失敗重新上傳取消

調用

public void setStickyStart(boolean stickyStart)

public void setOffset(int offset)

相關文章

• Tangram 的基礎 —— vlayout（Android）
• vlayout使用說明（一）