Vlayout使用詳細介紹

目錄介紹

• 1.Vlayout簡單介紹
• 2.主要功能介紹
• 2.1 主要功能的思維導圖
• 2.2 主要功能說明
• .使用方法與案例
• 3.1 初始化
• 3.2 設置回收復用池
• 3.3 設置RecycleView適配器
• 3.4 添加模塊的adapter
• 3.5 將所有adapter綁定到RecycleView
• 4.相關代碼說明
• 4.1 VirtualLayoutAdapter
• 4.2 VirtualLayoutManager
• 4.3 LayoutHelper
• 4.4 LayoutHelperFinder
• 4.5 MarginLayoutHelper
• 4.6 BaseLayoutHelper
• 4.7 子LayoutHelper
• 5.相關屬性介紹
• 5.1 LayoutHelper方法說明
• 5.1.1 margin, padding
• 5.1.2 dividerHeight
• 5.1.3 aspectRatio
• 5.1.4 bgColor, bgImg
• 5.1.5 weights
• 5.1.6 vGap, hGap
• 5.1.7 spanCount, spanSizeLookup
• 5.1.8 autoExpand
• 5.1.9 lane
• 5.2 fix類型的LayoutHelper方法說明
• 5.2.1 fixAreaAdjuster
• 5.2.2 alignType, x, y
• 5.2.3 showType
• 5.2.4 stickyStart, offset
• 6.存在的bug
• 7.關于其他更多
• 7.1 關于版本更新說明
• 7.2 關于我的博客

好消息

• 博客筆記大匯總【16年3月到至今】拗军，包括Java基礎及深入知識點任洞，Android技術博客，Python學習筆記等等发侵，還包括平時開發(fā)中遇到的bug匯總交掏，當然也在工作之余收集了大量的面試題，長期更新維護并且修正刃鳄，持續(xù)完善……開源的文件是markdown格式的盅弛！同時也開源了生活博客，從12年起，積累共計47篇[近20萬字]挪鹏，轉載請注明出處见秽，謝謝！
• 鏈接地址：https://github.com/yangchong211/YCBlogs
• 如果覺得好讨盒，可以star一下解取，謝謝！當然也歡迎提出建議催植，萬事起于忽微肮蛹，量變引起質變！

0.本人寫的綜合案例

• 案例
• 說明及截圖
• 模塊：新聞创南，音樂伦忠，視頻，圖片稿辙，唐詩宋詞昆码，快遞，天氣邻储，記事本赋咽，閱讀器等等
• 接口：七牛，阿里云吨娜，天行脓匿，干貨集中營，極速數(shù)據(jù)宦赠，追書神器等等
• 持續(xù)更新目錄說明

• 關于目前使用Vlayout框架的案例有

• https://github.com/yangchong211/YCVideoPlayer
• https://github.com/yangchong211/LifeHelper
• 關于截圖如下所示陪毡，如果覺得好，請star勾扭。
• image
• image

1.Vlayout簡單介紹

• 阿里的開源框架毡琉，地址是：https://github.com/alibaba/vlayout/
• VirtualLayout是一個針對RecyclerView的LayoutManager擴展, 主要提供一整套布局方案和布局間的組件復用的問題。

2.主要功能介紹

2.1 主要功能思維導圖

2.2 主要功能說明

• 默認通用布局實現(xiàn)妙色，解耦所有的View和布局之間的關系: Linear, Grid, 吸頂, 浮動, 固定位置等

* 1：LinearLayoutHelper: 線性布局
* 2：GridLayoutHelper: Grid布局桅滋， 支持橫向的colspan
* 3：FixLayoutHelper: 固定布局，始終在屏幕固定位置顯示
* 4：ScrollFixLayoutHelper: 固定布局身辨，但之后當頁面滑動到該圖片區(qū)域才顯示, 可以用來做返回頂部或其他書簽等
* 5：FloatLayoutHelper: 浮動布局丐谋，可以固定顯示在屏幕上，但用戶可以拖拽其位置
* 6：ColumnLayoutHelper: 欄格布局栅表，都布局在一排笋鄙，可以配置不同列之間的寬度比值
* 7：SingleLayoutHelper: 通欄布局，只會顯示一個組件View
* 8：OnePlusNLayoutHelper: 一拖N布局怪瓶，可以配置1-5個子元素
* 9：StickyLayoutHelper: stikcy布局， 可以配置吸頂或者吸底
* 10：StaggeredGridLayoutHelper: 瀑布流布局，可配置間隔高度/寬度

3.使用方法與案例

3.0 具體可以參考我的實際案例：https://github.com/yangchong211/LifeHelper

3.1 初始化

• 創(chuàng)建VirtualLayoutManager對象洗贰，與RecycleView綁定

//創(chuàng)建VirtualLayoutManager對象
VirtualLayoutManager layoutManager = new VirtualLayoutManager(activity);
recyclerView.setLayoutManager(layoutManager);

3.2 設置回收復用池

• 設置回收復用池大小

//設置回收復用池大小找岖，（如果一屏內相同類型的 View 個數(shù)比較多，需要設置一個合適的大小敛滋，防止來回滾動時重新創(chuàng)建 View）
RecyclerView.RecycledViewPool viewPool = new RecyclerView.RecycledViewPool();
recyclerView.setRecycledViewPool(viewPool);
viewPool.setMaxRecycledViews(0, 20);

3.3 設置RecycleView適配器

• 設置 V - Layout的Adapter有兩種方式:
  • 方式1：繼承 自 DelegateAdapter
  • 方式2：繼承 自 VirtualLayoutAdapter
• 目前只討論方式1：繼承 自 DelegateAdapter
  • 定義：DelegateAdapter是V - Layout專門為管理 LayoutHelper定制的 Adapter
  • 繼承自VirtualLayoutAdapter
  • 作用：通過管理不同布局的Adapter许布，繼而管理不同的 LayoutHelper，從而實現(xiàn)使用不同組合布局
  • 特別注意：雖不可直接綁定LayoutHelper绎晃，但是它內部有一個繼承自RecyclerView.Adapter的內部類Adapter可以綁定LayoutHelper蜜唾；
  • 即通過一個List把綁定好的Adapter打包起來，再放去DelegateAdapter庶艾，這樣就可以實現(xiàn)組合使用不同的布局
• 具體做法：

//設置適配器
DelegateAdapter delegateAdapter = new DelegateAdapter(layoutManager, true);
recyclerView.setAdapter(delegateAdapter

/**
 * ================================================
 * 作    者：楊充
 * 版    本：1.0
 * 創(chuàng)建日期：2017/9/18
 * 描    述：Vlayout框架基類適配器
 * 修訂歷史：
 * ================================================
 */
public class BaseDelegateAdapter extends DelegateAdapter.Adapter<BaseViewHolder> {

    private LayoutHelper mLayoutHelper;
    private int mCount = -1;
    private int mLayoutId = -1;
    private Context mContext;
    private int mViewTypeItem = -1;

    protected BaseDelegateAdapter(Context context, LayoutHelper layoutHelper, int layoutId, int count, int viewTypeItem) {
        this.mContext = context;
        this.mCount = count;
        this.mLayoutHelper = layoutHelper;
        this.mLayoutId = layoutId;
        this.mViewTypeItem = viewTypeItem;
    }

    @Override
    public LayoutHelper onCreateLayoutHelper() {
        return mLayoutHelper;
    }

    @Override
    public BaseViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        if (viewType == mViewTypeItem) {
            return new BaseViewHolder(LayoutInflater.from(mContext).inflate(mLayoutId, parent, false));
        }
        return null;
    }

    @Override
    public void onBindViewHolder(BaseViewHolder holder, int position) {

    }

    /**
     * 必須重寫不然會出現(xiàn)滑動不流暢的情況
     */
    @Override
    public int getItemViewType(int position) {
        return mViewTypeItem;
    }

    //條目數(shù)量
    @Override
    public int getItemCount() {
        return mCount;
    }
}

3.4 添加模塊的LayoutHelper

• 這里代碼以LinearLayoutHelper為例子袁余。詳細可以參考我的案例

BaseDelegateAdapter titleAdapter = new BaseDelegateAdapter(activity, new LinearLayoutHelper(),
    R.layout.view_vlayout_title, 1, Constant.viewType.typeTitle) {
    @Override
    public void onBindViewHolder(BaseViewHolder holder, int position) {
        super.onBindViewHolder(holder, position);
        holder.setText(R.id.tv_title, title);
    }
};

3.5 將生成的LayoutHelper 交給Adapter，并綁定到RecyclerView 對象

• 相關代碼如下所示：

private void initRecyclerView() {
    DelegateAdapter delegateAdapter = presenter.initRecyclerView(recyclerView);
    //把輪播器添加到集合
    BaseDelegateAdapter bannerAdapter = presenter.initBannerAdapter();
    mAdapters.add(bannerAdapter);

    //初始化九宮格
    BaseDelegateAdapter menuAdapter = presenter.initGvMenu();
    mAdapters.add(menuAdapter);

    //初始化
    BaseDelegateAdapter marqueeAdapter = presenter.initMarqueeView();
    mAdapters.add(marqueeAdapter);

    //初始化標題
    BaseDelegateAdapter titleAdapter = presenter.initTitle("猜你喜歡");
    mAdapters.add(titleAdapter);
    //初始化list1
    BaseDelegateAdapter girdAdapter = presenter.initList1();
    mAdapters.add(girdAdapter);


    //初始化標題
    titleAdapter = presenter.initTitle("熱門新聞");
    mAdapters.add(titleAdapter);
    //初始化list2
    BaseDelegateAdapter linearAdapter = presenter.initList2();
    mAdapters.add(linearAdapter);

    //初始化標題
    titleAdapter = presenter.initTitle("新聞導航");
    mAdapters.add(titleAdapter);
    //初始化list3
    BaseDelegateAdapter girdAdapter3 = presenter.initList3();
    mAdapters.add(girdAdapter3);

    //初始化標題
    titleAdapter = presenter.initTitle("為您精選");
    mAdapters.add(titleAdapter);
    //初始化list3
    BaseDelegateAdapter plusAdapter = presenter.initList4();
    mAdapters.add(plusAdapter);

    //初始化折疊式指示器控件
    //initSticky();
    //mAdapters.add(stickyAdapter);

    //初始化list控件
    titleAdapter = presenter.initTitle("優(yōu)質新聞");
    mAdapters.add(titleAdapter);
    linearAdapter = presenter.initList5();
    mAdapters.add(linearAdapter);

    //設置適配器
    delegateAdapter.setAdapters(mAdapters);
}

4.相關代碼說明

4.1 VirtualLayoutAdapter

* 定義：數(shù)據(jù)適配器咱揍。繼承自系統(tǒng)的Adaper
* 作用：創(chuàng)建組件 & 綁定數(shù)據(jù)到組件
* 額外：定義了兩個接口：
    * getLayoutHelper()：用于返回某個位置組件對應的一個 LayoutHelper
    * setLayoutHelpers()：調用此方法設置整個頁面所需要的一系列 LayoutHelper
* 這兩方法的具體實現(xiàn)委托給 VirtualLayoutManager 完成

4.2 VirtualLayoutManager

* 定義：布局管理器颖榜。繼承自系統(tǒng)的 LinearLayoutManager
* 作用：

    * 在 RecyclerView 加載組件或者滑動時調用 VirtualLayoutManager 的 layoutChunk()，返回當前還有哪些空白區(qū)域可擺放組件
    * 管理 LayoutHelper 列表
* 額外：實現(xiàn)了 VirtualLayoutAdapter 的 getLayoutHelper() & setLayoutHelpers()

4.3 LayoutHelper

* 定義：LayoutHelper 尋找器
* 作用：根據(jù)頁面狀態(tài) 尋找對應的 LayoutHelper 并返回給 VirtualLayoutManager
    * VirtualLayoutManager 會持有一個 LayoutHelperFinder
    * 當 layoutChunck() 被調用時會傳入一個位置參數(shù)煤裙，告訴 VirtualLayoutManager 當前要布局第幾個組件
* VirtualLayoutManager 通知持有的 LayoutHelperFinder 找到傳入?yún)?shù)位置對應的 LayoutHelper（每個 LayoutHelper 都會綁定它負責的布局區(qū)域的起始位置和結束位置）

4.4 LayoutHelperFinder

* 定義：布局協(xié)助器
* 作用：負責具體的布局邏輯

4.5 MarginLayoutHelper

* 定義：繼承自 LayoutHelper
* 作用：擴展 LayoutHelper掩完，提供了布局常用的 內邊距padding、外邊距margin 的計算功能

4.6 BaseLayoutHelper

    * 定義：MarginLayoutHelper 的第一層具體實現(xiàn)
    * 作用：填充 當前LayoutHelper 在屏幕范圍內的具體區(qū)域 背景色硼砰、背景圖等邏輯

4.7 子LayoutHelper

* 定義：MarginLayoutHelper 的第二層具體實現(xiàn)
* 作用：負責具體的布局邏輯
    * 每種 子LayoutHelper 負責一種布局邏輯
    * 重點實現(xiàn)了 beforeLayout()且蓬、doLayout()、afterLayout()
    * 特別是 doLayout()：會獲取一組件题翰，并對組件進行尺寸計算恶阴、界面布局
    * V - Layout 默認實現(xiàn)了10種默認布局：（對應同名的LayoutHelper）
* 特別注意：
    * 每一種 LayoutHelper 負責布局一批組件范圍內的組件，不同組件范圍內的組件之間遍愿，如果類型相同存淫，可以在滑動過程中回收復用。因此回收粒度比較細沼填，且可以跨布局類型復用.
    * 支持擴展外部：即注冊新的 LayoutHelper桅咆，實現(xiàn)特殊的布局方式。下面會詳細說明

5.相關屬性介紹

5.1 LayoutHelper方法說明

* 5.1.1 margin, padding
    * Margin, padding就是外邊距坞笙、內邊距
    * 它不是整個RecyclerView頁面的margin和padding岩饼，它是每一塊LayoutHelper所負責的區(qū)域的margin和padding。
    * 一個頁面里可以有多個LayoutHelper薛夜，意味著不同LayoutHelper可以設置不同的margin和padding籍茧。
    * LayoutHelper的margin和padding與頁面RecyclerView的margin和padding可以共存。
    * 目前主要針對非fix類型的LayoutHelper實現(xiàn)了margin和padding梯澜，fix類型LayoutHelper內部沒有相對位置關系寞冯，不處理邊距。

* 5.1.2 dividerHeight
    * LinearLayoutHelper的屬性，LinearLayoutHelper是像ListView一樣的線性布局吮龄，dividerHeight就是每個組件之間的間距俭茧。

* 5.1.3 aspectRatio
    * 為了保證布局過程中視圖的高度一致，我們設計了aspectRatio屬性漓帚，它是寬與高的比例母债，LayoutHelper里有aspectRatio屬性，通過vlayout添加的視圖的LayoutParams也有aspectRatio屬性尝抖，后者的優(yōu)先級比前者高毡们，但含義不一樣。
        * LayoutHelper定義的aspectRatio昧辽，指的是一行視圖整體的寬度與高度之比衙熔，當然整體的寬度是減去了RecyclerView和對應的LayoutHelper的margin, padding。
        * 視圖的LayoutParams定義的aspectRatio奴迅，指的是在LayoutHelper計算出視圖寬度之后青责，用來確定視圖高度時使用的，它會覆蓋通過LayoutHelper的aspectRatio計算出來的視圖高度取具，因此具備更高優(yōu)先級脖隶。

* 5.1.4 bgColor, bgImg
    * 背景顏色或者背景圖，這其實不是布局屬性暇检，但是由于在vlayout對視圖進行了直接布局产阱，不同區(qū)域的視圖的父節(jié)點都是RecyclerView，如果想要針對某一塊區(qū)域單獨繪制背景块仆，就很難做到了构蹬。vlayout框架對此做了特殊處理，對于非fix悔据、非float類型的LayoutHelper庄敛，支持配置背景色或背景圖抱婉。同樣目前主要針對非fix類型的LayoutHelper實現(xiàn)這個特性兄墅。

* 5.1.5 weights
    * ColumnLayoutHelper, GridLayoutHelper的屬性，它們都是提供網(wǎng)格狀的布局能力爽雄，建議使用GridLayoutHelper头滔，它的能力更加強大怖亭，參考下文介紹。默認情況下坤检，每個網(wǎng)格中每一列的寬度是一樣的兴猩，通過weights屬性，可以指定讓每一列的寬度成比例分配早歇，就像LinearLayout的weight屬性一樣倾芝。 weights屬性是一個float數(shù)組讨勤，每一項代表某一列占父容器寬度的百分比，總和建議是100蛀醉，否則布局會超出容器寬度悬襟；如果布局中有4列衅码，那么weights的長度也應該是4拯刁；長度大于4，多出的部分不參與寬度計算逝段；如果小于4垛玻，不足的部分默認平分剩余的空間。
    * 比如奶躯，setweights(0.6 , 0.2 , 0.2);那么分配比例是3：1：1
    
* 5.1.6 vGap, hGap
    * GridLayoutHelper與StaggeredGridLayoutHelper都有這兩個屬性帚桩，分別控制視圖之間的垂直間距和水平間距。
    
* 5.1.7 spanCount, spanSizeLookup
    * GridLayoutHelper的屬性嘹黔，參考于系統(tǒng)的GridLayoutManager账嚎，spanCount表示網(wǎng)格的列數(shù)，默認情況下每一個視圖都占用一個網(wǎng)格區(qū)域儡蔓，但通過提供自定義的spanSizeLookUp郭蕉，可以指定某個位置的視圖占用多個網(wǎng)格區(qū)域
    
    
* 5.1.8 autoExpand
    * GridLayoutHelper的屬性，當一行里視圖的個數(shù)少于spanCount值的時候喂江，如果autoExpand為true召锈，視圖的總寬度會填滿可用區(qū)域；否則會在屏幕上留空白區(qū)域获询。
    
* 5.1.9 lane
    * StaggeredGridLayoutHelper中有這個屬性涨岁，與GridLayoutHelper里的spanCount類似，控制瀑布流的列數(shù)吉嚣。

5.2 fix類型的LayoutHelper方法說明

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

* 5.2.2 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是視圖底邊相對父容器的下邊距偏移量之剧；

* 5.2.3 showType
    * ScrollFixLayoutHelper的屬性，取值有SHOW_ALWAYS, SHOW_ON_ENTER, SHOW_ON_LEAVE砍聊。
        * SHOW_ALWAYS：與FixLayoutHelper的行為一致背稼，固定在某個位置；
        * SHOW_ON_ENTER：默認不顯示視圖玻蝌，當頁面滾動到這個視圖的位置的時候蟹肘，才顯示；
        * SHOW_ON_LEAVE：默認不顯示視圖俯树，當頁面滾出這個視圖的位置的時候顯示帘腹；

* 5.2.4 stickyStart, offset
    * StickyLayoutHelper的屬性，當視圖的位置在屏幕范圍內時聘萨，視圖會隨頁面滾動而滾動竹椒；當視圖的位置滑出屏幕時，StickyLayoutHelper會將視圖固定在頂部（stickyStart = true）或者底部（stickyStart = false）米辐，固定的位置支持設置偏移量offset胸完。

7.關于其他更多

7.1 關于本篇博客更新日志

• v1.0.0 17年9月19日
• v1.0.1 17年12月11日

7.2 關于我的博客

• 我的個人站點：www.yczbj.org，www.ycbjie.cn
• github：https://github.com/yangchong211
• 知乎：https://www.zhihu.com/people/yang-chong-69-24/pins/posts
• 領英：https://www.linkedin.com/in/chong-yang-049216146/
• 簡書：http://www.reibang.com/u/b7b2c6ed9284
• csdn：http://my.csdn.net/m0_37700275
• 網(wǎng)易博客：http://yangchong211.blog.163.com/
• 新浪博客：http://blog.sina.com.cn/786041010yc
• 喜馬拉雅聽書：http://www.ximalaya.com/zhubo/71989305/
• 脈脈：yc930211
• 360圖書館：http://www.360doc.com/myfiles.aspx
• 開源中國：https://my.oschina.net/zbj1618/blog
• 泡在網(wǎng)上的日子：http://www.jcodecraeer.com/member/content_list.php?channelid=1
• 郵箱：yangchong211@163.com
• 阿里云博客：https://yq.aliyun.com/users/article?spm=5176.100- 239.headeruserinfo.3.dT4bcV
• 博客園：http://www.cnblogs.com/yc211/
• segmentfault頭條：https://segmentfault.com/u/xiangjianyu/articles