EUI庫 自動布局

2022-03-11 18:58:21 字數 2647 閱讀 4850

自適應流式布局

width="100%"

top left right

horizontalcenter=0

失效驗證機制

這些非同步過程都封裝好了,我們只需要關注那一對方法:invalidateproperties()commitproperties(),前者標記屬性失效,後者應用失效的屬性

乙個是測量驗證invalidatesize()measure()

乙個是布局驗證。invalidatedisplaylist()updatedisplaylist()

這兩組什麼時候用呢

如果你希望你自定義的元件像框架裡的標準元件一樣,能加入自動布局體系,就必須要同時複寫measure()和updatedisplaylist()這兩個方法

group把自己的measure()方法交給了layout.measure()去實現,updatedisplaylist()交給了layout.updatedisplaylist()去實現。也就是把具體的布局方式解耦了出來,成了獨立的乙個layoutbase類。這樣所有的容器都可以採用group+layoutbase的組合的方式,為自己設定任意的布局。

解決非同步問題

失效驗證機制能夠很好的確保自動布局的效能,但是卻會帶來新的非同步問題,大部分情況下我們並不會感受到失效驗證的非同步存在,因為它總是在本幀螢幕重新整理前驗證失效列表的,只有小部分在驗證失效過程中又產生了新失效的情況,才會延遲到下一幀去處理。這種情況會導致的結果通常就是在初始化面板時會閃一下。解決這個問題有好幾種方案,可以一開始將面板新增到顯示列表時設定visible為false,延遲一段時間後再顯示它。我們這裡再討論另一種方案,提前處理失效驗證:

還有一種使用情景,不過很少會遇到,就是我們給乙個元件設定了自動布局屬性,比如leftright,想要獲得它布局後的準確寬度。這種情況也同樣有兩種思路:

2.呼叫元件父級容器的validatenow()方法,這裡請務必注意是"父級容器"的validatenow()方法,不是自身的,因為元件的布局是由父級容器決定的。

自動布局除錯

includeinlayout  指定此元件是否包含在父容器的布局中

explicitwidth,explicitheight

所以這兩個屬性的作用就是儲存你顯式設定的值

)maxwidth,minwidth,maxheight,minheight

)maxwidth,minwidth,maxheight,minheight:最大和最小尺寸。這裡要注意:它們同時影響測量和布局的結果。measure()方法執行完會對measuredwidth,measuredheight賦值一次。然後交給uicomponent裡的validtesize()方法,再次規範測量結果。這時候就根據這四個值來規範的。最終確定measuredwidth,measuredheight的值。布局時同理。

width height

布局設定的值 > 顯式設定的值 > 測量的值

measuredwidth,measuredheight

每個元件measure()方法執行的最終結果就是對這兩個屬性賦值

它們只記錄測量結果

)preferredwidth,preferredheight

首選寬高,這兩個值通常在measure()方法中被呼叫。只是個便捷屬性,按照explicitwidth,explicitheight > measuredwidth,measuredheight的優先順序返回值。布局類在measure()方法中,呼叫子項的這個屬性,來獲取子項的測量結果。累加到自身的測量結果上。注意這個值已經包含旋轉和縮放的值,且返回值永遠為正數。

)layoutboundswidth,layoutboundsheight:

布局寬高,這兩個值通常在updatedisplaylist()方法中被呼叫。也是個便捷屬性。按照 布局設定的寬高 > explicitwidth,explicitheight > measuredwidth,measuredheight的優先順序返回值。注意這個值已經包含旋轉和縮放的值,且返回值永遠為正數

preferredx,preferredy,layoutboundsx,layoutboundsy

這四個屬性,通常情況下就是xy的值。但是當元件含有旋轉縮放時。他們為元件旋轉縮放後在父級容器裡實際顯示的起點。

除錯技巧

(1)自身是否被顯式設定了尺寸?檢視explicitwidth,explicitheight。如果顯式設定了,設定的對嗎?不對找到問題。沒有顯式設定就繼續。

(2)測量的尺寸對不對?檢視measuredwidth,measuredheight。不對,繼續。對,跳到(5)

(3)檢視top,left,right,bottom,horizontalcenter,verticalcenter,percentwidth,percentheight這些布局屬性對不對。注意:只有basiclayout下這些屬性才全部有效。

(4)布局類對嗎?檢視layout屬性。以上都查過了,找不出問題,繼續按(5)和(6)在顯示列表向上或向下開始找。

(5)向上檢視父級以及父級的父級容器的相關屬性,是否正確。是否是父級容器強制設定了我們的尺寸。

(6)檢視子項以及子項的子項的測量尺寸。找到第乙個開始不對的節點

EUI庫學習雜記

viewstack介紹。參考這裡。viewstack結合tabbar使用參考這裡。參考這裡。注意 位置和尺寸的約束應該是在 scroller 上面,而不是容器上面。繼承關係 eui.list eui.listbase eui.datagroup eui.group eui.tabbar eui.li...

SnapKit 自動布局庫

初始化子檢視 沒有frame 並add到父檢視上 呼叫 myview.snp.makeconstraints 盡情享受簡潔 實現 autolayout吧!snp.makeconstraints 方法給view新增約束,約束種類 分別是邊距,寬,高,左上右下距離,基準線。同時,新增過約束後可以有修正,...

EUI庫 9 資料集合 列表

list 和datagroup的區別 1 選中一項 會觸發 eui.itemevent.item tap 事件,2 有選中項的概念,可以設定 list 裡的預設選中項 selectedindex selecteditem 3 可以開啟多選狀態 allowmultepleselection true ...