其實(shí)世上本沒(méi)有桶排這個(gè)名詞,只是百度斥杜、Pinterest等用了剖煌,所以就有了赋访。觀察百度圖片,可以得出桶排的一個(gè)描述:所有圖片保持基本的比例來(lái)顯示啄枕,并且每一行的高度一樣婚陪,所有行的高度基本一致。
然而在手機(jī)上频祝,這三個(gè)約束條件是不能同時(shí)滿(mǎn)足的泌参,因?yàn)橐WC所有行的高度一致,每一行的圖片數(shù)量可能會(huì)很多常空,而手機(jī)寬度太小沽一,每一行多于3張圖片,基本圖片就太小了漓糙,看不清了铣缠,所以在手機(jī)上,只能滿(mǎn)足前兩個(gè)條件:所有圖片保持基本的比例昆禽,每一行的高度相同蝗蛙。
其實(shí)實(shí)現(xiàn)很簡(jiǎn)單,利用RecyclerView和GridLayoutManager醉鳖,GridLayoutManager.setSpanSizeLookup方法歼郭,來(lái)實(shí)現(xiàn)每一個(gè)view的寬度。所以我們要做的工作辐棒,就是來(lái)計(jì)算每一個(gè)item的span值。
首先定義一個(gè)item的數(shù)據(jù)類(lèi)型:
private classInfo {
//圖片路徑
public String path;
public int width;
public int height;
//span值
public int spanCount;
//寬高比
public float wh;
//顯示的高度
public int showHeight;
}
我們要做的工作,就是根據(jù)圖片的寬高漾根,來(lái)計(jì)算spanCount和showHeight泰涂,計(jì)算的基本流程如下:
1.遍歷當(dāng)前列表,計(jì)算寬高比
2.遍歷當(dāng)前列表辐怕,查看當(dāng)前的item是否可以插入當(dāng)前組中逼蒙,如果能插入,則繼續(xù)寄疏,如果不能插入是牢,則把這一組當(dāng)作一行,計(jì)算其span和高度
3.重復(fù)2陕截,直到最后一個(gè)元素驳棱。
代碼如下:
canInsertMore函數(shù)也很簡(jiǎn)單,就是計(jì)算當(dāng)前group內(nèi)的最小span是否超過(guò)最小值农曲,或者個(gè)數(shù)是否超過(guò)設(shè)定值社搅,或者高度是否太小,如果都不滿(mǎn)足乳规,則可以插入形葬,否則可以繼續(xù)插。
reTrimGroup函數(shù)更簡(jiǎn)單暮的,原理是根據(jù)每個(gè)item的wh的比例笙以,計(jì)算當(dāng)前span的值,然后根據(jù)寬高比冻辩,得到showHeight猖腕。
最后結(jié)果如下: