快速利用RecyclerView的LayoutManager搭建流式佈局

xiangcman發表於2018-04-13
原文網址 : https://juejin.im/post/5ad039586fb9a028b86e6d52
View

之前也寫了一個ViewGroup版本的流式佈局,該流式佈局有兩大優點:可以設定行數和是否內容在該行中居中顯示(猛戳),說真的自從對RecyclerView的LayoutManager有新的認識後，完全不用擔心很多的複雜佈局了。而且對ViewGroup測量過程也不用擔心了，因為裡面有LayoutManager幫我們實現了。下面就進入該篇文章的主題吧，廢話不多說，直接上圖更有說服力。

simple.gif

上面的示例圖是我把ItemView分別用了TextView和ImageView。其實這些是沒什麼好說的，主要是如何定義這樣的LayoutManager。相信大家都用過了LinearLayoutManager吧，系統提供的LayoutManager都是對齊的方式進行排版的，我們這裡的flow的樣式就是在排版item之前，判斷了該行多餘的空間還夠不夠顯示，如果不夠直接換行顯示的思路。

使用:

詳見TextFlowActivity、DiffHeightTextFlowActivity、PhotoFlowActivity

RecyclerView recyclerView = (RecyclerView) findViewById(flow);
FlowLayoutManager flowLayoutManager = new FlowLayoutManager();
//設定每一個item間距
recyclerView.addItemDecoration(new SpaceItemDecoration(dp2px(10)));
recyclerView.setLayoutManager(flowLayoutManager);
recyclerView.setAdapter(new FlowAdapter());
複製程式碼

常見商品屬性介面(RV巢狀RV,item高度為wrap_content):

商品屬性介面.gif

使用:見ProductActivity

常見懸浮商品屬性介面(RV巢狀RV,item高度為wrap_content):

懸浮商品屬性介面.gif

使用:見SuspensionProductActivity

動畫修復問題:

動畫演示.gif

使用:見TextFlowActivity

viewpager中流式佈局應用:

viewpager中流式佈局.gif

使用:見ViewPagerActivity

新增RV巢狀RV高度為wrap_content不顯示問題，請使用: NestedRecyclerView

新增長點選進入刪除效果，點選外面進入正常模式:

長點選刪除介面.gif
使用:見LongClickDeleteTextFlowActivity

gradle依賴:

all projects {
	repositories {
		...
		maven { url 'https://jitpack.io' }
	}
}

dependencies {
        compile 'com.github.1002326270xc:LayoutManager-FlowLayout:v1.6'
}
複製程式碼

歡迎大家提出問題，留言板留言或郵箱直接聯絡我。我會第一時間測試相關的bug

歡迎客官到本店光臨:184793647(qq群)

關於我:

email: a1002326270@163.com

csdn:enter

github:enter

相關文章