iOS類似于搜索歷史記錄布局的兩種實(shí)現(xiàn)方式

gitHub地址:github.com/wangtongke/AutoFitLabel.git

如果是下面這種的

則比較容易實(shí)現(xiàn)。一種是通過(guò)動(dòng)態(tài)計(jì)算label的寬度,九宮格創(chuàng)建。另外一種就是使用collectionView,重寫(xiě)layout來(lái)實(shí)現(xiàn),也就是一個(gè)橫向的瀑布流布局。推薦使用MSSAutoresizeLabelFlow,已經(jīng)封裝好,創(chuàng)建時(shí)傳一個(gè)數(shù)組即可,點(diǎn)擊事件則通過(guò)block傳遞。創(chuàng)建方式如下

另外一種如下圖

這種就比較蛋疼了,橫向瀑布流用不了了。只能自己用九宮格寫(xiě)。下面說(shuō)一下要點(diǎn)及思路。

1、每行的字?jǐn)?shù)、label個(gè)數(shù)都是不固定的,但是間距都是一定的,并且距離邊界都是一樣的。

2、每一個(gè)級(jí)別的高度也是不固定的,

3、上面點(diǎn)擊之后,下級(jí)會(huì)改變,所以還要考慮重用。

下面主要說(shuō)一下九宮格創(chuàng)建。考慮到每行不能超過(guò)多少個(gè)字,或者不能多于幾個(gè)按鈕(這里設(shè)置的是18個(gè)字,6個(gè)按鈕),并且每行最少兩個(gè)。所以使用了雙重循環(huán),第一層循環(huán)為遍歷整個(gè)數(shù)組,內(nèi)嵌兩個(gè)循環(huán),一個(gè)循環(huán)為while循環(huán)判斷每行不能超過(guò)18個(gè)字或者6個(gè)按鈕。另外一個(gè)循環(huán)創(chuàng)建btn。 ?

如下:

內(nèi)部while循環(huán)

超過(guò)18個(gè)字或者大于6個(gè)就跳出循環(huán),btnNum為本次循環(huán)所要?jiǎng)?chuàng)建的btn個(gè)數(shù)。


結(jié)束本次外部循環(huán)后,使i= j,然后再開(kāi)始下一行的循環(huán)。

gitHub地址GitHub - wangtongke/AutoFitLabel: 自適應(yīng)label布局,類似于歷史搜索列表

github上面只有下面這兩種布局。沒(méi)有多級(jí)聯(lián)動(dòng)類的布局。


另外按鈕寬度根據(jù)文字計(jì)算,這個(gè)不在多說(shuō)

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容